AJAX: I want to update part of page after insert data in The same page

Hello everybody

I am currently programming Script Adds data to the database but if i want to Shown the data that have been added Requires refresh the page to show the Data that have been added . and I do not want this method

I want to when adding data to show updates as soon as the addition of data
This can be done by Ajax , and An example of this method used Google Gmail


Now anybody help me please

 

You can use this ajax object. Add the script to your page and then create a new object like this:

new ajaxObj(scriptURL, elementId, 'Loading! Please wait...'); 

Code (markup):

where:
-scriptURL is the URL of your script, that manipulates the database and echoes the new HTML.
-elementId is the id of the element (<div>, <span>, <td>, etc.) that you want to display the new data.

Just read the instructions if you don't understand something

 

Thank you Mr xlcho for this object but this object load Full page without refresh
And I Want load part of page only without refresh

For example
from open <div> to close </div> etc

can you help me for that

 

READ THE INSTRUCTIONS. This object reloads whatever you tell it to reload, not the whole page.

 

I'm sorry mr xlcho

What do I change in code to determine part of the page

 

OK, here is another example:
Create a file named index.html as fallows:

<script type="text/javascript" src="http://enikoloff.info/scripts/ajax.js"></script>
<script type="text/javascript">
function changeContent()
{
	new ajaxObj("myScript.php", "toChange", "Loading! Please wait...");
}
</script>
<div style="border: 1px solid #000; width: 100%">
Header
</div>
<div style="border: 1px solid #000; width: 200px; height: 300px;">
Other content
</div>
<br />
<div style="border: 1px solid #000; width: 300px; height: 300px;" id="toChange">
Only this will change
<br />
<input type="button" onclick="changeContent();" value="Change content">
</div>

Code (markup):

This code creates a page with 3 <div> elements - two that I've put just to show you that they do not reload, and one that will be changed via the javascript object. Note that the third div has an id="toChange". Inside it there is a button, which calls the changeContent() function when clicked. Now take a look at the changeContent() function. It creates a new ajaxObj object. The first parameter of the object is the script that will change the content(I've named it "myScript.php"); the second is the id of the element that you want to change (the third div that has an id "toChange"); the third parameter is a message that will be displayed while changing the content.
Now create the myScript.php script that will change the content. Use the fallowing code:

<?php
//Here you must execute the queries to the database, etc... You can do virtually anything here.

//When you are done with updating the DB, you must return the new content of the element. Use echo, print*, etc.:
echo "<b>New content of the desired element!</b>";
?>

PHP:

As mantioned in the code - you can do whatever you want in this file - in your case update the database. When you are done updating you must return the new content for the div - the echo line at the end of the script.

Save the files in the same folder and test them. The folder must be within your web-server DocumentRoot, so you could execute the myScript.php as a php script, not just a regular file.

 

Thank you Mr xlcho for continuation help me

But the code did not work very well and I had done earlier this but code did not work
I think there is no solution for my problems and I do not want to tired you more than that

Thank You For Help

 

Hi, I'm learning programming for the kicks. I just tried it and it worked. I think you should try it again.

 

I wrote my last post here hoping it will make clear what you need to do... I've written the script itself, used it on some projects, my readers also use it... The thing you "need to change" is - add an element, that you want to be changed on some event, set an ID to that element and pass it as the second parameter to ajaxObj() function. If you can't figure out what I'm talking about - get someone with some programming skills to set it up and explain it for you...

 

DIV.innerHTML

 

And... ?!? First of all, this code is invalid, unless DIV is already a declared valid HTML object with the innerHTML property. I still can't see why you even mentioned it, yep it's the property that could be used but "DIV.innerHTML" doesn't sound like a solution to the problem asked. Whatever..

 

brother.. sorry for my english..
i only say most simple (not using any frameworks) and faster (on testing) solution.

sorry) i think i used to english language very soon)