[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1505
  • Last Modified:

Force a refresh on a select box

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');
0
jws2bay
Asked:
jws2bay
  • 12
  • 11
  • 5
1 Solution
 
GaryCommented:
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?
0
 
jws2bayAuthor 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.
0
 
GaryCommented:
matched the stored data
Where is this coming from
How is the data returned in the ajax call - post a sample.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
jws2bayAuthor 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)
0
 
GaryCommented:
This is not ajax
 $("#Depth").trigger("change");

What is the value of $row_Quote['A_Sup']
0
 
jws2bayAuthor 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.
0
 
GaryCommented:
Can you attach the html of the whole page, because fragments of code do not help.
0
 
jws2bayAuthor 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
0
 
GaryCommented:
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.
0
 
jws2bayAuthor Commented:
$row_Quote['A_Sup']; ?>");

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

<?php echo $row_Quote['A_Sup']; ?>
0
 
GaryCommented:
function setSelectedIndex_val(s, valsearch){
$("#A_Sup").val(valsearch);
}

Open in new window

0
 
jws2bayAuthor Commented:
My page is to complicated to post, I'll build a test case and post in the morning.
0
 
jws2bayAuthor 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

0
 
Scott Fell, EE MVEDeveloperCommented:
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
0
 
GaryCommented:
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
0
 
jws2bayAuthor 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.
0
 
Scott Fell, EE MVEDeveloperCommented:
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

0
 
Scott Fell, EE MVEDeveloperCommented:
$("#Sup_lft").val("Open");

Should probably be

$("#Sup_lft").val("b 6.0  314.74  364.74  140_18_12_Open");
0
 
GaryCommented:
    $('#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)
0
 
jws2bayAuthor 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???
0
 
GaryCommented:
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)
0
 
jws2bayAuthor 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.
0
 
jws2bayAuthor 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.
0
 
GaryCommented:
#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,
0
 
GaryCommented:
The alerts delay the function setting the option value ergo the ajax has finished.  Not the case when it runs immediately without delay.
0
 
Scott Fell, EE MVEDeveloperCommented:
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

0
 
GaryCommented:
But then you will still have a problem when the first dropdown is changed as that value is for a different second dropdown
0
 
Scott Fell, EE MVEDeveloperCommented:
You still need a change function.  That is just showing the initial.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 12
  • 11
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now