Solved

Force a refresh on a select box

Posted on 2014-03-05
28
1,136 Views
Last Modified: 2014-03-06
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
Comment
Question by:jws2bay
  • 12
  • 11
  • 5
28 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39907909
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
 

Author Comment

by:jws2bay
ID: 39908000
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
 
LVL 58

Expert Comment

by:Gary
ID: 39908008
matched the stored data
Where is this coming from
How is the data returned in the ajax call - post a sample.
0
 

Author Comment

by:jws2bay
ID: 39908025
// 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
 
LVL 58

Expert Comment

by:Gary
ID: 39908041
This is not ajax
 $("#Depth").trigger("change");

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

Author Comment

by:jws2bay
ID: 39908042
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
 
LVL 58

Expert Comment

by:Gary
ID: 39908047
Can you attach the html of the whole page, because fragments of code do not help.
0
 

Author Comment

by:jws2bay
ID: 39908064
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
 
LVL 58

Expert Comment

by:Gary
ID: 39908074
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
 

Author Comment

by:jws2bay
ID: 39908104
$row_Quote['A_Sup']; ?>");

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

<?php echo $row_Quote['A_Sup']; ?>
0
 
LVL 58

Expert Comment

by:Gary
ID: 39908131
function setSelectedIndex_val(s, valsearch){
$("#A_Sup").val(valsearch);
}

Open in new window

0
 

Author Comment

by:jws2bay
ID: 39908224
My page is to complicated to post, I'll build a test case and post in the morning.
0
 

Author Comment

by:jws2bay
ID: 39909728
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39909895
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 58

Expert Comment

by:Gary
ID: 39909931
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
 

Author Comment

by:jws2bay
ID: 39910115
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39910193
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39910201
$("#Sup_lft").val("Open");

Should probably be

$("#Sup_lft").val("b 6.0  314.74  364.74  140_18_12_Open");
0
 
LVL 58

Expert Comment

by:Gary
ID: 39910202
    $('#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
 

Author Comment

by:jws2bay
ID: 39910244
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
 
LVL 58

Expert Comment

by:Gary
ID: 39910262
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
 

Author Comment

by:jws2bay
ID: 39910381
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
 

Author Comment

by:jws2bay
ID: 39910490
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39910512
#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
 
LVL 58

Expert Comment

by:Gary
ID: 39910526
The alerts delay the function setting the option value ergo the ajax has finished.  Not the case when it runs immediately without delay.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39910543
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
 
LVL 58

Expert Comment

by:Gary
ID: 39910557
But then you will still have a problem when the first dropdown is changed as that value is for a different second dropdown
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39910571
You still need a change function.  That is just showing the initial.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now