Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

SELECT box dissapearing, then reappearing :/

Status
Not open for further replies.
youradds

youradds

Programmer
Jun 27, 2001
817
GB
Hi,

Guess I spoke too soon about that AJAX stuff working =)

For some reason, the 4th box refuses to stay "hidden" when someone goes back on their selection.

The full code is:

Code: 
<html>

<head>
<script type="text/javascript" src="/static/jquery.js"></script>

<script type="text/javascript" charset="utf-8">
 jQuery.noConflict();
 jQuery(function(){
	 jQuery("select#article_is_in_1").change(function(){
		 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 1 }, function(j){
			 var options = '';
			 for (var i = 0; i <j.length; i++) {
				 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
			 }
			 jQuery("#article_is_in_2").html(options);
			 jQuery('#article_is_in_2 option:first').attr('selected', 'selected');

			 jQuery('#article_is_in_3').hide();
			 jQuery('#article_is_in_4').hide();
			 jQuery('#article_is_in_5').hide();
			 jQuery('#article_is_in_6').hide();
			 jQuery('#article_is_in_7').hide();
			 jQuery('#article_is_in_8').hide();
			 jQuery('#article_is_in_9').hide();
			 jQuery('#article_is_in_10').hide();
			 jQuery('#article_is_in_11').hide();
			 jQuery('#article_is_in_12').hide();
			 jQuery('#article_is_in_13').hide();
			 jQuery('#article_is_in_14').hide();
			 jQuery('#article_is_in_15').hide();

			 if (jQuery('#article_is_in_1').val() == -1) {
	    	       jQuery('#article_is_in_2').hide();
			 } else {
	    	       jQuery('#article_is_in_2').show();
			}

		 })
	 });

	 jQuery("select#article_is_in_2").change(function(){
		 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 2 }, function(j){
			 var options = '';
			 for (var i = 0; i <j.length; i++) {
				 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
			 }
			 jQuery('#article_is_in_3').show();
			 jQuery("#article_is_in_3").html(options);
			 jQuery('#article_is_in_3 option:first').attr('selected', 'selected');

			 jQuery('#article_is_in_4').hide();
			 jQuery('#article_is_in_5').hide();
			 jQuery('#article_is_in_6').hide();
			 jQuery('#article_is_in_7').hide();
			 jQuery('#article_is_in_8').hide();
			 jQuery('#article_is_in_9').hide();
			 jQuery('#article_is_in_10').hide();
			 jQuery('#article_is_in_11').hide();
			 jQuery('#article_is_in_12').hide();
			 jQuery('#article_is_in_13').hide();
			 jQuery('#article_is_in_14').hide();
			 jQuery('#article_is_in_15').hide();

				 if (jQuery('#article_is_in_2').val() < 1) {
                     jQuery('#article_is_in_3').hide();
				 } else {
	    	         jQuery('#article_is_in_3').show();
				 }

		 })
	 });

	 jQuery("select#article_is_in_3").change(function(){
		 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 3  }, function(j){
			 var options = '';
			 for (var i = 0; i <j.length; i++) {
				 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
			 }
			 jQuery('#article_is_in_4').show();
			 jQuery("#article_is_in_4").html(options);
			 jQuery('#article_is_in_4 option:first').attr('selected', 'selected');


			 jQuery('#article_is_in_5').hide();
			 jQuery('#article_is_in_6').hide();
			 jQuery('#article_is_in_7').hide();
			 jQuery('#article_is_in_8').hide();
			 jQuery('#article_is_in_9').hide();
			 jQuery('#article_is_in_10').hide();
			 jQuery('#article_is_in_11').hide();
			 jQuery('#article_is_in_12').hide();
			 jQuery('#article_is_in_13').hide();
			 jQuery('#article_is_in_14').hide();
			 jQuery('#article_is_in_15').hide();

		 })


					if (jQuery('#article_is_in_3').val() < 1 || jQuery('#article_is_in_3').val() == "") {

alert("should be hiding");
	                       jQuery('#article_is_in_4').hide();
alert("also here now should be hiding");
	                       jQuery('#article_is_in_4').hide();

					} else {
			    	       jQuery('#article_is_in_4').show();
					}

	 });

