Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 415
  • Last Modified:

jQuery: Spot the difference - one works, one doesn't

I am struggling to understand why some jQuery does not work when something very similar does. The first section of code below works, the second doesn't. The main difference between the two is that in the second section I am querying a database to populate the select menu.
<!-- Example 1 -->
<html>
<head>
	<title>Select Example</title>
	<script type="text/javascript" src="../includes/js/jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function()
        {
		$("#developer").change(onSelectChange);
	});
	function onSelectChange(){
		var selected = $("#developer option:selected");		
		var output = "";
		if(selected.val() != 0){
			output = "You Selected " + selected.text();
		}
		$("#output").html(output);
	}
	</script>
</head>
<body>
	<h3>Developers</h3>
	<select id="developer">
		<option value="0">Select Developer</option>
		<option value="1">Todd Sharp</option>
		<option value="2">Brian Meloche</option>
		<option value="3">Ray Camden</option>
		<option value="4">Sean Corfield</option>
		<option value="5">Ben Nadel</option>
		<option value="6">Mark Drew</option>	
		<option value="7">Rey Bango</option>	
		<option value="8">Mark Mandel</option>	
		<option value="9">Joe Rinehart</option>
		<option value="10">Dan Vega</option>						
	</select>
	<br /><br />
	<div id="output">
	</div>
</body>
</html>
 
 
<!-- Example 2 -->
<?php
$userPK_rstDocumentZones = "1";
if (isset($_SESSION['MM_Username'])) {
  $userPK_rstDocumentZones = $_SESSION['MM_Username'];
}
 
require_once('../connections/RED_links.php');
 
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }
 
  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
 
  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}
 
mysql_select_db($database_RED_links, $RED_links);
$query_rstDocumentZones = sprintf("SELECT zone_pk, zoneTitle FROM zone LEFT JOIN user ON user_pk = %s WHERE zone_pk = 1 OR zone_pk = 2 AND manageZone2 = 1 OR zone_pk = 3 AND manageZone3 = 1 OR zone_pk = 5 AND manageZone5 = 1 OR zone_pk = 6 AND manageZone6 = 1 OR zone_pk = 7 AND manageZone7 = 1 OR zone_pk = 8 AND manageZone8 = 1 OR zone_pk = 9 AND manageZone9 = 1 OR zone_pk = 10 AND manageZone10 = 1 ORDER BY zone_pk ASC", GetSQLValueString($userPK_rstDocumentZones, "int"));
$rstDocumentZones = mysql_query($query_rstDocumentZones, $RED_links) or die(mysql_error());
$row_rstDocumentZones = mysql_fetch_assoc($rstDocumentZones);
$totalRows_rstDocumentZones = mysql_num_rows($rstDocumentZones);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../includes/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() 
{
	$("#selectDocZone").change(selectVal);
	function selectVal()
	{
		var zoneSelected = $("#selectDocZone option:selected");
		if (zoneSelected.val() != 0)
		{
			$("#selectAdminGroup").removeAttr("disabled");
			$post("getAdminGroups.php", selectDocZone: "zoneSelected");
		}
		else
		{
			$("#selectAdminGroup").attr("disabled", "disabled");
		}
	}
});
</script>
</head>
<body>
<table>
<tr>
	<td>
	<select id="selectDocZone">
		<option value="0">Select a document zone...</option>
		<?php
		do 
		{ ?>
			<option value="<?php echo $row_rstDocumentZones['zone_pk']; ?>"><?php echo $row_rstDocumentZones['zoneTitle']; ?></option>
		<?php } while ($row_rstDocumentZones = mysql_fetch_assoc($rstDocumentZones)); ?>
	</select>
	</td>
	<td>
		<select name="selectAdminGroup" id="selectAdminGroup" disabled="disabled">
			<option value="0">Select an admin group...</option>
		</select>
	</td>
</tr>
</body>
</html>
<?php
mysql_free_result($rstDocumentZones);
?>

Open in new window

0
kcalder
Asked:
kcalder
  • 10
  • 9
1 Solution
 
alien109Commented:
you have a url to help with debugging?
0
 
kcalderAuthor Commented:
I am running this locally and have put them both up in a browser if that's what you mean. The first works, the second doesn't respond.
0
 
alien109Commented:
then can you provide the source for the rendered page?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
kcalderAuthor Commented:
the source in both cases is as per the code listings I have provided, apart from the jquery source file and the MySql database of course. However, I have tried omitting the repeat region database call and replacing it with a simple option listing as per example 1 but I still can't get it to work.
0
 
alien109Commented:
what i meant by rendered source was the html output from the php page.
0
 
kcalderAuthor Commented:
Sorry, of course. Screen shots below.
grab1.jpg
grab2.jpg
0
 
kcalderAuthor Commented:
Sorry again, working too late! The rendered source for both examples is as below...

Example 1 (only html and js so as per the original listing)
<html>
<head>
      <title>Select Example</title>
      <script type="text/javascript" src="../includes/js/jquery.js"></script>
      <script type="text/javascript">
      $(document).ready(function()
      {
            $("#developer").change(onSelectChange);
      });
      function onSelectChange()
      {
            var selected = $("#developer option:selected");            
            var output = "";
            if(selected.val() != 0)
            {
                  output = "You Selected " + selected.text();
            }
            $("#output").html(output);
      }
      </script>
