Force a refresh on a select box

jws2bay
jws2bay used Ask the Experts™
on
I'm populating a form from stored mysql table values.  I have a dynamic dependent select box (A_Sup) which I am trying to configure on page load.  I am successfully populating the select list, and I am using the function below to make the selection of the options.  I put an alert in the loop so I step through the loop and see that the function is executing correctly.  With the alert in the loop the select box displays the selected option correctly. Looks like everything is going to work, but if I remove the alert, the result is not displayed in the select box.  It looks like I need to refresh the box.   How do I force a refresh of (A_Sup) selectbox?

form1.Depth.value="<?php echo $row_Quote['Depth']; ?>";
      $("#Depth").trigger("change");
      
      setSelectedIndex_val(document.getElementById("A_Sup"),"<?php echo $row_Quote['A_Sup']; ?>");
$('#A_Sup').selectmenu('refresh');


**********************

function setSelectedIndex_val(s, valsearch){
    for (i = 0; i< s.options.length; i++){

//      alert("option="+s.options.value+"  Stored value= "+valsearch);
        ii=i;
      if (s.options[ii].value == valsearch){
            s.options[ii].selected = true;
            break;
            }
    }
return;
}

***************

This doesn't seem to work.

$('#A_Sup').selectmenu('refresh');
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2014
Top Expert 2014

Commented:
Code doesn't really make sense.
What is it you are wanting - to make certain options selected? Would make more sense to be doing this at the server.
What is $row_Quote['A_Sup']? What is it's value?

Author

Commented:
I have a form which has dynamic dependent select boxes.  The basic page works fine.  The dependent select box options are populated using ajax.    What I'm trying to do is populate the page from previously saved data.   I am having a problem with dependent select box.

1)  I have loaded the parent select box from my stored data.
2) I have fired the ajax with a      $("#Depth").trigger("change");  to populate the child options.
 3) I step through the the child options to find the one that matched the stored data, and set it selected.

The select box doesn't display the selected option.  It seems like I need to do a select box refresh to make the box display correctly.
Expert of the Year 2014
Top Expert 2014

Commented:
matched the stored data
Where is this coming from
How is the data returned in the ajax call - post a sample.
OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

Author

Commented:
// 1) I have loaded the parent select box from my stored data.

form1.Depth.value="<?php echo $row_Quote['Depth']; ?>";

// 2) I have fired the ajax

      $("#Depth").trigger("change");

// 3) This calls the function     setSelectedIndex_val (selectbox, stored_value );
       
     setSelectedIndex_val(document.getElementById("A_Sup"),"<?php echo $row_Quote['A_Sup']; ?>");

// This is a refresh attempt.  
 
$('#A_Sup').selectmenu('refresh');

I get an error message from Firefox (TypeError: $(...).selectmenu is not a function)
Expert of the Year 2014
Top Expert 2014

Commented:
This is not ajax
 $("#Depth").trigger("change");

What is the value of $row_Quote['A_Sup']

Author

Commented:
This is the ajax script:

</script>
<script type="text/javascript">// Dynamic Support Select based on Depth
           $(document).ready(function(){
                     $("#Depth").change(function(){
                     var depth=$("#Depth").val();
                     $.ajax({
                        type:"post",
                        url:"support_get.php",
                        data:"depth="+depth,
                        success:function(data){
                              $("#A_Sup").html(data);
                                            $("#B_Sup").html(data);
                        }      
                     });
            
               });
           });
            
      </script>


The script works fine.  I am firing it with the trigger("change") statement.    I have confirmed that it is doing its job and correctly populating the the options of the select box.  I have also confirmed that the  setSelectedIndex_val() function is setting the correct option of the select box as selected.  I just can't make it show.
Expert of the Year 2014
Top Expert 2014

Commented:
Can you attach the html of the whole page, because fragments of code do not help.

Author

Commented:
If you could stretch out the width of this post it would be easier to read.  It would also be easier if simplified names.


 setSelectedIndex_val(document.getElementById("A_Sup"),"<?php echo $row_Quote['A_Sup']; ?>");


// This is the tail of the previous line.
$row_Quote['A_Sup']; ?>");  

//  The function call  is  setSelectedIndex_val(name,value)

name = document.getElementById("A_Sup")

value = "<?php echo $row_Quote['A_Sup']; ?>"  // This is my stored data
Expert of the Year 2014
Top Expert 2014

