How to create a LinkButton using JQuery

Question

I have an application built using ASP.NET WebForms and JQuery. In my .aspx page I have a link that, when clicked, issues a JQuery AJAX request to a WebMethod in the page's codebehind that in turns reads data from the database and returns it as JSON objects.

$.ajax({
   type: "POST",
   contentType: "application/json; charset=utf-8",
   url: 'Query.aspx/GetValues',
   dataType: "json",
   success: function (result) {
      for (var i = 0; i < result.d.length; i++) {
         var element = result.d[i];
      }
   }
});

All ok until now! The problems arises when I want to write out this JSON objects to the page, because for each of them I would like to generate HTML like that:

<li><a id="..." href="javascript:doPostback(...)">...</a></li>

In fact, I need to generate a sort of LinkButton client-side, because I need to make some server-side actions on PostBack. I don't know how to express this using JQuery.

I hope my question is clear.

Thank you very much!

Chris Kempen · Accepted Answer · 2011-10-24 08:33:40Z

1

So you're returning the JSON objects ok then? What kind of information are you returning inside those JSON objects? This might be a massive assumption, depending on what information is being returned in your JSON objects, but why not try something like this:

...
success: function (result) {
    for (var i = 0; i < result.d.length; i++) {
        var element = result.d[i];

        var link = $('<a />');
        link.attr('href', 'javascript:doPostback(...)');
        link.attr('id', 'some-id');
        link.html('link-text-here');

        var list_item = $('<li />');
        list_item.append(link);

        $('your-ordered-list-selector').append(list_item);
    }
}
...

Hope this helps! :)

answered Oct 24, 2011 at 8:33

Chris Kempen

9,6715 gold badges43 silver badges52 bronze badges

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

3 Comments

Alessandro Over a year ago

This is ok, but I need the code between these parenthesis: link.attr('href', 'javascript:doPostback(...)'); :D The problem is that I don't know how to issue a Postback (with an argument).

Chris Kempen Over a year ago

Pretty much the same as you'd do it in regular HTML. So if my function name is called "awesomeFunction", and it takes 2 arguments - both strings - you could do this: link.attr('href', 'javascript:awesomeFunction("first-string", "second-string")');

Chris Kempen Over a year ago

Alternatively, apply the onclick function: link.attr('href', 'return false').click(function(){awesomeFunction("first-string", "second-string")});

NeoStar · Accepted Answer · 2011-10-24 08:33:22Z

0

 var element = '';
 $.ajax({
   type: "POST",
   contentType: "application/json; charset=utf-8",
   url: 'Query.aspx/GetValues',
   dataType: "json",
   success: function (result) {
      for (var i = 0; i < result.d.length; i++) {
         element+= '<a href="javascript:doPostback(...)">'+result.d[i]+'</a>';
      }
    $('#result-container').html(element);
   }
});

This code will create links and load html into result-container.

answered Oct 24, 2011 at 8:33

NeoStar

357 bronze badges

5 Comments

Alessandro Over a year ago

This is ok, but I need the code between these parenthesis: link.attr('href', 'javascript:doPostback(...)'); :D The problem is that I don't know how to issue a Postback (with an argument).

NeoStar Over a year ago

Hello, Create a new function doPostback that takes argument from JSON result EDIT : ex function doPostback(str){ alert('you have selected'+str); }

NeoStar Over a year ago

You cannot call ASP functions using JS.

Alessandro Over a year ago

I don't need to call ASP.NET functions, I need to issue an ASP.NET PostBack!

NeoStar Over a year ago

Wokiez then in JS Postback function use jquery $.post to post to a ASP.NET file using function parameters as Post Request Parameters!

Collectives™ on Stack Overflow

How to create a LinkButton using JQuery

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related