AJAX and JavaScript functions

[Space_monkey]

I'm sorry in advance if this isn't the clearest post. I'm still having trouble getting my head around what I think is the problem.

I have a Div being populated by some AJAX, the div used to be loaded without the ajax and it all worked fine. But I wanted to have the navigation bar of my site change the content of the div without page reloads like normal links. Because of the site, navigation will be used frequently and I wanted to keep it fast.

There is also a JavaScript function with some php in it that gets the contents of the div and sends it off to my database.

However when I started to use the ajax because only the div is reloaded when navigating and not the main page behind it, the PHP variables in the javascript function are no longer correct after the first change of div content.

So then I thought well If I put the javascript (and PHP) in the same file as the div then it will all ways stay up to date! but when I tried to call the JS function I got an error saying the function didn't exist.

I'm not sure but I presume this is because I populate the div using

document.getElementById(box_id).innerHTML = data;

which doesn't do javascript as well as HTML.

So now I'm really not sure what to do. I cant send the data to the main page using sessions or any other method I can think of because all the PHP is loaded at the server. I also cant POST it to a new page because I need to get the element by id. There is even a PHP foreach loop in there haha

Anyone have any good ideas? I have been pretty stuck for the past few days.

I can also post the code if it will help but I didn't think it was necessary, its more of a theory question.

[Spudhead]

I think we need to see what your AJAX functions are doing, and what these variables are that need to be updated each time the div is.

[Space_monkey]

Sure. I should probably also point out that "the div" is a series of nested divs. Which makes up the content part of note-taking project I'm working on.
The Ajax which loads the div content is.

function loadboxcontent(box_id,noteid)
{
	//check
	if (box_id == '') { return false; }
	
	var loading_image="pics/loader.gif"; //Full URL to "loading" image.
	var loading_text = '<p><img class="textmiddle" src="'+loading_image+'" /> Loading '+box_id.replace(/-/g," ")+'...</p>';
	var script_path = "";
	var box_container = document.getElementById(box_id);
	box_container.innerHTML = loading_text;

var result = false;
			
			$.ajax({
			url: script_path+box_id+".php",
			type: 'POST',
			async: true,
			data: {nav: 30,
				noteid: noteid,
			},
			success: function(data) {
				//alert(data);
				result = true;
				document.getElementById(box_id).innerHTML = data;
					collapser()
				}
				});
	//alert(result);
    if (result == false) { document.getElementById(box_id).innerHTML = '<p><img class="textmiddle" src="'+loading_image+'" /> Loading '+box_id.replace(/-/g," ")+'... If content doesnt load, try refreshing the page.</p>'; }
    else { //alert("Content refreshed successfully!");   
		}
}

Then the javascript function is to save the nested divs after editing.

function save()
{
	// Sets contents of id to variables
		var sendlevel1content = $('#sendlevel1content').html();
		var level1title = $('#level1title').html();
		var noteid = <?php echo $level1id; ?>;

	//Sends variables to appropriate PHP file.
     $.ajax({

                 url: 'savelevel1.php',
                 type: 'POST',
                 data:	{
			sendlevel1content: sendlevel1content,
			level1title: level1title,
			noteid: noteid,
			}
 });
<?php
		
// Sets contents of id to variables
if($numrows>0)
{
	foreach ($level2 as $i => $content_array)
	{	
 	echo"	
		var sendlevel2content = $('#sendlevel2content".$content_array['noteid']."').html();
		var sendlevel2title = $('#sendlevel2title".$content_array['noteid']."').html();
		var noteid = ".$content_array['noteid'].";

	//Sends variables to appropriate PHP file.
     $.ajax({
                 url: 'savelevel2.php',
                 type: 'POST',
                 data:	{
			sendlevel2content: sendlevel2content,
			sendlevel2title: sendlevel2title,
			noteid: noteid
			}
			});
	";
	}
}
?>
//alert('sent');
}

The way it all comes together is loadboxcontent() is called from the navigation pane with the id of the top note in the function. This is then used to make the right queries and display the 'top note' along with all child notes. during these queries $level1id is made along with $numrows and $level2. Each time a new 'note' is loaded these will change so the right notes are getting saved.

Thanks, I hope that helped and didn't just make it all more confusing.

[Spudhead]

Isn't it just a case of taking that noteid variable out of the save() function (and the JS that gets dropped in via php) and making it global? Then you don't need to pass it into your loadboxcontent() function, and you can update it from within that function as and when the ajax returns.

[Space_monkey]

Quite possibly but I am not all that experienced in this sort of thing, could you elaborate a little i didn't really get what you meant.