thowe26 Posted June 13, 2015 Share Posted June 13, 2015 Hello Complete newbie but learning! I have a php file presenting my menu eg <li><a href="printers3.php" class="ajaxLink" name="Printer area" title="Printers3">Printers3</a></li> and I am trying to include the output from printers3.php (the final line is echo $table; ) later on in the code within <div id="MiddleColumnWrapper"> I have put the following code in my </Head> <script> $( function() { $( ".ajaxLink" ).on( "click", function() { var ajaxUrl = $( this ).attr( "href" ); $.get({ ajaxUrl, function( response ) { $( "#MiddleColumnWrapper" ) .html( response ); } }); } } </script> But at the moment I just get the result of $table in a new page. Have I missed something Thanks Quote Link to comment https://forums.phpfreaks.com/topic/296786-updating-a-div-using-the-contents-of-a-php-file/ Share on other sites More sharing options...
Muddy_Funster Posted June 15, 2015 Share Posted June 15, 2015 try: $.ajax({ url: ajaxUrl, type: "get", success:function loadDiv( response ) { $( "#MiddleColumnWrapper" ) .html( response ); } } Quote Link to comment https://forums.phpfreaks.com/topic/296786-updating-a-div-using-the-contents-of-a-php-file/#findComment-1513879 Share on other sites More sharing options...
thowe26 Posted June 15, 2015 Author Share Posted June 15, 2015 Hi Muddy This is the essence of what I have, The menu option is in an include and printers3.php interrogates the database and finishes with a "echo $table". That all works ok, I just cannot seem to get the result to sit inside my #MiddleColumnWrapper. The echo still presents in a new window. <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script> $( function() { $.ajax({ url: ajaxUrl, type: "get", success:function loadDiv( response ) { $( "#MiddleColumnWrapper" ) .html( response ); } } } </script> </head> <body> <ul > <li><a href="printers3.php" Class="ajaxLink" name="3D Printers" title="3D Printers">3D Printers3</a></li> </ul> <div id="MiddleColumnWrapper"> <p>Middle column</p> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/296786-updating-a-div-using-the-contents-of-a-php-file/#findComment-1513917 Share on other sites More sharing options...
Muddy_Funster Posted June 15, 2015 Share Posted June 15, 2015 try removing the href from the anchor element Quote Link to comment https://forums.phpfreaks.com/topic/296786-updating-a-div-using-the-contents-of-a-php-file/#findComment-1513935 Share on other sites More sharing options...
thowe26 Posted June 15, 2015 Author Share Posted June 15, 2015 Have done - no luck Couple of questions about your code. Apologies if they are basic but I have been trying every combination Should: "$.ajax({" be "$.ajaxLink({" so it picks up the class in the anchor. Although I have tried this and no luck Taking the href out then does not provide the link thru to the printer3.php interrogation file. Although I have tried this and no luck. Quote Link to comment https://forums.phpfreaks.com/topic/296786-updating-a-div-using-the-contents-of-a-php-file/#findComment-1513958 Share on other sites More sharing options...
Muddy_Funster Posted June 15, 2015 Share Posted June 15, 2015 Alright, I'm going to pretty much take what you have, throw it away, and start again. I didn't have time to really look at your codde earlier as I was at work, now however I have an hour to kill, so let's do this right. I'll assume your css and everything is working for the display of your menu, so that can stay, but the html and jquery stuff we're going to re-do. First the html. We will keep it close enough so that your css should still work. <body> <ul> <li><a onClick="myMenuFunction('printer3.php')" class="ajaxLink" name="3D Printers" title="3D Printers">3D Printers3</a></li> </ul> <div id="MiddleColumnWrapper"></div> </body> Not much changed, except that there is now an onClick event that is passing in the string 'printer3.php' as a parameter to a function call for the myMenuFunction. Now let's go make that function. <head> ... <script> function myMenuFunction(dest){ //declare the function and say that whatever is passed into the function will be assigned to a variable called dest while it is inside it $.ajax({ //call jQuery ajax function and open parameter list url: dest, //pint the ajax request to whatever value is passed into the function using the dest varialbe mentioned earlier type: "GET", //set the request method to GET (GET is default, but it's good to get into the idea of setting it anyway success: function ajaxSuccess(data){ //on a successfull server response perform the following actions defined in the function we are calling ajaxSuccessto keep our code transportable and easy to read passing in returned data as the data parameter $('#MiddleColumnWrapper').empty(); // we want to make sure and clear out any content already in the div so we dont end up with unexpected content $('#MiddleColumnWrapper').html(data); // now we load in the data we got back from the server request into the div with id MiddleColumnWrapper }, fail: function ajaxFailed(e){ //this should be making sense by now, but here we are catching the error info of a failed request in the variable e and performing the following actions alert("Server call failed with the following message : "+e); //a simple alert message to give details about the failure }); // close the parameter list and function call }; // close our custom function </script> </head> And that's all we should need to do. I have commented this as much as I felt I could without overcrouding the code too much so there's not much more to say. Always rememebr that the ajax call is, by it's deffinition asyncronos. that means that it does not follow the normal flow of the code, so the rest of the code will not interact with it in the normal way. anything you want to do after an ajax call must be within one of the $.ajax callbacks, or else nested in a rather complicated wrapper function that uses custom callbacks. This is untested, so is likely buggy as hell, but it should be close enough for most people to get working that have used ajax and jQuery before. Also, if anyone want's to elaborate/alter/fix it please feel free to copy and past with additions/alterations. Best of luck. and if there is anything else ask away. Quote Link to comment https://forums.phpfreaks.com/topic/296786-updating-a-div-using-the-contents-of-a-php-file/#findComment-1513998 Share on other sites More sharing options...
thowe26 Posted June 16, 2015 Author Share Posted June 16, 2015 Hi Muddy Thanks for your help and your comments, much appreciated. But no luck. I added a blank href to allow me to click, swapped the { and ( around after the $.ajax. and simplified the returning 'hello.php' so it is just an echo 'hello' (the original 'printers3.php' is a multi row array) But no luck. Here is the file in its full, so very simple. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="noindex"> <link href="css/3D1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script> function myMenuFunction(dest){ $.ajax{( url: dest, type: "GET", success: function ajaxSuccess(data){ $('#MiddleColumnWrapper').empty(); $('#MiddleColumnWrapper').html(data); }, fail: function ajaxFailed(e){ alert("Server call failed with the following message : "+e); } ); }; }; </script> </head> <body> <ul > <li><a href="" onClick="myMenuFunction('hello.php')" name="3D Printers" title="3D Printers">3D Printers3</a></li> </ul> <div id="MiddleColumnWrapper"> <p>Middle column</p> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/296786-updating-a-div-using-the-contents-of-a-php-file/#findComment-1514029 Share on other sites More sharing options...
Muddy_Funster Posted June 16, 2015 Share Posted June 16, 2015 (edited) why would you swap the brackets around? You broke the script. Re-copy the original code I gave you, then fire up the developer console in your browser (usually done with F12) and try running the script. It will point out errors and line numbers and we'll be able to fine tune it from there. P.S. Your using a really old jquery lib. think about getting the 1.11.x Edited June 16, 2015 by Muddy_Funster Quote Link to comment https://forums.phpfreaks.com/topic/296786-updating-a-div-using-the-contents-of-a-php-file/#findComment-1514035 Share on other sites More sharing options...
Solution Muddy_Funster Posted June 16, 2015 Solution Share Posted June 16, 2015 alright: fully tested and working code, you will need to change the url parameter to suit, but this is all working. The problem with the last code was that I had forgot to close the fail action call, that has been fixed now. <!DOCTYPE html> <html lang="en"> <head> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <title></title> <meta name="" content="" charset="utf-8"> <style type="text/css"> ul li a{ background-color:#ddddff; cursor:pointer; } #MiddleColumnWrapper{ width:220px; height:220px; border: 1px blue dashed; margin: 10px auto 0px auto; } </style> <script> function myMenuFunction(dest){ //declare the function and say that whatever is passed into the function will be assigned to a variable called dest while it is inside it $.ajax({ //call jQuery ajax function and open parameter list url: dest, //pint the ajax request to whatever value is passed into the function using the dest varialbe mentioned earlier type: "GET", //set the request method to GET (GET is default, but it's good to get into the idea of setting it anyway success: function ajaxSuccess(data){ //on a successfull server response perform the following actions defined in the function we are calling ajaxSuccessto keep our code transportable and easy to read passing in returned data as the data parameter $('#MiddleColumnWrapper').empty(); // we want to make sure and clear out any content already in the div so we dont end up with unexpected content $('#MiddleColumnWrapper').html(data); // now we load in the data we got back from the server request into the div with id MiddleColumnWrapper }, fail: function ajaxFailed(e){ //this should be making sense by now, but here we are catching the error info of a failed request in the variable e and performing the following actions alert("Server call failed with the following message : "+e); //a simple alert message to give details about the failure }// close fail action call }); // close the parameter list and function call }; // close our custom function </script> </head> <body> <ul> <li><a onClick="myMenuFunction('ajaxTst.html')">3D Printers</a></li> </ul> <div id="MiddleColumnWrapper"></div> </body> </html> I just left in the html for completeness, obviously you will use your own. Quote Link to comment https://forums.phpfreaks.com/topic/296786-updating-a-div-using-the-contents-of-a-php-file/#findComment-1514046 Share on other sites More sharing options...
thowe26 Posted June 16, 2015 Author Share Posted June 16, 2015 Thanks Muddy Appreciate your time. All works exactly as you say. Quote Link to comment https://forums.phpfreaks.com/topic/296786-updating-a-div-using-the-contents-of-a-php-file/#findComment-1514077 Share on other sites More sharing options...
Muddy_Funster Posted June 16, 2015 Share Posted June 16, 2015 you're welcome, glad I could help. Quote Link to comment https://forums.phpfreaks.com/topic/296786-updating-a-div-using-the-contents-of-a-php-file/#findComment-1514081 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.