jquery - passing variables to jquery after multiple load events

Question

Hi I have the code below, made up of 4 pages (3 x php, 1 x js). The basic principle is simple enough:

test17a.php: make selection from n radio buttons - fires onChange event to load the contents of test17b.php. This includes a MySQL query derived from the ID of the radio button selected.

test17b.php: displays one item, which when clicked, loads test17c.php This includes a MySQL query derived from the result of test17a.php and test17b.php

test17c.php: displays n items, each of which is clickable, when clicked these run a MySQL query derived from the result of test17a.php, test17b.php, and test17c.php

test17d.php displays the result of the above query.

The problem is that the values in test17c.php are being returned as undefined. I am assuming this is something to do with the javascript being loaded before the values have. But I don't know how to change this so that the values are passed correctly.

If anyone can point me in the right direction it would be really appreciated.

##test17.js##
//fired from onchange event on test17a.php
function findB(GroupVal)
    {
        $("#B").load("test17b.php?GroupVal="+GroupVal).css('display','block');
    }

//fired from onClick event on test17b.php       
function findC(GroupVal,MasterID)
    {
        $(".C").load("test17c.php?GroupVal="+GroupVal+"&MasterID="+MasterID).css('display','block');
    }


//fired when clicking on one of the items on test17c.php (used to show which item was clicked on   
$(document).on('click', 'p.C2', function(evt) 
    {
        var $p = $(evt.currentTarget),
            GroupVal = $p.data('GroupVal'),
            MasterID = $p.data('MasterID'),
            SlaveID = $p.data('SlaveID'),
            $div = $p.next();
        console.log('3GroupVal='+GroupVal+' | 3MasterID='+MasterID+' | 3SlaveID='+SlaveID); 
        findE(GroupVal, MasterID, SlaveID, $div);
    }
);

function findE(GroupVal, MasterID, SlaveID, $div)
{
    $div.load("test17d.php?GroupVal="+GroupVal+"&MasterID="+MasterID+"&SlaveID="+SlaveID).css('display','block');
    console.log('4GroupVal='+GroupVal+' | 4MasterID='+MasterID+' | 4SlaveID='+SlaveID);
}

_

##test17a.php##
<head>
<script language="JavaScript" src="../Generic/JAVASCRIPT/jquery-min.js" type="text/javascript"></script>
<script language="JavaScript" src="test17.js" type="text/javascript"></script>
</head>
<Body>
<label for="GROUP1">GROUP1</label>
<INPUT class="groupSelectButtons" TYPE="radio" NAME="GroupSelect" VALUE="1" id="GROUP1" onChange="findB(this.value)"/>

<label for="GROUP2">GROUP1</label>
<INPUT class="groupSelectButtons" TYPE="radio" NAME="GroupSelect" VALUE="2" id="GROUP2" onChange="findB(this.value)"/>
<div id="B">
</div>
</Body>

##test.17b.php##
<?php
$GroupVal = $_GET['GroupVal'];
$MasterID = $GroupVal*2;

print "<p id=\"B2\" onClick=\"findC('$GroupVal','$MasterID')\"> GroupVal = $GroupVal | MasterID = $MasterID</p>";
print "<div class=\"C\"></div></br>";
?>

 ##test.17c.php##
<?php
$GroupVal = $_GET['GroupVal'];
$MasterID = $_GET['MasterID'];
$SlaveID = $GroupVal*$MasterID;

print "<p class=\"C2\" data-GroupVal=\"$GroupVal\" data-MasterID=\"$MasterID\" data-SlaveID=\"$SlaveID\"> GroupVal = $GroupVal | MasterID = $MasterID | SlaveID = $SlaveID </p>";
print "<div class=\"D\"></div>";

$SlaveID++;

print "<p class=\"C2\" data-GroupVal=\"$GroupVal\" data-MasterID=\"$MasterID\" data-SlaveID=\"$SlaveID\"> GroupVal = $GroupVal | MasterID = $MasterID | SlaveID = $SlaveID </p>";
print "<div class=\"D\"></div>";

$SlaveID++;

print "<p class=\"C2\" data-GroupVal=\"$GroupVal\" data-MasterID=\"$MasterID\" data-SlaveID=\"$SlaveID\"> GroupVal = $GroupVal | MasterID = $MasterID | SlaveID = $SlaveID </p>";
print "<div class=\"D\"></div>";
?>

##test17d.php##
<?php
$GroupVal = $_GET['GroupVal'];
$MasterID = $_GET['MasterID'];
$SlaveID = $_GET['SlaveID'];
$SubSlaveID = $SlaveID+10;

print "<p class=\"D2\"> GroupVal = $GroupVal | MasterID = $MasterID | SlaveID = $SlaveID | SubSlaveID = $SubSlaveID</p>";
print "<div class=\"E\"></div>";

?>

developerCK · Accepted Answer · 2013-07-26 18:56:40Z

1

What i suppose is you are giving ur filename in comment as test.17c.php while in url it is test17c.php. so it night be an issue and if ur thinking that response is loading before php file content load then try this

$(<selector>).load(<url>, function() {
// print response so that it will print after response load
    alert('Load was performed.');
});

answered Jul 26, 2013 at 18:56

developerCK

4,5263 gold badges19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IGGt Over a year ago

well spotted. I tend touse the format type.name.php (e.g. test.17c.php, conf.dbAccess.php), which is why I typed it above. But in this case the pages I am using are simply test17c.php (just to confuse myself I guess)

IGGt · Accepted Answer · 2013-07-29 13:43:17Z

I found the answer, and it is a bit strange. In my code I have:

print "<p class=\"C2\" data-GroupVal=\"$GroupVal\" data-MasterID=\"$MasterID\" data-SlaveID=\"$SlaveID\"> GroupVal = $GroupVal | MasterID = $MasterID | SlaveID = $SlaveID </p>";

But when I had a closer look using the console, I saw that it was being read as:

print "<p class=\"C2\" data-groupval=\"$GroupVal\" data-masterid=\"$MasterID\" data-slaveid=\"$SlaveID\"> GroupVal = $GroupVal | MasterID = $MasterID | SlaveID = $SlaveID </p>";

In other words, all of the data-xxx components were being converted to lower case. This meant that once the Javascript ran, and subsequently the $_GET['xxx'], the variables were all 'undefined'.

Once I converted all instances of this to lower case in my Code, it ran fine. Strange.

Collectives™ on Stack Overflow

jquery - passing variables to jquery after multiple load events

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related