javascript not interpreting php return variable

[UncleJoe]

I'm all hosed up...most of this is pretty new to me, so please forgive my terminology. I'm using scriptaculous for the DnD stuff. Using AJAX I'm returning a variable from the server. The variable can be verified using alert(variable), but when I pass the variable as an argument it isn't working...

phpScript.php-

<?php print $divID; ?>

function onDropEvent(draggable,droparea){
    var url="phpScript.php";
    var rand   = Math.random(9999);
    var pars   = 'divID=' + draggable.id + '&rand=' + rand;
    var myAjax = new Ajax.Request( url, {method: 'get',  
                          parameters: pars, onComplete: showID} );
}

function showID(myAjax){
    var newVar=String(myAjax.responseText);
    alert(newVar);                       // <----alert shows expected divID
    if (newVar == 'close') {         // <----not evaluated
        alert(newVar);
    }
    else {
        toggle(newVar);               // <----newVar=divID (should)
    }
}

function toggle (elid) {
    //var elid="divID";                                         //<-- works this way
    var cdiv = document.getElementById(elid);  //<-- doesn't work
    var pdiv = cdiv.parentNode;
    alert(cdiv.id +" "+ pdiv.id);             //<-- empty without hardcode
}

[essential]

Hi UncleJoe,

I am not quite familiar on using this frameworks.

But i suspect, the problem could be on line #5, in your code:

var myAjax = new Ajax.Request( url, {
method : 'get',
// Try to provide object reference onto this label(pars).
pars : pars, // (OBJECT REFERENCE)?, 

onComplete : showID // How do you pass arguments inside the  <code>showID(args)</code>  function? 
} );

if you can fix those lines above, im sure you will be able to sort things out.

[UncleJoe]

Hi UncleJoe,

I am not quite familiar on using this frameworks.

But i suspect, the problem could be on line #5, in your code:

var myAjax = new Ajax.Request( url, {
method : 'get',
// Try to provide object reference onto this label(pars).
pars : pars, // (OBJECT REFERENCE)?, 

onComplete : showID // How do you pass arguments inside the  <code>showID(args)</code>  function? 
} );

if you can fix those lines above, im sure you will be able to sort things out.

Thanks for your reply...essential! As I said I'm pretty new to this, if I don't understand your reply feel free to throw something at me. The 'pars' parameter is getting to php successfully, and the phpScript returns a value successfully, evidenced by the alert() function. The issue I am running into is assigning the returned value to a variable.

When I alert(myAjax.responseText), or alert(newVar), the popup box shows the divID I expect. Once newVar is passed to 'toggle' into 'elid' var cdiv is empty, then as expected pdiv is also empty. My thinking is 'newVar' should hold the returned string.

Aside from all that...is there a better way to accomplish what I want? Basically, I'm sending the dropped divID, 'draggable.id', to 'phpScript.php' for processing, then I want to return anew divID of which I can get the parent node. Ultimately, I'm setting the parent node to display:yes and updating the class of the returned divID. In order-

1) Send dropped divID to phpScript.php
2) Return new divID from phpScript
3) Set display:yes for divID.parentNode
4) Change css class for divID

I appreciate any help, this is the final hurdle...until the next one anyway!

UncleJoe

[Airshow]

UJ,

cdiv will be null if no DOM element has the id of the variable elid .

Either the value returned by phpScript.php is wrong (it may just need trimming) or it is correct but the div in question is wrongly id'd or doesn't exist at all.

