How to start a C # procedure when clicking on jQuery tabs?

Question

I have 2 tabs.

• The first is the most important and loads the content very quickly.
• The second is not very important, and loading content (graphics and resumes) takes too much time.

Thus, I do not want to simultaneously load the content of both tabs. Ideally, I would just upload the contents of the first tab, and when the user clicks on the second tab, I will upload its related content (on demmand).

To do this, I need to know on the server side that the second tab has been clicked, and then send back all the relevant information to the client side.

Any ideas on how to do this?

Answer 1

To do this, you will have to make changes both on the client side and on the server side. On the server side (or behind the code), make a Static method and decorate it with the [WebMethod] attribute.

public partial class _Default : System.Web.UI.Page { ... [WebMethod] public static void MethodToBeCalledUsingAjax(parameters) { //tab clicked logic goes here } ... } 

On the client side, inside the tab click function, use jquery ajax as below

 var req = $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "Default.aspx/MethodToBeCalledUsingAjax", data: "{}", dataType: "json", success: function (msg) { } }); 

This ajax call, on demand, informs the server side that the tab is pressed and processes the code accordingly.

Please ignore the style ... I'm new to stackoverflow :)

Answer 2

The jQuery UI tab control supports AJAX content filled tabs. Just set href for the tab links to your server side url that will return the HTML content.

eg:

 <div id="my-tabs"> <ul> <li><a id="myfirst-link" href="/Server/One">First</a></li> <li><a id="mysecond-link" href="/Server/Another">Second</a></li> </ul> </div> $('#my-tabs').tabs({ load: function (event, ui) { switch (ui.tab.id) { case 'myfirst-link': break; case 'mysecond-link': break; } }, ajaxOptions: { success: function(result) { }, error: function (xhr, status, index, anchor) { } } }); 

If you need to run any Javascript when the tab has finished loading, you can use the load event. If you need to handle any success or error for every ajax call globally, you can use ajaxOptions .

Answer 3

Use jQuery-UI Tabs: Content via AJAX to populate the tab. Source: http://jqueryui.com/demos/tabs/#ajax

Here is the code (grabbed by the link above):

 <script> $(function() { $( "#tabs" ).tabs({ ajaxOptions: { error: function( xhr, status, index, anchor ) { $( anchor.hash ).html( "Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo." ); } } }); }); </script> <div class="demo"> <div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> <li><a href="ajax/content1.html">Tab 1</a></li> <li><a href="ajax/content2.html">Tab 2</a></li> <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> </ul> <div id="tabs-1"> <p>Sample Text</p> </div> </div> </div> 

Answer 4

Although I did not find how to fire the event in code when you click on the jQuery tab, this can be done using the JuiceUI tab with the SelectedTabChanged event handler

Answer 5

You should not wait for the user to click on the second tab. Most likely, you can populate the first tab in the document.onReady event. It should get the contents of the first tab using the requested ajax.

Once you get the response of the first ajax request, in the callback callback, make a new request for the second tab. That way, it will load in the background, when the user is dealing with the first tab, and when he switches to the second, he will also be ready.

Use this in your document.

  $(document).ready(function() { var req = $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "Default.aspx/MethodToBeCalledUsingAjax", data: "{}", dataType: "json", success: function (msg) { } }); }); 

in success: function, enter the code to load the second tab.