/*

	 jQuery("select#article_is_in_4").change(function(){
		 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 4  }, function(j){
			 var options = '';
			 for (var i = 0; i <j.length; i++) {
				 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
			 }
			 jQuery('#article_is_in_5').show();
			 jQuery("#article_is_in_5").html(options);
			 jQuery('#article_is_in_5 option:first').attr('selected', 'selected');


			 jQuery('#article_is_in_6').hide();
			 jQuery('#article_is_in_7').hide();
			 jQuery('#article_is_in_8').hide();
			 jQuery('#article_is_in_9').hide();
			 jQuery('#article_is_in_10').hide();
			 jQuery('#article_is_in_11').hide();
			 jQuery('#article_is_in_12').hide();
			 jQuery('#article_is_in_13').hide();
			 jQuery('#article_is_in_14').hide();
			 jQuery('#article_is_in_15').hide();

						 if (jQuery('#article_is_in_4').val() < 1) {
	                         jQuery('#article_is_in_5').hide();
						 } else {
			    	         jQuery('#article_is_in_5').show();
	 					 }

		 })
	 });



	 jQuery("select#article_is_in_5").change(function(){
		 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 5  }, function(j){
			 var options = '';
			 for (var i = 0; i <j.length; i++) {
				 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
			 }
			 jQuery('#article_is_in_6').show();
			 jQuery("#article_is_in_6").html(options);
			 jQuery('#article_is_in_6 option:first').attr('selected', 'selected');

			 jQuery('#article_is_in_7').hide();
			 jQuery('#article_is_in_8').hide();
			 jQuery('#article_is_in_9').hide();
			 jQuery('#article_is_in_10').hide();
			 jQuery('#article_is_in_11').hide();
			 jQuery('#article_is_in_12').hide();
			 jQuery('#article_is_in_13').hide();
			 jQuery('#article_is_in_14').hide();
			 jQuery('#article_is_in_15').hide();

						 if (jQuery('#article_is_in_5').val() < 1) {
	                         jQuery('#article_is_in_6').hide();
						 } else {
			    	         jQuery('#article_is_in_6').show();
						 }

		 })
	 });




	 jQuery("select#article_is_in_6").change(function(){
		 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 6  }, function(j){
			 var options = '';
			 for (var i = 0; i <j.length; i++) {
				 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
			 }
			 jQuery('#article_is_in_7').show();
			 jQuery("#article_is_in_7").html(options);
			 jQuery('#article_is_in_7 option:first').attr('selected', 'selected');

			 jQuery('#article_is_in_8').hide();
			 jQuery('#article_is_in_9').hide();
			 jQuery('#article_is_in_10').hide();
			 jQuery('#article_is_in_11').hide();
			 jQuery('#article_is_in_12').hide();
			 jQuery('#article_is_in_13').hide();
			 jQuery('#article_is_in_14').hide();
			 jQuery('#article_is_in_15').hide();

						 if (jQuery('#article_is_in_6').val() < 1) {
	                         jQuery('#article_is_in_7').hide();							
						 } else {
			    	         jQuery('#article_is_in_7').show();
	 				 	 }

		 })
	 });



	 jQuery("select#article_is_in_7").change(function(){
		 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 7  }, function(j){
			 var options = '';
			 for (var i = 0; i <j.length; i++) {
				 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
			 }
			 jQuery('#article_is_in_8').show();
			 jQuery("#article_is_in_8").html(options);
			 jQuery('#article_is_in_8 option:first').attr('selected', 'selected');

			 jQuery('#article_is_in_9').hide();
			 jQuery('#article_is_in_10').hide();
			 jQuery('#article_is_in_11').hide();
			 jQuery('#article_is_in_12').hide();
			 jQuery('#article_is_in_13').hide();
			 jQuery('#article_is_in_14').hide();
			 jQuery('#article_is_in_15').hide();

			 if (jQuery('#article_is_in_7').val() < 1) {
                        jQuery('#article_is_in_8').hide();							
			 } else {
		    	        jQuery('#article_is_in_8').show();
		 	 }

		 })
	 });

	 jQuery("select#article_is_in_8").change(function(){
		 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 8  }, function(j){
			 var options = '';
			 for (var i = 0; i <j.length; i++) {
				 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
			 }
			 jQuery('#article_is_in_9').show();
			 jQuery("#article_is_in_9").html(options);
			 jQuery('#article_is_in_9 option:first').attr('selected', 'selected');

			 jQuery('#article_is_in_10').hide();
			 jQuery('#article_is_in_11').hide();
			 jQuery('#article_is_in_12').hide();
			 jQuery('#article_is_in_13').hide();
			 jQuery('#article_is_in_14').hide();
			 jQuery('#article_is_in_15').hide();

			 if (jQuery('#article_is_in_8').val() < 1) {
                       jQuery('#article_is_in_9').hide();							
			 } else {
	    	           jQuery('#article_is_in_9').show();
		 	 }

		 })
	 });

         jQuery("select#article_is_in_9").change(function(){

                 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 9  }, function(j){
                         var options = '';
                         for (var i = 0; i <j.length; i++) {
                                 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                         }
                         jQuery('#article_is_in_10').show();
                         jQuery("#article_is_in_10").html(options);
                         jQuery('#article_is_in_10 option:first').attr('selected', 'selected');

                         jQuery('#article_is_in_11').hide();
                         jQuery('#article_is_in_12').hide();
                         jQuery('#article_is_in_13').hide();
                         jQuery('#article_is_in_14').hide();


						 if (jQuery('#article_is_in_9').val() < 1) {
	                         jQuery('#article_is_in_10').hide();							
						 } else {
	    		             jQuery('#article_is_in_10').show();
					 	 }

                 })
         });




         jQuery("select#article_is_in_10").change(function(){
		
				if (jQuery(this).val() > 1) {

	                 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 10  }, function(j){
	                         var options = '';
	                         for (var i = 0; i <j.length; i++) {
	                                 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
	                         }
	                         jQuery('#article_is_in_11').show();
	                         jQuery("#article_is_in_11").html(options);
	                         jQuery('#article_is_in_11 option:first').attr('selected', 'selected');
	
	                         jQuery('#article_is_in_12').hide();
	                         jQuery('#article_is_in_13').hide();
	                         jQuery('#article_is_in_14').hide();
	
						 if (jQuery('#article_is_in_10').val() < 1) {
	                         jQuery('#article_is_in_11').hide();							
						 } else {
	    			         jQuery('#article_is_in_11').show();
					 	 }

	                 })

				}

         });




         jQuery("select#article_is_in_11").change(function(){
                 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 11  }, function(j){
                         var options = '';
                         for (var i = 0; i <j.length; i++) {
                                 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                         }
                         jQuery('#article_is_in_12').show();
                         jQuery("#article_is_in_12").html(options);
                         jQuery('#article_is_in_12 option:first').attr('selected', 'selected');

                         jQuery('#article_is_in_13').hide();
                         jQuery('#article_is_in_14').hide();

						 if (jQuery('#article_is_in_11').val() < 1) {
	                         jQuery('#article_is_in_12').hide();							
						 } else {
	    		             jQuery('#article_is_in_12').show();
					 	 }
                 })
         });




         jQuery("select#article_is_in_12").change(function(){
                 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 12  }, function(j){
                         var options = '';
                         for (var i = 0; i <j.length; i++) {
                                 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                         }
                         jQuery('#article_is_in_13').show();
                         jQuery("#article_is_in_13").html(options);
                         jQuery('#article_is_in_13 option:first').attr('selected', 'selected');

                         jQuery('#article_is_in_14').hide();

						 if (jQuery('#article_is_in_12').val() < 1) {
	                         jQuery('#article_is_in_13').hide();							
						 } else {
	    	                 jQuery('#article_is_in_13').show();
					 	 }


                 })
         });




         jQuery("select#article_is_in_13").change(function(){
                 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 13  }, function(j){
                         var options = '';
                         for (var i = 0; i <j.length; i++) {
                                 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                         }
                         jQuery('#article_is_in_14').show();
                         jQuery("#article_is_in_14").html(options);
                         jQuery('#article_is_in_14 option:first').attr('selected', 'selected');

						 if (jQuery('#article_is_in_13').val() < 1) {
	                         jQuery('#article_is_in_14').hide();
						 } else {
	    		             jQuery('#article_is_in_14').show();
					 	 }


                 })
         });




         jQuery("select#article_is_in_14").change(function(){
                 jQuery.getJSON("/ajax_wiki_select.cgi",{id: jQuery(this).val(), field: 14  }, function(j){
                         var options = '';
                         for (var i = 0; i <j.length; i++) {
                                 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                         }
                         jQuery('#article_is_in_15').show();
                         jQuery("#article_is_in_15").html(options);
                         jQuery('#article_is_in_15 option:first').attr('selected', 'selected');

                         jQuery('#article_is_in_10').hide();
                         jQuery('#article_is_in_11').hide();
                         jQuery('#article_is_in_12').hide();
                         jQuery('#article_is_in_13').hide();
                         jQuery('#article_is_in_14').hide();


                 })
         });

*/

 })

