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/

can you a sample fiddle?

Yaje
– Yaje

2014-06-20 06:17:52 +00:00
Commented Jun 20, 2014 at 6:17 — Yaje
– Yaje, Commented Jun 20, 2014 at 6:17
Sure. here is a fiddle: jsfiddle.net/cLHBS

Rashad
– Rashad

2014-06-20 06:37:31 +00:00
Commented Jun 20, 2014 at 6:37 — Rashad
– Rashad, Commented Jun 20, 2014 at 6:37

A J · Accepted Answer · 2014-06-20 06:49:58Z

1

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.

answered Jun 20, 2014 at 6:49

A J

2,14015 silver badges24 bronze badges

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

Comments

K K · Accepted Answer · 2014-06-20 06:47:35Z

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();

answered Jun 20, 2014 at 6:47

K K

18.2k4 gold badges33 silver badges39 bronze badges

Comments

Nicolae Olariu · Accepted Answer · 2014-06-20 07:10:31Z

1

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 @A J 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.

edited Jun 20, 2014 at 7:10

answered Jun 20, 2014 at 7:05

Nicolae Olariu

2,5652 gold badges20 silver badges31 bronze badges

1 Comment

Rashad Over a year ago

it was helpful too. Thank you for more explaining.

Collectives™ on Stack Overflow

Issue with JQuery UI tabs while clicking the button

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related