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

Question

Virangya 0 Junior Poster

15 Years Ago

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;
    }
}

javascript:jquery

3 Contributors
6 Replies
201 Views
1 Week Discussion Span
Latest Post 15 Years Ago Latest Post by Airshow

Dani AI

Generated 7 Months Ago

Short checklist and quick fixes for (and notes for / )

Most likely reasons you always see "Call Us":

A placeholder-reset is running after your price set (your progress/hide logic writes "Call Us" for every slot).
The incoming fare value is "NA" but with extra whitespace/case differences, so the strict check misses it.
The element you target doesn't exist or you have duplicate IDs, so the update silently goes nowhere.
Implicit global loop variables are clobbering values (no var/let used).

Fast debugging (do these first)

Log what you actually get and whether the element exists:

console.log('target:', '#carpricediv' + vnum, 'exists:', $('#carpricediv' + vnum).length, 'fare:', carefare);

Normalize the fare and set text rather than injecting block markup into a span (putting a <p> inside a <span> can behave oddly). Example pattern:

const cf = String(carefare).trim();
if (cf.toUpperCase() === 'NA') {
  $('#carpricediv' + vnum).text('Call Us');
} else {
  $('#carpricediv' + vnum).text('£' + cf);
  $('#journy_fare' + vnum).val(cf);
}

Other practical fixes

Declare loop counters with let or var (avoid implicit globals like for(vehicle_number = ...)).
Move or remove any code that writes "Call Us" after you display fares (hide_progress / show_progress lines that overwrite the same spans). If that placeholder is needed, only set it before the AJAX and do not reapply it after you process results.
Check the JSON types: status may be boolean or string — use a tolerant check or normalize it server-side.
Follow ’s caching suggestion: grab the master input once (const $from = $('#from_type_id');) and reuse it when copying to the per-vehicle fields to improve clarity and performance.

If those checks still don't reveal the issue, post the exact logged JSON and the live DOM for one failing vnumber and it will be straightforward to spot the overwrite or selector mismatch.

All 6 Replies

Member #905211

15 Years Ago

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

Member #905211

15 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Virangya 0 Junior Poster · Answer 1 · 2011-08-11T17:49:11+00:00

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>

Virangya 0 Junior Poster · Answer 2 · 2011-08-19T15:08:34+00:00

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

Airshow 425 WiFi Lounge Lizard Team Colleague · Answer 3 · 2011-08-19T16:25:56+00:00

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 425 WiFi Lounge Lizard Team Colleague · Answer 4 · 2011-08-19T16:29:46+00:00

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

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

Dani AI

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers