passing variables on jQuery UI AJAX-loaded Tabs

Question

I've got a unique UI issue on an online application built with PHP and jQuery. The page is made of jQuery UI tabs which load data via the ajax method. Starting on the index.php where the tabs are rendered, the user is allowed to open a jQuery UI dialog modal window to select a user. Upon choosing a user (via a link next to their name) a function should close the dialog window, select tab index #1, and make a variable available to the page that's loaded to allow me to run a query that will populate the user data in that page.

All is working well but the last part....I can't get a variable to the page to save my life.

First, the setup:

<ul>
<li><a href="dashboard.php">Dashboard</a></li>
<li><a href="currentcall.php">Current Call</a></li>
<li><a href="managequeue.php">Manage Queue</a></li>
<li><a href="admin.php">Admin</a></li>
</ul>

<script type="text/javascript">
    var curtab = $('#tabs').tabs();

    function chooseSearchProspect(prospect_id, allow_open) { 
       $('#prospect_search_modal').dialog('close');
       $("#tabs").tabs({
      disabled: [],
      selected: 1,
       });
    }
</script>

I've tried several different methods including passing ajax parameters via the "Ajax Options" field as described here which seems like the ideal solution, but no matter what I do it seems I can't get a $_REQUEST parameter through to currentcall.php. I can't just set a hidden variable in the currentcall.php via $('#id').val() in the function, because the page that will be opened by tabs hasn't been loaded into the DOM yet. I'm at a loss where to go from here!

Gabriele Petrioli · Accepted Answer · 2011-09-20 22:21:00Z

4

In the ajaxOption solution you need to use a function so that it is re-evaluated each time the ajax call is being made..

use

<script type="text/javascript">

    var variable_to_pass = 0; // your global variable;
    function getVariable(){return variable_to_pass;}

    var curtab = $('#tabs').tabs({
                       ajaxOptions: { data: { variable_used_in_php: getVariable } }
                 });

    function chooseSearchProspect(prospect_id, allow_open) { 
       $('#prospect_search_modal').dialog('close');
       variable_to_pass = 1;// set it to whatever you want to pass to the ajax call..
       $("#tabs").tabs({
         disabled: [],
         selected: 1
       });
    }
</script>

answered Sep 20, 2011 at 22:21

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

1 Comment

bpeterson76 Over a year ago

Awesome...working great. I think what ultimately made my attempts fail was the fact that I was declaring my variable inside the document ready function, then trying to run the chooseSearchProspect function outside the document ready, meaning the var was out of scope.

Collectives™ on Stack Overflow

passing variables on jQuery UI AJAX-loaded Tabs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related