Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    AJAX and JavaScript functions

    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
    Code:
    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.

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    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.

    Code:
    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.

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •