Creating a Function that acts as a PHP href with Relationship

[Jalsemgeest]

Hey,

So I'm making a website with some friends and am fairly new to php and html. However I have some fairly good understandings of them. I don't have extremely good understandings over Javascript, AJAX, jQuery, etc.

I was hoping to have a dynamic message where if someone posted the message it would load automatically. The page would then search the database for the message every 10-15 seconds and update the page automatically.

Now I have a php script that updates the page and works perfectly. However I have to click a:

<a href='php script' rel='load-content'>Load Content</a>

I was hoping/wondering there would be a way to do exactly what happens within the href but using setInterval and a function.

I apologize if this is either a stupidly easy question or something that is overly complicated.

I'm not trying to get people to give me hundreds of lines of code or anything just looking for some insight as to how I may do this.

Thanks again!
Cheers.

[72newbie]

I'm here getting help myself (I hope).. this place taught me a lot of php (thanks NogDog and Bokeh), I'm hoping to learn a little javascript too!
I have this that I used, there may be better answers though,

setInterval(function() {theScript('<?=$userID;?>')}, 30000);

now as I understand this:

setInterval does what it says, theScript is the function being called, I added some php for the users Id so the php knows who. the 30000 is the time in milliseconds to check... ie every 30 seconds. hope this helps

[Jalsemgeest]

Thanks 72Newbie!

That does help a bit although I'm still needing a function that will grab the href and relationship and use them to do what it would do as if I were clicking the href.

I have this so far...

setInterval(getInfo, 10000);

function getInfo() {
var href = document.getElementById("theHref").getAttribute("href");
var rel = document.getElementById("theHref").getAttribute("rel");
}

Although once I get that I need to use the relationship that is this:

$("a[rel='load-content']").click(function(e){
e.preventDefault();
var $this=$(this),
url=$this.attr("href");
$.get(url,function(data){
$(".convo .mCSB_container").html(data); //load new content inside .mCSB_container
$(".convo").mCustomScrollbar("update"); //update scrollbar according to newly loaded content
$(".convo").mCustomScrollbar("scrollTo","top"); //scroll to top
});
});

So when I click the href it uses this relationship to put the information from the href URL into the ".convo .mCSB_container".

So I don't really know how I'm going to do that...

Anyone have any ideas/clues/etc?

[George88]

You'll need to use AJAX if you want automatic updates without a page refresh. This is easily achieved. Your basic AJAX function is:

function do_something()
{
    var xmlhttp = "";
    
    // The thing you want to submit to the database. 
    var text = document.getElementById("some_input_field").value;

    if (window.XMLHttpRequest) // IE7+, Firefox, Chrome, Opera, Safari.
        xmlhttp = new XMLHttpRequest();  
    else // IE6, IE5.
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 
    xmlhttp.onreadystatechange = function()
    {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            // Handle HTTP response here.
            document.getElementById("some_div_to_update").innerHTML = xmlhttp.responseText;
        }
    }
 
    xmlhttp.open("GET", "some_page.php?some_param=" + text , true);
    xmlhttp.send();
}

This will call the PHP file "some_page.php", where you will need to write some code to insert the given message in to the database. Then you'll need to (in the same file) retrieve it back from the table(s) and echo it out so it can be handled as a response.

[Jalsemgeest]

Thanks George88!

That nearly solves my problem although the only reason that won't work perfectly is because it needs to use the "rel" from the href.

Essentially what my href does right now is this:
- Click href with url and relationship.
- href looks at relationship which is:
$("a[rel='load-content']").click(function(e){
e.preventDefault();
var $this=$(this),
url=$this.attr("href");
$.get(url,function(data){
$(".convo .mCSB_container").html(data); //load new content inside .mCSB_container
$(".convo").mCustomScrollbar("update"); //update scrollbar according to newly loaded content
$(".convo").mCustomScrollbar("scrollTo","top"); //scroll to top
});
});

- The e.preventDefault(); makes it so it doesn't go straight to the page.
- So it grabs the url and then gets whatever is being echo'ed back.
- It then puts the echo'ed back content within the ".convo .mCSB_container" which is created on page load by a plugin.
- The $(".convo").mCustomScrollbar("update"); just updates the scrollbar
- The final like just scrolls the scrollbar to the top.

The issue I'm having is transferring what happens in this click into just a function that can be called with 'setInterval()'.

You can see that I've managed to get the url through my previous reply although from that point I'm stuck.

[72newbie]

from his ajax code:

function do_something(userID)
{
:snip:
xmlhttp.open("GET", "some_page.php?some_param=" + userID , true);

and from what I posted:

setInterval(function() {do_something('<?=$rel;?>')}, 10000);

right?

[Jalsemgeest]

So I finally got it working!

Thanks for the help guys.

I'll post my solution in case people were wondering how to do the same thing I needed.

setInterval(getInfo, 10000);

	function getInfo() {
		var xmlhttp = "";
	
		var href = document.getElementById("theHref").getAttribute("href");
		var rel = document.getElementById("theHref").getAttribute("rel");
	
		if (window.XMLHttpRequest) // IE7+, Firefox, Chrome, Opera, Safari.
			xmlhttp = new XMLHttpRequest();  
		else // IE6, IE5.
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	 
		xmlhttp.onreadystatechange = function()
		{
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
			{
				// Handle HTTP response here.
				getMessage = xmlhttp.responseText;
				$(document).ready(function($) {
					$(".convo .mCSB_container").html(getMessage); //append new content inside .mCSB_container
					$(".convo").mCustomScrollbar("update");
				})(jQuery);
			}
		}
	 
		xmlhttp.open("GET", href, true);
		xmlhttp.send();
	
	}