When there is a perfect match between elid and the id of an existing DOM element (hopefully the div you're looking for) then alert(cdiv); should give "[object]"

The code you posted looks fine.

I think the problem must lie elsewhere; either in the php/HTML that (is supposed to have) created the div in question, or the code in phpSctipt.php that (is supposed to) return a valid div id.

By the way ... hi to Ess.Airshow

[essential]

Preserving what we already have, let's try this and see if things will work:

var new Ajax.Request( url, {
method : 'get',
// Try to provide object reference onto this label(pars).
pars, 
onComplete : function() { showID(myAjax); } 
} );

hope it helps and hi toAirshow

[UncleJoe]

Thanks for the reply Airshow. I double checked the scripts. The return from php is an existing div ID, verified by: alert(newVar);
'elid' is the same div ID verified by alert(elid); The div ID I'm testing is hardcoded in php to return, so PHP drops out of the equation. Finally, the div ID exists, verified by 'view source'. Still no value for 'cdiv'. A final test, I set elid=divID; and I get a return value for 'cdiv'.

What's puzzling me is the string divID is definitely there, and its definitely in 'elid', yet 'cdiv' returns empty (not null) unless its hard coded.

Is there some type of "treatment" a return string needs to go through from PHP to Javascript? Single quotes, double quotes, or something simple I may be missing?

I'm about to scrap all of it and start over. This was put together off a tutorial, maybe I should try a different one, of course, I'll be awful torqued when I run into the same problem again!

Thanks a million for your help, my wife is about to send me to Swearers Anonymous.

[UncleJoe]

Preserving what we already have, let's try this and see if things will work:

var new Ajax.Request( url, {
method : 'get',
// Try to provide object reference onto this label(pars).
pars, 
onComplete : function() { showID(myAjax); } 
} );

hope it helps and hi toAirshow

Essential-
I tried to replace my ajax call with your line. The DnD quit working, I tinkered with it a little, but didn't have any luck. I'm going to try to look up the syntax you used, I'm not clear how the function() call works.

Thanks for the help, I know its tough to diagnose a problem without it sitting in front of you.

UncleJoe

[Airshow]

UJ,

Burried in my post above is a suggestion that the returned divID might need to be stripped. ie. it may have leading/trailing white space that doesn't show up in a javascript alert.

You can test the theory with alert(divID.length). See if it reports the expected number of characters.

If this turns out to be the problem then you can do one (or both) of two things:Fix the php such that it only returns the necessary string. It's good to put an exit command immediately after printing the required output to ensure nothing gets tacked on further down the page.
Trim the returned string in jvascript. This is a bit tricky if you don't know what to trim off, so method 1 is preferred.
Airshow

[essential]

Try this with your toggle(arg) function:

function toggle( elid ) {
   elid = elid.replace(/[\s\n]+/g, "");
   var cdiv = (( document.getElementById ) ? document.getElementsByTagName("*") : (( document.all && !document.getElementById ) ? document.documentElement.all : null ));

   var elem = Boolean((((( cdiv ) ? cdiv[ elid ] : undefined )) ? true : false )); 

   var pdiv = (( elem ) ?   cdiv[ elid ].parentNode : undefined );

   var testMSG = "\n" + (( pdiv ) ? "Element : " + cdiv[ elid ].id + "\nParent Element : " + pdiv.id : "(pdiv) is " + pdiv + "- please verify your element id!");
   alert( testMSG );
}

[UncleJoe]

UJ,

Burried in my post above is a suggestion that the returned divID might need to be stripped. ie. it may have leading/trailing white space that doesn't show up in a javascript alert.

You can test the theory with alert(divID.length). See if it reports the expected number of characters.

BINGO!!!! I checked the string length which should be '3', but the alert returns '5'. I do have an exit in the php immediately after

print $divID;

to no avail. I'm not familiar with stripping strings in javascript. I guess the first thing I need to know is where in the 5 element string the actual element is, ie two leading blanks, two trailing blanks, or one on either side.

Some of the returned div IDs are 4 characters, so I'll check if 2 extra characters is consistent. Could you point me in the right direction wrt string manipulation? I tried to trim the return in php, but that didn't help.

Thanks a bunch for your help and patience.

[UncleJoe]

Essential-

Thanks for the test script. We've discovered that there are too many characters in 'elid'- its somewhere in this thread.

I'm putting your script into toggle to see what the returns are. I appreciate all your help with this. I'm always interested to look at other peoples functions- its amazing what I can learn from experimentation.

Thanks again-
UncleJoe

[UncleJoe]

It works!!!

I added a prototype

String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g,"");
}

using:

var output = input.trim();

The divID is parsed properly in the argument.

Thanks a bunch Essential and Airshow, you have saved the day!

[essential]

Here's a more versatile code:

function toggle( elid ) {
   elid = elid.replace(/\s+/i, "");
   var testMSG = "";
   var validID;
   var ids = [ ];
   cdiv = (( document.getElementById ) ? document.getElementsByTagName( "*" ) : document.all );
   for ( var x = 0; x < cdiv.length; x++ ) {
      if ( cdiv[ x ].id.indexOf( elid ) !== -1 ) {
         ids.push( cdiv[ x ].id );
         validID = (( cdiv[ x ].id === elid ) ? elid : undefined );
         continue;
      }
   } if ( validID ) {
     var pdiv = cdiv[ validID ].parentNode;
     alert( "\nElement ID : " + validID + " -\nParent ID : " + pdiv.id + " -", "Element ID Verified" ); 
   return;
   } testMSG += "\nHere are the following lists of element ids closest to elid:(" + elid + ")\n";
   for ( var i = 0; i < ids.length; i++ ) {
      testMSG += "Element ID : " + ids[ i ] + "\n";
      testMSG += "Parent ID : " + cdiv[ String( ids[ i ] ) ].parentNode.id + "\n";
      testMSG += "Tag Name : <" + cdiv[ String( ids[ i ] ) ].nodeName.toLowerCase() + ">\n\n"
   } alert( testMSG );   
}

we're glad that you finally solved this issue.essential

[Airshow]

UJ,

With exit doing its thing, I would guess you've got a leading carriage return from somewhere higher up the page. They can creep in if the source code dances <? in and ?> out of php. And check that the opening <? is hard against the top of the file.

Alternatively .....
I'm not sure which style of line feed it might be, so try stripping both the common types:

divID = divID.replace("\n", "");
divID = divID.replace("\r\n", "");

Each statement will remove one line feed so if this still doesn't work do each of the above twice by duplicating the lines.

Good luck.Airshow

[Airshow]

I just read the thread through and spotted UJ's post #12. I must have been a bit bleary-eyed yesterday morning.

Ignore my ramblings above. I'm sure that String.prototype.trim is the way to go.

Airshow

[UncleJoe]

Thanks a bunch for your efforts.