</script>


</head>

<body>





<form name="search_form" action="test.cgi" method="POST">
 &nbsp;&nbsp;
<select name="article_is_in_1" id="article_is_in_1">
<option value="-1">- Your Province -</option>
<option value="9243">Uk</option>
</select>

<select id="article_is_in_2" name="article_is_in_2" style="display: none;">
	<option value="-1">- Select -</option>
</select>

<select id="article_is_in_3" name="article_is_in_3" style="display: none;">
	<option value="0">- Select -</option>
</select>

<select id="article_is_in_4" name="article_is_in_4" style="display: none;">
	<option value="-1">- Select -</option>
</select>

<select id="article_is_in_5" name="article_is_in_5" style="display: none;">
	<option value="-1">- Select -</option>
</select>

<select id="article_is_in_6" name="article_is_in_6" style="display: none;">
	<option value="-1">- Select -</option>
</select>

<select id="article_is_in_7" name="article_is_in_7" style="display: none;">
	<option value="-1">- Select -</option>
</select>

<select id="article_is_in_8" name="article_is_in_8" style="display: none;">
	<option value="-1">- Select -</option>
</select>

<select id="article_is_in_9" name="article_is_in_9" style="display: none;">
	<option value="-1">- Select -</option>
</select>

<select id="article_is_in_10" name="article_is_in_10" style="display: none;">
	<option value="-1">- Select -</option>