</head>
<body>
      <h3>Developers</h3>
      <select id="developer">

            <option value="0">Select Developer</option>
            <option value="1">Todd Sharp</option>
            <option value="2">Brian Meloche</option>
            <option value="3">Ray Camden</option>
            <option value="4">Sean Corfield</option>
            <option value="5">Ben Nadel</option>

            <option value="6">Mark Drew</option>      
            <option value="7">Rey Bango</option>      
            <option value="8">Mark Mandel</option>      
            <option value="9">Joe Rinehart</option>
            <option value="10">Dan Vega</option>                                    
      </select>
      <br /><br />
      <div id="output">

      </div>
</body>
</html>

Example 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../includes/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
      $("#selectDocZone").change(selectVal);
      function selectVal()
      {
            var zoneSelected = $("#selectDocZone option:selected");
            if (zoneSelected.val() != 0)
            {
                  $("#selectAdminGroup").removeAttr("disabled");
                  $post("getAdminGroups.php", selectDocZone: "zoneSelected");
            }
            else
            {
                  $("#selectAdminGroup").attr("disabled", "disabled");
            }
      }
});
</script>
</head>
<body>
<table>
<tr>
      <td>
      <select id="selectDocZone">            
            <option value="0">Select a document zone...</option>

                              <option value="2">Administration</option>
                              <option value="3">Engineering Process</option>
                              <option value="10">Strategy</option>
                  </select>
      </td>
      <td>
            <select name="selectAdminGroup" id="selectAdminGroup" disabled="disabled">

                  <option value="0">Select an admin group...</option>
            </select>
      </td>
</tr>
</body>
</html>
0
 
alien109Commented:
To start, let's fix the ajax call. I think this is where you problem is.

Look at the line:
$post("getAdminGroups.php", selectDocZone: "zoneSelected");

To do a post ajax request in jQuery, the correct syntax is:
$.post( url, [data], [callback], [type] )

Not sure what selectDocZone: "zoneSelected" is supposed to be, but I'm assuming it's the data you'd like to pass back to the server? If so, you'll need to do this:

$.post("getAdminGroups.php", {selectDocZone: zoneSelected});
Notice that I've enclosed the data in curly brackets and removed the quotes.

Give that a try...

I'm also assuming you'll want to do something with that data that is returned? If so, you'll need to also supply a callback function for the ajax request.

I'd do so with as follows:

$.post("getAdminGroups.php", {selectDocZone: zoneSelected}, function() {
    // post processing goes here
});
0
 
kcalderAuthor Commented:
Thanks, I'll give that a try. In what form does the callback pick up data from the server? How should it be expressed - is it echo'd?
0
 
alien109Commented:
oops forgot to mention the other change, is case your eyes miss it. You forgot the "." between "$" and "post".

~ cheers
0
 
alien109Commented:
whatever is output from the php script, will be picked up in response object. You should actually change the callback function to this:

$.post("getAdminGroups.php", {selectDocZone: zoneSelected}, function(response) {
    // post processing goes here
    alert("response: " + response);
});

The output from the server can be now accessed from the response argument that is passed to the callback.
0
 
kcalderAuthor Commented:
Well I modified the code as you suggested and it's working to enable/disable the second select, which is good. But it doesn't appear to be connecting with the server file at all. In answer to your question about the meaning of (now) {selectDocZone: zoneSelected} I am trying to send this key: value pair which represent the current option selected in the select with the id 'selectDocZone'. I am testing it by seeing if selectDocZone is being placed in the $_POST array thus

if (isset($_POST['selectDocZone']))
{
      echo '<script language="javascript" type="text/javascript">
                  <!--
                  alert("$_POST[selectDocZone] is set");
                  //-->
              </script>';
}

but this is not firing.
0
 
alien109Commented:
What comes back in the response (using the debug alert as I posted above)? Anything? What if you put an else statement on your conditional so that at least something always comes back and you can debug if the client is even making a successful request to the server.

Any way of seeing this on a public server?
0
 
kcalderAuthor Commented:
Nothing comes back even when I put an else statement in which indicates that it is not being called. I am receiving no error message about the PHP file not existing or anything.

I'm afraid that I don't have all this on a public server at the moment.
0
 
alien109Commented:
that says to me you might have a path error, or your php script has an error and is bombing.

what happens if your php script only does this:

<?php
print("test");
?>

does it work then? if not - then we can probably narrow it down to maybe the pathname is incorrect.
0
 
kcalderAuthor Commented:
It's definitely odd and I can't work out why it's not connecting. Both the calling file and the php file are in the same folder so there is no pathname as such, but why would it not call it? There's no php at all in the first example so it's not surprising that it works.
0
 
kcalderAuthor Commented:
In fact I have other jQuery functions with calls to difference php files located in the same folder and none of them are connecting to their respective php files. So this is bound to be something obvious that I am missing!
0
 
kcalderAuthor Commented:
I'm going to award you the points as I think that the jQuery code is working fine now. But I am at a loss as to know why I am getting no response from the php files so I'll have to raise another question on that. Thanks for your perseverance!
0
 
alien109Commented:
Of course. Glad to help. :)
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 10
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now