Issue with JQuery UI tabs while clicking the button

Question

I am using Jquery UI tabs. I will try explain you my problem, so here is my jquery codes for UI ajax Tabs.

$(function () {
$("#tabs").tabs({

    beforeLoad: function (event, ui) {
        if (ui.tab.data("loaded")) {
            event.preventDefault();
            return;
        }

        ui.ajaxSettings.cache = true;
        ui.panel.html(loading),
        ui.jqXHR.success(function() {
            ui.tab.data( "loaded", true );
        }),
        ui.jqXHR.error(function () {
            ui.panel.html(
            "An error occured while loading a page.");
        });
    }
});
});

At the page index.php you can see HTML codes for UI tabs.

index.php

<div id="tabs">
<ul>
  <li><a href="sections.php?id=1"></a></li>
  <li><a href="sections.php?id=3"></a></li>
  <li><a href="sections.php?id=6"></a></li>
  <li><a href="sections.php?id=8"></a></li>
</ul>
</div>

So, as you see my ajax tabs load the page sections.php. On sections.php I have a select box and I get couple options, depending on status_id.

sections.php

<?php
$status_id = (int) $_GET['id'];

$options_array = array(
1 => array(1 => 'option1', 'option2', 'option3'),
3 => array(4 => 'option4', 'option5', 'option6'),
6 => array(7 => 'option7', 'option8', 'option9'),
8 => array(10 => 'option10', 'option11', 'option12)'
);
?>

<select name="select_box">

<?php

    foreach($options_array[$status_id] as $key => $options)
    {
      echo '<option value="'.$key.'">'.$options.'</option>';
    }

?>
</select>

<button type="submit" name="button1">My Button</button>

Using jquery script at below I am able to alert the selected value of select_box .

<script>

    $('button[name="button1"]').click(
        function () {

            var value = $('select[name="select_box"]').val();
            alert(value);

            return false;
        }
    );


</script>

My question:

For example, I select second tab ( sections.php?id=3 ) and click the button, dialog displays the number 4, that is right. Then I select next option, dialog displays the number 5, that is right too. Now, I am clicking the next tab, for example ( sections.php?id=6 ) and click the button again. Now dialog should display me the number 7, but displays previous number:5. How can this be?

EDITED

Here is simple Fiddle Demo:

http://jsfiddle.net/cLHBS/

Answer 1

Try using:

var value = $('select[name="select_box"]:visible').val();

Or

var value = $(this).parents('#tabs').find('select:visible:first').val();

instead of

var value = $('select[name="select_box"]').val();

Answer 2

The current code shows tha value of first dropdown. Modify the click even as following;

$('button[name="button1"]').click(
    function () {

        var value = $('select[name="select_box"]:visible').val();
        alert(value);

        return false;
    }
);

Check this fiddle

This will select the dropdown which is visible and ignore the dropdowns that are hidden.

Answer 3

Current code logic:

• your $('select[name="select_box"]') will indeed return a list of all dropdowns with a name of select_box

• but the expression $('select[name="select_box"]').val() will just return the value of the first dropdown

• thing you need to fix : always get the selected value from the dropdown which lays down within the active tab

One other solution (beside the one provided by @AJ would be:

// Reference only the select dropdown within an active tab
var value = $('div[aria-expanded="true"] select[name="select_box"]').val();

See this updated fiddle and continue reading more about jQuery.val() here . As it's said:

Get the current value of the first element in the set of matched elements or set the value of every matched element.