Ajax function not even being called

[Vel]

I'm banging my head against a brick wall here. I can't see anything wrong with the code yet my ajax query isn't being called. I stuck an alert at the top of the ajax function, and in the onClick event itself, neither are being shown. Why wouldn't onclick be working?

 

PHP:

<?php
while ($row = mysql_fetch_array($query)) {
	$pId = $row['pId'];
	$pContent = $row['pContent'];
	$pOrder = $row['pOrder'];
	$pActive = $row['pActive'];
	$pTemplate = $row['pTemplate'];
	$pMenu = $row['pMenu'];
	$divId = "ajax" . $pOrder;
	echo "<div class=\"cms-pages\" id=\"$divId\"><div class=\"cms-arrows\"> ";
	if ($pOrder < $num && $theorder != "alpha") {
		echo "<a href=\"#\" onclick=\"funcUpdateCms($pOrder, 'down', $divId);\"><img src=\"img/arrowdown.gif\" alt=\"move up\"></a> ";
	}
	if ($pOrder == $num && $theorder != "alpha") {
		echo "<img src=\"img/noarrowdown.gif\" alt=\"move up\"> ";
	}
	if ($pOrder > 1 && $theorder != "alpha") {
		echo "<a href=\"#\" onClick=\"funcUpdateCms($pOrder, 'up', $divId); funcUpdateCms($pOrder, 'upRef', $divId);\"><img src=\"img/arrowup.gif\" alt=\"move down\"></a>";
	}
	if ($pOrder == 1 && $theorder != "alpha") {
		echo "<img src=\"img/noarrowup.gif\" alt=\"move up\"> ";
	}
	echo "</div><div style=\"float:left; width:200px\"><a href=\"page-edit.php?id=".$pId."\"><strong>$pId</strong></a>";
	if ($pActive == 1) {
		echo " ";
	} else {
		echo " (not on menu) ";
	}
	echo "</div>";

	echo "<div style=\"float:right; width:50px\"><a href=\"page-delete.php?id=".$pId."\" onclick=\"return confirm('Permanently delete page?');\">Delete</a></div><div style=\"float:right; width:50px\"><a href=\"page-edit.php?id=".$pId."\">Edit</a></div><div style=\"float:right; width:50px\">";
	if ($pId == "Home" || $pId == "HOME" || $pId == "home") {
		echo "<a href=\"../\">";
	} else {
		echo "<a href=\"../general.php?id=".$pId."\">";
	}
	echo "View</a></div><div style=\"float:right; width:150px; color:#999;\">".$pMenu." (".$pTemplate.")</div><br/></div>";
}

 

JS Function:

<!--
// JavaScript Document
function funcUpdateCms(pOrder, direction, result) {
alert("Ajax Called");
if (pOrder == "") {
	return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
		alert("Ajax response: "+xmlhttp.responseText);
    		document.getElementById(result).innerHTML=xmlhttp.responseText;
    	}
  	}
alert("Ajax request sent.");
xmlhttp.open("GET", "include/ajax.php?pOrder="+pOrder+"&direction="+direction, true); //Call script to update drop down box
xmlhttp.send();
}
//-->

[AyKay47]

the fact that you are using PHP to call a javascript function might have something to do with it.. also, I recommend that you use jquery's AJAX API for ajax..

[ZulfadlyAshBurn]

use jQuery, its much easier. trust us. if you need help in jQuery post it here

[Vel]

Using JQuery has nothing to do with it (can't call JQuery if I can't use onclick). And PHP should be able to call Javascript (It's Javascript that cant call PHP). This type of format has worked for me in previous sites.

 

This is the source code when viewed from firefox. As you can see it outputs fine. Why doesn't that work?

<div class="cms-pages" id="ajax1">
    <div class="cms-arrows">
        <a href="#" onclick="funcUpdateCms(1, 'down', ajax1);"><img src="img/arrowdown.gif" alt="move up"></a>
        <img src="img/noarrowup.gif" alt="move up">
    </div>
    <div style="float:left; width:200px">
        <a href="page-edit.php?id=Home"><strong>Home</strong></a>
    </div>
    <div style="float:right; width:50px">
        <a href="page-delete.php?id=Home" onclick="return confirm('Permanently delete page?');">Delete</a>
    </div>
    <div style="float:right; width:50px">
        <a href="page-edit.php?id=Home">Edit</a>
    </div>
    <div style="float:right; width:50px">
        <a href="../">View</a>
    </div>
    <div style="float:right; width:150px; color:#999;">0 (general)</div><br/></div>

 

As I posted in the admins thread, I like writing my own code rather than using a framework because you learn a hell of a lot more about the code.

[AyKay47]

when you click on the anchor what exactly is happening.. my guess right now is that it direct you to the href page.. is this correct?

[Vel]

yea, it adds the # to the end of the url, but nothing else happens.

[AyKay47]

you need to add the return value of FALSE after your function callout.. this will stip the default function of the anchor tag so the javascript can execute correctly..

 

onclick=\"funcUpdateCms($pOrder, 'down', $divId);return false\"

[Vel]

That didn't work. Function still isn't being called.

 

I tried onclick="alert('TEST');" and that worked. Also adding that before calling the function works. However adding it after the function doesn't work. Seems there is something wrong with the function itself, yet that function works perfectly fine for other sites.

 

OK, let's try JQuery. I've added the JQuery script at the top, what do I need to do to pass $pOrder and down to include/ajax.php and have it update $divId?

[Vel]

Can no one help with getting the Ajax working using JQuery? I've never used JQuery before and reading through it I have no idea how to use it to pass the information I need to my ajax.php page, then get the information back from my ajax.php page and update the original page.