We Keep Coding

Auto refresh JS with appendchild command that grabs data from an external file

I am creating a chat system and I am using html/php/jquery.
How can I append a child with data from an external file to a div using javascript auto refresh feature?
The code that I have:
<script>
var auto_refresh = setInterval(
function()
{
$('#messages_box').load('refresh_messages.php');
}, 1000);
</script>
The code above refreshes the whole DIV with data grabbed from the mentioned document.
<script>
var auto_refresh = setInterval(
function()
{
var textnode=document.createTextNode("Water");
document.getElementById("messages_box").appendChild(textnode);
}, 1000);
</script>
And the code above, appends the text to the div I want.
I want to "combine" this two and obtain the following result:
Auto-refresh an external php file every second and if there are new results (messages in my case) the messages_box DIV should be updated with the results using the appendchils JS method.
I want to create a chat messaging system that will grab messages if a new result is encountered when loading the external php fild. I want to use the appendchild method, because by doing this I will practically add a new child to the div, not refresh the whole div. I absolutely need to append stuff, not to load the whole DIV again.

It seems to me that what you are looking for is an AJAX request.
Here's how I would set this up:
Have a database set up to store messages
Have a PHP file with various functions to both retrieve and send messages to/from the database.
Have another PHP/HTML file with javascript that creates an AJAX request to the other PHP file on a regular basis.
There is tons of documentation on how to create ajax requests with pure javascript, but I personally prefer to used the jQuery .ajax() function.

How to dynamically change the page title every 2 seconds using Ajax & Jquery? (Firefox not Working?)

I'm trying to change the page title to something new every 2 seconds. The following Javascript code works in Chrome, however in Firefox, the new page title only stays for less than a second and then the title reverts back to the original page title. How do I get the new, update page title to stay put and not revert to the original in Firefox?
$(document).ready(function(){
var refreshit = setInterval(updatePageTitle, 2000);
});
function updatePageTitle(){
var url = "http://www.website.com/page.php?action=title&rand="+ Math.random();
$.post( url, function(data) {
document.title = data;
});
}

The code I was using was correct. The problem was there was an external script changing it back to the original title.

How to get updated page content after a JS event using phantomjs?

I have a page with a simple form. This form has ONE input text.
I have this code:
page.open("http://www.example.com", function (status) {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", function() {
page.evaluate(function() {
$('input[name=myText]').val('my content');
});
});
});
(as you can see i also loaded jquery)
Now, when i set the content of this input text, the page changes, the content of the page changes.
My question is: how can I get the updated content?
The problem is that i need to submit the form but i can not do it after:
$('input[name=myText]').val('my content');
because when i set it there is an JS event on the page that changes the content.
SO I must read the new content, find the form using JQuery and then submit it.
Could someone help me?
Thank you!

So your page.evaluate() call has a side effect and that changes the page. The question is whether this change occurs instantaneously. But you cannot assume that it does - particularly if it causes a fetch of new content from a remote webserver.
That being the case the best thing you can try is to sleep for a while and then assume your page has the new content. Or alternatively, when you feel more advanced, poll on a regular basis for a DOM object you are expecting to appear. But the beginner should try a sleep:
....
page.evaluate( function() { ... } );
window.setTimeout(
function() {
/* press submit button */
},
5000 /* wait 5 seconds (5,000ms) */
);
....

jQuery Auto refresh div messing up

I have a script that auto-refreshes a certain div on the page (That I got from another post on here)
<script type="text/javascript">
var auto_refresh = setInterval(
function(){
$('#refresh').load('index.php?_=' +Math.random()).fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
...............
<div id="refresh">
<!-- Some PHP Code -->
</div>
This refreshes, however when it does, I takes the entire html document and puts it into the div. Like this:
As you can see, the refreshed div (the one marked in red) is getting the body shouved into it. Any ideas???

You are loading entire page to the div.
Modify the code to use only part of the document that is fetched:
<script type="text/javascript">
var auto_refresh = setInterval(
function(){
$('#refresh').empty();
$('#refresh').load('index.php?_=' +Math.random()+' #refresh').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>

First off, you are loading the entire page into the divider, thus causing the file to reload entirely. Instead, you should be having the Recent Posts divider load from a single file, even on the first page load. Then have that consistently refresh over time.
Secondly, you should be transferring as little data as possible from your server to your clients. At most, you should use a minimalistic checksum of sorts (number of messages, for instance) to confirm that the client and server are synced up.
Lastly, if you choose to use this format, aim to transfer your data in something such as JSON or XML and have the client display it on the page. Transferring the styled HTML increases network overhead and is not the best practice.

jQuery replace all HTML

I'm trying to replace all the HTML (including the HTML tags) with another page. What I'm trying to do is having a website acting as an app even when navigating the another page.
Here is the code :
(function($) {
Drupal.behaviors.loadingPage = {
attach: function(context,settings) {
$('a').click(function(event) {
event.preventDefault();
// Create the loading icon
// ...
$.ajax({
url: $(this).attr('href'),
success: function(data) {
$('html').replaceWith(data);
}
});
});
}
};
})(jQuery);
I've tried several things. replaceWith() causes a jQuery error in jquery.js after deleting the HTML tag, I guess it is because it can't find the parent anymore to add the replacement.
The best result I got was with document.write(data). The problem is, the javascript code on the loaded page is not executed.
Anyone got a better idea ?

A better idea? Yeah, just load the new page normally by setting window.location instead of using AJAX. Or submit a form.
Otherwise, if you want to load something to replace all of the visible content of the current page but keep the current page's script going, put all the visible content in a frame sized to fill the browser window - which, again, you wouldn't populate using AJAX.
(I like AJAX, but I don't see why you'd use it to replace a whole page.)