Jump to content

Updating a Div using the contents of a php file


thowe26
Go to solution Solved by Muddy_Funster,

Recommended Posts

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

 

 

Link to comment
Share on other sites

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>


Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

why would you swap the brackets around? :confused: 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 by Muddy_Funster
Link to comment
Share on other sites

  • Solution

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.