Commented:
I need to see the html of the select box and know what the value of $row_Quote['A_Sup'] is - I've asked for this 3 times now.

Author

Commented:
$row_Quote['A_Sup']; ?>");

Again; this is part of the php call from the line above it.

<?php echo $row_Quote['A_Sup']; ?>
Expert of the Year 2014
Top Expert 2014

Commented:
function setSelectedIndex_val(s, valsearch){
$("#A_Sup").val(valsearch);
}

Open in new window

Author

Commented:
My page is to complicated to post, I'll build a test case and post in the morning.

Author

Commented:
I have built a test case to make it easier to understand.  The test page can be reached at:

99.65.72.66/support_test.php

In this page you have a dependent  select box.  They are accessing a mysql table to populate the option list.  Change the selection in the first select box and it changes the options of the second select box.

I need to preset the selection of both boxes on pageload.  In the test case I do this in the function init() on pageload.

I am able to setup the 1st select box, and I can setup the options of the dependent select box, but I am having problems selecting an option and displaying the selection of the 2nd select box.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

	  	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
   <script type="text/javascript">


   function init(){
	 depth.value="12";
	$("#depth").trigger("change");  

        $("#Sup_lft").val("Open")
        $("#Sup_lft").trigger("refresh")
   }
   
   
      </script>
      	<script type="text/javascript">
           $(document).ready(function(){
 
               
               $("#depth").change(function(){
                     var depth=$("#depth").val();
                     $.ajax({
                        type:"post",
                        url:"support_get.php",
                        data:"depth="+depth,
                        success:function(data){
                              $("#Sup_lft").html(data);
                        }	
                     });
		
               });
           });
      </script>


</head>

<body onLoad="init()">

Depth :
        <select name="depth" id="depth">    
        <?php
        include "support_db.php";
		
        $result=mysql_query("SELECT Category,Series,Glass_Support,Finish,Key_2 FROM Form_Content WHERE Category='Depth' and Series='CRY140-2'");
		 while($depth=mysql_fetch_array($result)){
        	echo "<option value=$depth[Key_2]>$depth[Finish]</option>";
        } ?>
        </select>
        Support :
        <select name="Sup_lft" id="Sup_lft">
            <option>-select Support-</option>
        </select>
        
        
</body>
</html>

Open in new window

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
To set a select it would be  

$("#Sup_lft").val("e  15  440.30  495.30  140_18_12_Extended");

changing out the, "e  15  440.30  495.30  140_18_12_Extended" for the vairable
Expert of the Year 2014
Top Expert 2014

Commented:
This is your response in the ajax request, which is slightly wrong (but not the end of the world)

Connected to MySQL<br>
Connected to gdsquirrelcart
<option value='n 0.0  0.00  Select Support Style'>Select Support Style</option><option value='d  12  395.01  455.01  140_18_12_Deep'>Deep  ............ (18") NSF</option><option value='e  15  440.30  495.30  140_18_18_Extended'>Extended   .....(22") NSF</option>

Open in new window



I don't see setSelectedIndex_val anywhere

Author

Commented:
Scott,

$("#Sup_lft").val("e  15  440.30  495.30  140_18_12_Extended");

doesn't seem to work.    The value "e  15  440.30  495.30  140_18_12_Extended"  is the value of the "Extended" option of the select box.  If it has tagging the 'Extended" option as selected then how do I get the display value to show "Extended"?

As you can see I tried

$("#Sup_lft").val("Open");

and this doesn't work.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Please review this simple sample http://jsbin.com/ruluj/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <script>

$(function() {
  $('#test').val("2")
});
    </script>
  <title>JS Bin</title>
</head>
<body>
<select id="test">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <select>
</body>
</html>

Open in new window


As far as I can tell you don't have a value "Open" the values are long strings. Why do you have the 2 lines not in an option?  Your "Open" is really, "b 6.0  314.74  364.74  140_18_12_Open"

<select name="Sup_lft" id="Sup_lft">