</select>

<select id="article_is_in_11" name="article_is_in_11" style="display: none;">
	<option value="-1">- Select -</option>
</select>

<select id="article_is_in_12" name="article_is_in_12" style="display: none;">
	<option value="-1">- Select -</option>
</select>

<select id="article_is_in_13" name="article_is_in_13" style="display: none;">
	<option value="-1">- Select -</option>
</select>

<select id="article_is_in_14" name="article_is_in_14" style="display: none;">
	<option value="-1">- Select -</option>
</select>


<!--<input name="button" id="button" value=" Go " style="margin-left: 10px;" type="submit">-->
</form>

</body>

Not really worth posting the contents of ajax_wiki_select.cgi, as it won't work on anyone else's site - it simply returns stuff like:

[ {optionValue: "", optionDisplay: '-- select --'}, {optionValue: "9247", optionDisplay: ' - Rudgwick'}]

(after database queries)

Its a REALLY weird issue :/ (and only seems to affect the following bit:

Code: 
	 jQuery("select#article_is_in_3").change(function(){

Below is the steps of the problem I'm having:

1) First, you select a value from the 3rd box. Then, you can see the value is put in fine into the 4th SELECT. Then, go back tot he 3rd box - and select the --select-- option. Screenshot: http://ultradev.com.nmsrv.com/1.jpg
2) Then, you will see a pop-up, as per this screenshot - http://ultradev.com.nmsrv.com/2.jpg - clicking ok, then works - and you can see it hides the div, before showing the next step.
3) Now, after you click the next alert() box (as per this image - http://ultradev.com.nmsrv.com/3.jpg ), it then shows the div again! .. you then end up finally with this; http://ultradev.com.nmsrv.com/4.jpg

(which it shouldn't be - as that last box should be hidden :/)

Any suggestions? I'm at a bit of a road-block with this one :(

TIA

Andy
 
Status
Not open for further replies.

Similar threads

malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
335
malpa
malpa
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
108
chikwendu
chikwendu
berkshirea
  • Locked
  • Question
Dropdown, Select, Required 1
Replies
8
Views
180
berkshirea
berkshirea
damipera
  • Locked
  • Question
Checkboxes - At Least 1 is Selected? 1
Replies
2
Views
102
damipera
damipera
Pudsters
  • Locked
  • Question
Populate text box based on other textbox 1
Replies
2
Views
132
Pudsters
Pudsters

Part and Inventory Search

Sponsor

Back
Top