How to add a hyperlink dynamically using jQuery?

Question

I am using jQuery's getJson to get a Json object and want to display it on html page.

I can display them successfully with code like this:

$.getJSON(full_name, {}, function(data) {

        $.each(data, function(index, field){
          $("div").append(index + " : " + field + "<br>");
        });
});

And in json data, there is an item with index called 'reference'. I want to change its field from a simple text to a hyperlink. And when I click this link, it will send a GET method request to an url, and display something get from the server on a new page.

How to change my page to achieve this function?

Thanks in advance.

where is the url specified

Arun P Johny
– Arun P Johny

2013-08-23 04:46:31 +00:00
Commented Aug 23, 2013 at 4:46 — Arun P Johny
– Arun P Johny, Commented Aug 23, 2013 at 4:46

Arun P Johny · Accepted Answer · 2013-08-23 04:55:13Z

2

Try

$.getJSON(full_name, {}, function(data) {
    $.each(data, function(index, field){
        if(index == 'reference') {
            html = '<a href="link">' + field + "</a><br/>";
        } else {
            html = index + " : " + field + "<br>";
        }
        $("div").append(html);
    });
});

edited Aug 23, 2013 at 4:55

answered Aug 23, 2013 at 4:47

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jane Over a year ago

Thx a lot tonight! You can assume the url is www.test.com/field. I want to send a GET request to this url and display the content I get in a new page.

Arun P Johny Over a year ago

@SeanZhu I assume you are not looking for an ajax request then html = '<a href="www.test.com/field">' + field + "</a><br/>"; will do

Vandesh · Accepted Answer · 2013-08-23 05:00:21Z

2

$.getJSON(full_name, {}, function(data) {

        $.each(data, function(index, field){
          if(index=='reference'){
          $("div").append('<a class="jMyLink">' + field + "</a><br/>");
          } else{
          $("div").append(index + " : " + field + "<br>");
          }
        });
});
$(".jMylink").on('click',function(){
  // Place your ajax call here
});

If you are not familiar with the use of ajax, you can refer it here

edited Aug 23, 2013 at 5:00

answered Aug 23, 2013 at 4:53

Vandesh

6,9642 gold badges31 silver badges38 bronze badges

2 Comments

Sunny R Gupta Over a year ago

have a look at Arun P Jhony's method, He concatenates all the 'append' calls into a single string then appends. This would be a more efficient way. +1 since you took care of the ajax call.

Vandesh Over a year ago

@Sunny : .append() would be called only once even in my code, and the string is anyways concatenated before the append() call. But yes, using a variable would be more maintainable. Was just trying to focus on solving the core problem, so missed out. Thanks for pointing it out though :)

Rituraj ratan · Accepted Answer · 2013-08-23 04:56:43Z

$.getJSON(full_name, {}, function(data) {

    $.each(data, function(index, field){
        if(index == 'reference'){
            $("div").append('<a href="link" class="sendrequest">' + field + "</a><br/>");
        } else {
            $("div").append(index + " : " + field + "<br>");
        }
    });
});

then to send request by anchor tag click

$(".sendrequest").on('click',function(){

// apply ajax here to send get request

 //send set state request
    $.ajax({
        type: "GET",
        url: "url name",
        data: {// your data
            },
        beforeSend: function () {
// handle before send request         
 },
        success: function (data, textStatus, XmlHttpRequest) {
// handle when request success        
},
        error: function (XMLHttpRequest, textStatus, errorThrown) {
// handle error
        }
    });


});

reference ajax

Collectives™ on Stack Overflow

How to add a hyperlink dynamically using jQuery?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related