ajax / php - image refresh bug

Jahren · October 5, 2009

Hi guys,

I'm generating a pie chart on the fly using ajax/php

it works very well except for a racing condition bug.

I have an image which src changes everytime I want to reload the picture.

function updatePieImg(){
document.getElementById('pie_chart').src = "./lib/php/pie_generator/pie_draw.php?c=" + randomString();
}
function randomString() {
return new Date().valueOf();
}

I call the update with a select box event : onchange

I know my code works well because before calling the draw function, I populate the page with values from the database. Everytime I had an element to my pie chart, it generates a new map area. (makes my slices clickable with a custom event for them).

Now, the draw function. I know it works well too because if I select an other item in the select box, it will update correctly. The problem is for the first time you select an item, it wont show. (But the map area will)

I know it's confusing, if you need clarification, I'll try and answer my best. Too much code is involved to show everything.

RussellReal · October 5, 2009

okay? whats the problem?

Jahren · October 5, 2009

I knew I explained this all wrong lol

For some reason, when I change the source of the image, it wont show up the first time.

the src is a php script that generates an image on the fly.

It uses values from the session to draw a pie chart.

The problem is that when it's called the first time, the session has not been written yet.

Basically, I do this:


<select id='annee' name='annee' onchange='xajax_updateFormValeurs(this.value);  toggleMain(this);'><option value='-1'>Choose one</option><option value='2009'>2009-2010</option><option value='2010'>2010-2011</option><option value='2011'>2011-2012</option><option value='2012'>2012-2013</option><option value='2013'>2013-2014</option></select>

updateFormValeurs fetch data from the DB and assign the html controls with them. I also fire the onchange() event of an other control which formats the date values and change the image src (which triggers the image draw)

For some reason, the first time we select a year from the select box, the SESSION variable hasn't been written yet. I'm not sure where I fail to synchronize

Could it be that I can't be sure which xajax assignments will be called first?

(since I assign values to html controls and script an onchange event firing)

edit:

here's the php/ajax

		$xAjax_objResponse->assign("id_plan", "value", $arrData['id_plan']);
		$xAjax_objResponse->assign("date1", "value", $arrData['date_debut']);
		$xAjax_objResponse->assign("date2", "value", $arrData['date_fin']);
		$xAjax_objResponse->assign("nbJoursFeries", "value", $arrData['nb_jours_feries']);
		$xAjax_objResponse->assign("nbJoursConges", "value", $arrData['nb_jours_conges']);
		$xAjax_objResponse->assign("nbJoursTravail", "value", $arrData['nb_jours_travail']);
		$xAjax_objResponse->assign("commentaires", "value", $arrData['commentaire']);
		$xAjax_objResponse->assign("btnSubmit", "innerHTML", "Modifier le plan d&#39;action");

		$JoursEntre = $arrData['nb_jours_travail'] + $arrData['nb_jours_conges'] + $arrData['nb_jours_feries'];
		$xAjax_objResponse->assign("nbJoursEntre", "value", $JoursEntre);
		//on part le script du graphique
		$xAjax_objResponse->script("document.getElementById('date1').onchange();");

RussellReal · October 5, 2009

not sure why since I can't see your code, however, just run that query for your onload

you could do it two ways

function yourFunction() {

// get the data necessary to send to your php file

}

window.onload = yourFunction;

or..

Jahren · October 5, 2009

Because the data changes from year to year.

so when you select a year, it fetches the data from that specific year with xajax.

What I believe is happening is that $xAjax_objResponse->script("document.getElementById('date1').onchange();"); happens before the data is set on the page even tho I set it up in order. Would that make any sense? and how should I change my approach?

I could post some code but you'll always need more

edit :

In order:

I select a year which fires xajax_updateFormValeurs(this.value);

updateFormValeurs returns value assigments to html controls and should call an other event:

xajax_updateFormDates(xajax.getFormValues('form_plan_action'));

This format dates value and call $xAjax_objResponse->script('document.getElementById("nbJoursFeries").onchange();');

nbJoursFeries calls

updateForm();

some calculation and stuff

AND

xajax_updateGraphique(xajax.getFormValues("form_plan_action"));

here's the code

function updateGraphique($formData){
$xAjax_objResponse = initXajaxObject();
$joursRecit = $formData['nbJoursTravail'];
$joursAutre = $formData['nbJoursEntre'] - $joursRecit;
$joursTotal = $joursRecit + $joursAutre;

if($joursTotal > 0){
	$pourcentageRecit = round($joursRecit * 100 / $joursTotal);
	$pourcentageAutre = round($joursAutre * 100 / $joursTotal);

	//on parametrise le graphique
	$pie = new pie_chart();
	$pie->set_sizeX(200);
	$pie->set_sizeY(200);
	$pie->set_couleur_fond('FFFFFF'); //28211a
	$pie->add_element($pourcentageRecit, '467287', 'recit', '000', 'RECIT');
	$pie->add_element($pourcentageAutre, '28211A', 'autre', 'FFF', 'AUTRE');
	$_SESSION['pie'] = $pie;

	//on grandit l'objet
	$xAjax_objResponse->assign("pie_chart", "style.width", "200px");
	$xAjax_objResponse->assign("pie_chart", "style.height", "200px");

	//je vais chercher la map clickable ensuite
	$xAjax_objResponse->assign("piemap", "innerHTML", $pie->getMapAreaInnerHTML());
}
else{
	unset($_SESSION['pie']);
	//on rétrécit l'objet
	$xAjax_objResponse->assign("pie_chart", "style.width", "50px");
	$xAjax_objResponse->assign("pie_chart", "style.height", "50px");			
}

return $xAjax_objResponse;
}

RussellReal · October 5, 2009

as my last post suggests you should do something like this:

<script type="text/javascript">
function handle() {
	xajax_updateFormValeurs((e = document.getElementById("myS")).value);
	toggleMain(e);
}
window.onload = handle;
</script>
<select id="myS"><option>HI!</option><option>HI!2</option><option>HI!3</option></select>

Jahren · October 5, 2009

I edited my post above with more content.

as for your solution, does it work only on page load?

because I need to be able to switch year (hence, data and image) without page reload

RussellReal · October 5, 2009

I edited my post above with more content.

as for your solution, does it work only on page load?

because I need to be able to switch year (hence, data and image) without page reload

handle will only trigger onload, then everytime you change your selectbox the same methods will re-trigger, the onload is just to use your 'ajax' functions on page load.

Jahren · October 5, 2009

same problem. :S thats weird.

if you know xajax, can you tell me if I can be sure that the assigned and scripted stuff will be executed in the order in coded them ?

RussellReal · October 5, 2009

what? and no I never used xajax lol

Sign In

ajax / php - image refresh bug

Recommended Posts

Jahren

Link to comment

Share on other sites

RussellReal

Link to comment

Share on other sites

Jahren

Link to comment

Share on other sites

RussellReal

Link to comment

Share on other sites

Jahren

Link to comment

Share on other sites

RussellReal

Link to comment

Share on other sites

Jahren

Link to comment

Share on other sites

RussellReal

Link to comment

Share on other sites

Jahren

Link to comment

Share on other sites

RussellReal

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information