Jquery decided to give up the ghost :(

[youradds]

Hi,

I'm really really hoping someone can help me here.

Using AJAX, I wrote a little function that will call a .cgi script on our server, and populate 2 different select fields.

The JS code is:

 $(function(){
	 $("select#Continent").change(function(){
		 	alert("HERE");
		 $.getJSON("/cgi-bin/careers/ajax_cats.cgi",{id: $(this).val()}, function(j){

			 var options = '';
			 for (var i = 0; i <j.length; i++) {
				 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
			 }
			 $("#CityProvince").html(options);
			 $('#CityProvince option:first').attr('selected', 'selected');
		 })
	 })
 })


 $(function(){
	 $("select#CityProvince").change(function(){
		 $.getJSON("/cgi-bin/careers/ajax_cats_city.cgi",{id: $(this).val(), main_id: $('#Continent').val()  }, function(j){
		
			 var options = '';
			 for (var i = 0; i <j.length; i++) {
				 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
			 }
			 $("#SubCategory").html(options);
			 $('#SubCategory option:first').attr('selected', 'selected');
		 })
	 })
 })

...and the SELECT forms are as follows:

	<div class="row clear ">
	  <label for="Continent" class="name">Continent: </label>
	  <div class="value">
		  <%Plugins::ULTRAGlobals::Format_Select_Field($Continent,'Continent')%>
	      <select name="Continent" id="Continent">
	        <%loop select_loop%>
	          <option value="<%value%>" <%if selected%>selected="yes"<%endif%>><%name%></option>
	        <%endloop%>
	      </select>
	  </div>
	</div>
	
	   
	<div class="row clear ">
	  <label for="CityProvince" class="name">City/Province: </label>
	  <div class="value">
	      <select name="CityProvince" id="CityProvince">
	          <option value="">-- select continent first --</option>
	      </select>
	  </div>
	</div>
	
	
	   
	<div class="row clear ">
	  <label for="SubCategory" class="name">Sub-Category: </label>
	  <div class="value">
	      <select name="SubCategory" id="SubCategory">
	          <option value="">-- select city first --</option>
	      </select>
	  </div>
	</div>

Now, this was working perfectly for me this morning - and now its giving me a weird error :

Error: $("#Continent") is null
Source File:

http://www.domain.com/cgi-bin/careers/add.cgi

Line: 8

Now, I know #Continent exists - as I can see it fine in the HTML.

Anyone got any ideas? I'm at a real dead end with this

TIA

Andy

 

[youradds]

For anyone who wants to test -try:

http://www.sweetcareers.com/cgi-bin/careers/add.cgi

User: ultranerds
Pass: ultranerds

Any help uis greatly appreciated - I can't see for the life of me why its suddently stopped working in the last few hours - we havn't changed anything - and it was working absolutly perfectly before

TIA

Andy

 

[youradds]

Never mind - got it sorted now. Was a clash with another JS file. Not sure why it didn't have that issue first of all (as it all worked fine)... very odd indeed

 

[BillyRayPreachersSon]

Just curious - why in the footer of your site (under the 'Popular cities' section) do you list "London UK" but you don't list any other town name with its respective country?

Did you not think people would know where London was?

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[youradds]

LOL, its not my site - its a clients - so afraid I don't know why =)

Cheers

Andy