Why are the values not displaying inside the div's?

[Virangya]

Hey this is my code.. I'm trying to display whats in "carefare" variable inside a div. But it's not working I have no idea. All names of the div's are correct. and when i use alerts(commented) correct values are displaying but it's not getting printed inside my divs. Always the value "callus" is coming. Please try to give me an idea. i'm stuck here, and it's urgent. i'm really new to jquery...

function showpriceincarbox(carefare,vnumber){
    //alert("#carpricediv"+vnumber);
    //alert(carefare);
    if(carefare=="NA"){
    $("#carpricediv"+vnumber).html("<p class=''>Call Us</p>");
    }else{
    $("#carpricediv"+vnumber).html("<p class=''>\u00A3"+carefare+"</p>");
    document.getElementById('journy_fare'+vnumber).value = carefare;
    }
}

[stbuchok]

Can I see the HTML for the Divs? Also if the page isn't too big can you show all the code?

[Virangya]

Can I see the HTML for the Divs? Also if the page isn't too big can you show all the code?

Actually it's long... but anyway here it is..

function new_calculate_fare_for_one_location(loc1,loc2){//vs
		google_miles =0;
		//alert('hiiii');
		show_progress();
		$.getJSON("../controller/calculate_fare_controller_newpriceengine_apt.php",{ onelocationid:"true", to_loc_id:""+$(loc2).val(), from_loc_id:""+$(loc1).val(), vehicle_type:"all", journy_type:"1"}, function(json){
			hide_progress();	
         for(vehicle_number =1;vehicle_number<=no_of_vehicles;vehicle_number++){
			
				if(json['status'+vehicle_number] =='true'){
					if(($("#from_type_id").val()==1)&&(json['fare'+vehicle_number]<20)){
						json['fare'+vehicle_number] = 20;
					}
					if($("#from_type_id").val()==1){
						//alert('form type  =1'+vehicle_number);
						json['fare'+vehicle_number] = json['fare'+vehicle_number]+5;
					}
					showpriceincarbox(json['fare'+vehicle_number],vehicle_number);

}
//more code (not relevant for my question)
});	
		
}

function show_progress(){
					$("#standerd_rate_error").html("<p class='error'>Calculating fare please wait......</p>");
					$("#standerd_rate_error").show();
					
	for(aa=1;aa<=no_of_vehicles;aa++){
	$("#carpricediv"+aa).html("<p class=''>Call Us</p>");
	}
	//-reest values --//
	for(aa=1;aa<=no_of_vehicles;aa++){
	document.getElementById('from_type_id'+aa).value = "";
	document.getElementById('from_loc_id'+aa).value = "";
	document.getElementById('txt_from_address'+aa).value = "";
	document.getElementById('from_postcode'+aa).value = "";
	document.getElementById('to_type_id'+aa).value = "";
	document.getElementById('to_loc_id'+aa).value = "";
	document.getElementById('txt_to_address'+aa).value = "";
	document.getElementById('to_postcode'+aa).value = "";
	document.getElementById('journy_fare'+aa).value = "";
	}	
}
function hide_progress(){
					$("#standerd_rate_error").html("");
					$("#standerd_rate_error").hide();
	$("#pricecarsdiv").css({"display": "block"});
	$("#divmaincontent").css({"display": "none"});
	$("#welcomebox").css({"display": "none"});
	$("#divmaincontent2").css({"display": "none"});
	$("#carpricediv"+1).html("<p class=''>Call Us</p>");
	$("#carpricediv"+2).html("<p class=''>Call Us</p>");
	$("#carpricediv"+3).html("<p class=''>Call Us</p>");
	for(aa=1;aa<=no_of_vehicles;aa++){
	document.getElementById('from_type_id'+aa).value = document.getElementById('from_type_id').value;
	document.getElementById('from_loc_id'+aa).value = document.getElementById('from_loc_id').value;
	document.getElementById('txt_from_address'+aa).value = document.getElementById('txt_from_address').value;
	document.getElementById('from_postcode'+aa).value = document.getElementById('from_postcode').value;
	document.getElementById('to_type_id'+aa).value = document.getElementById('to_type_id').value;
	document.getElementById('to_loc_id'+aa).value = document.getElementById('to_loc_id').value;
	document.getElementById('txt_to_address'+aa).value = document.getElementById('txt_to_address').value;
	document.getElementById('to_postcode'+aa).value = document.getElementById('to_postcode').value;
	}	
	
}

html is like this (oops sorry... not div's its spans)

<span class="showpricespan" id="carpricediv1"></span>
<span class="showpricespan" id="carpricediv2"></span>
<span class="showpricespan" id="carpricediv3"></span>
<span class="showpricespan" id="carpricediv4"></span>
<span class="showpricespan" id="carpricediv5"></span>
<span class="showpricespan" id="carpricediv6"></span>

[stbuchok]

In your AJAX call, what is being returned for json?

[Virangya]

fare = a database value.
vehicle number = any value between 1-6

[Airshow]

Virangya,

Use of the verbose document.getElementBytId() can be avoided when jQuery is available.

For example, this ...

for(aa=1;aa<=no_of_vehicles;aa++){
	document.getElementById('from_type_id'+aa).value = document.getElementById('from_type_id').value;
	document.getElementById('from_loc_id'+aa).value = document.getElementById('from_loc_id').value;
	document.getElementById('txt_from_address'+aa).value = document.getElementById('txt_from_address').value;
	document.getElementById('from_postcode'+aa).value = document.getElementById('from_postcode').value;
	document.getElementById('to_type_id'+aa).value = document.getElementById('to_type_id').value;
	document.getElementById('to_loc_id'+aa).value = document.getElementById('to_loc_id').value;
	document.getElementById('txt_to_address'+aa).value = document.getElementById('txt_to_address').value;
	document.getElementById('to_postcode'+aa).value = document.getElementById('to_postcode').value;
}

will reduce to ...

for(aa=1; aa<=no_of_vehicles; aa++){
	$('#from_type_id'+aa).val()     = $('#from_type_id').val();
	$('#from_loc_id'+aa).val()      = $('#from_loc_id').val();
	$('#txt_from_address'+aa).val() = $('#txt_from_address').val();
	$('#from_postcode'+aa).val()    = $('#from_postcode').val();
	$('#to_type_id'+aa).val()       = $('#to_type_id').val();
	$('#to_loc_id'+aa).val()        = $('#to_loc_id').val();
	$('#txt_to_address'+aa).val()   = $('#txt_to_address').val();
	$('#to_postcode'+aa).val()      = $('#to_postcode').val();
}

For better efficiency, make each jQuery object just once, eg. in a $(function(){...}) closure, then use as many times as necessary (still within the closure). This will be faster and less load on client processors, especially with a large DOM.

Airshow

[Airshow]

Another thing:

...
  $("#standerd_rate_error").html("<p class='error'>Calculating fare please wait......</p>");
  $("#standerd_rate_error").show();
  ...

  ...
  $("#standerd_rate_error").html("");
  $("#standerd_rate_error").hide();
  ...

It is more efficient to hard-code all progress and error messages in HTML, initially hide them, show when appropriate, hide again when not appropriate.

Airshow