Connected to MySQL
Connected to gdsquirrelcart
<option value="n 0.0  0.00  Select Support Style">Select Support Style</option><option value="b 6.0  314.74  364.74  140_18_12_Open">Open </option><option value="s 5.0  414.78  454.78  140_18_12_Sculptured">Sculptured </option><option value="c  11  262.20  312.20  140_18_12_Closed">Closed .......... (12")</option><option value="d  12  395.01  455.01  140_18_12_Deep">Deep  ........... (18") NSF</option><option value="e  15  440.30  495.30  140_18_12_Extended">Extended ......(22") NSF</option>
</select>

Open in new window

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
$("#Sup_lft").val("Open");

Should probably be

$("#Sup_lft").val("b 6.0  314.74  364.74  140_18_12_Open");
Expert of the Year 2014
Top Expert 2014

Commented:
    $('#Sup_lft option').each(function() {
        if($(this).text() == "Open ") {
            $(this).attr("selected","selected")
        }
    });

Open in new window


Notice the value is "Open " with a space at the end (I suppose you could trim it)

Author

Commented:
Cathal,

Try this link.

99.65.72.66/support_test2.php

I put in my function   setSelectedIndex_val  , which sort through the options looking for a match.

I have an alert set to show it stepping through.  It find a match and exits.

The select box displays the correct value..... Now take out the alert, and it doesn't work???
Expert of the Year 2014
Top Expert 2014

Commented:
Did you try the example above?
Now you are using the option value and not the displayed value.
You cannot set a dropdown on the displayed value (unless there is no option value). That's why I wrote the above.
So again I am asking what is the value of $row_Quote['A_Sup'] - without knowing it we are just wasting our time guessing at a solution.

This code works fine without the alerts.
setSelectedIndex_val(document.getElementById("Sup_lft"),"b 6.0  314.74  364.74  140_18_12_Open");

 function setSelectedIndex_val(s, valsearch){
    for (i = 0; i< s.options.length; i++){
	ii=i;
	if (s.options[ii].value == valsearch){
		s.options[ii].selected = true;
		break;
		}
}
return;
}

Open in new window


But all that code is a waste, I posted yesterday a simple jquery solution that replaced the above code.
$("#Sup_lft").val("b 6.0  314.74  364.74  140_18_12_Open")
One line and you're done. (asumming b 6.0  314.74  364.74  140_18_12_Open is the real value)

Author

Commented:
Scott;  I made the change in the code.  See the example.

99.65.72.66/support_test.php

It seems like there is a flicker in the select box display but that's all.  Still does not display "Open".

I have been using FireFox, so I thought I would try ie.  The dependent select doesn't populate in Explorer.

Author

Commented:
Cathal,

So again I am asking what is the value of $row_Quote['A_Sup'] - without knowing it we are just wasting our time guessing at a solution.

Again; this is part of the php call.

<?php echo $row_Quote['A_Sup']; ?>   This is the value that I want to preset the select box to on page load.  The value would be something like
"b 6.0  314.74  364.74  140_18_12_Open".

You pointed out an issue on the ajax, which I didn't understand.  Could you explain in more detail.

It doesn't look like the dependent  select box populates in Explorer.
Expert of the Year 2014
Top Expert 2014
Commented:
#a39908131

Problem is you cannot set that at page load as the ajax call may not be finished yet, you have to put it in the success callback of the ajax call,
Expert of the Year 2014
Top Expert 2014

Commented:
The alerts delay the function setting the option value ergo the ajax has finished.  Not the case when it runs immediately without delay.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Points to Cathel...

http://jsbin.com/kuven/1/edit

$(document).ready(function () {


    $.ajax({
        url: "http://jsbin.com/kavos/1.js",
        type: "get",
        cache: false,
        dataType: "html"
    })
        .done(function (data) {
             $( "#Sup_lft" ).html( data );
           $("#Sup_lft").val("b 6.0  314.74  364.74  140_18_12_Open");

        });

});

Open in new window

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
Depth :
        <select name="depth" id="depth">    
        

Connected to MySQL<br>
Connected to gdsquirrelcart
<option value=0>Select Depth</option>
<option value=12>12 -  inches</option>
<option value=18>18 -  inches</option>
<option value=22>22  - inches</option>
</select>
 Support :
<select name="Sup_lft" id="Sup_lft">
<option>-select Support-</option>
</select>
        

</body>
</html>

Open in new window

Expert of the Year 2014
Top Expert 2014

Commented:
But then you will still have a problem when the first dropdown is changed as that value is for a different second dropdown
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
You still need a change function.  That is just showing the initial.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial