Using Jquery to target element outputted by PHP

Question

First I'll display the code. It's 2 pages, the first page we'll call "form.php" the second page we'll call "display.php".

FORM.PHP

class display {

  var $host;
  var $username;
  var $password;
  var $table;

  public function display_public() {
$q = "SELECT * FROM agend_items ORDER BY created DESC LIMIT 3";
$r = mysql_query($q);

if ( $r !== false && mysql_num_rows($r) > 0 ) {
  while ( $a = mysql_fetch_assoc($r) ) {
    $date = stripslashes($a['date']);
    $bodytext = stripslashes($a['bodytext']);
    $time = stripslashes($a['time']);
    $entry_display .= <<<ENTRY_DISPLAY

   <h1>00:59</h1>
<div class="post" name="post" >
    <h2 name="date">
        $date
    </h2>
    <h3 class="time">
    $time
    </h3>
    <p id="agenda">
      $bodytext
    </p>
</div>

ENTRY_DISPLAY;
  }
} else {
  $entry_display = <<<ENTRY_DISPLAY

<h2> This Page Is Under Construction </h2>
<p>
  No entries have been made on this page. 
  Please check back soon, or click the
  link below to add an entry!
</p>

ENTRY_DISPLAY;
}
$entry_display .= <<<ADMIN_OPTION

<p class="admin_link">
  <a href="{$_SERVER['PHP_SELF']}?admin=1">Add a New Entry</a>
</p>

ADMIN_OPTION;

return $entry_display;
  }

 public function display_admin() {
return <<<ADMIN_FORM

<form action="{$_SERVER['PHP_SELF']}" method="post">

  <label for="date">Date:</label><br />
  <input name="date" id="date" type="date" maxlength="8" />
  <div class="clear"></div>

  <label for="time">Time:</label><br />
  <input name="time" id="time" type="time" maxlength="8" />
  <div class="clear"></div>

  <label for="bodytext">Body Text:</label><br />
  <textarea name="bodytext" id="bodytext"></textarea>
  <div class="clear"></div>

  <input type="submit" value="Input Agenda Item" />
</form>

<br />

<a href="display.php">Back to Home</a>

ADMIN_FORM;
  }

  public function write($p) {
    if ( $_POST['date'] )
  $date = mysql_real_escape_string($_POST['date']);
     if ( $_POST['time'] )
  $time = mysql_real_escape_string($_POST['time']);
    if ( $_POST['bodytext'])
  $bodytext = mysql_real_escape_string($_POST['bodytext']);
    if ( $date && $bodytext && $time ) {
  $created = time();
  $sql = "INSERT INTO agend_items VALUES('$date','$bodytext','$created','$time')";
  return mysql_query($sql);
    } else {
  return false;
    }
  }

  public function connect() {
    mysql_connect($this->host,$this->username,$this->password) or die("Could not     connect. "     . mysql_error());
    mysql_select_db($this->table) or die("Could not select database. " .     mysql_error());

return $this->buildDB();
  }

  private function buildDB() {
$sql = <<<MySQL_QUERY
CREATE TABLE IF NOT EXISTS agend_items (
date        VARCHAR(12),
bodytext    TEXT,
created     VARCHAR(100),
time        VARCHAR(8)
)
MySQL_QUERY;

return mysql_query($sql);
  }

}

?>

DISPLAY.PHP

$(document).ready(function(){ 
$('button').mousedown(function(){ 

if ($('h3').text() == "00:59") {
alert("Yup"); return true;}
else { alert("Nope");return false;};
});
});
 </script>
</head>

<body>

<?php

  include_once('_class/form.php');
  $obj = new form();
  $obj->host = 'localhost';
  $obj->username = '*****';
  $obj->password = '*****';
  $obj->table = 'agend_items';
  $obj->connect();

  if ( $_POST )
  $obj->write($_POST);

  echo ( $_GET['admin'] == 1 ) ? $obj->display_admin() : $obj->display_public();

?>
<?php
setlocale(LC_ALL,"hu_HU.UTF8");
echo(strftime("%Y. %B %d. %A. %X %Z"));
?>

<button>Check Work</button>

The output is: 00:59 (h1) 2013-05-24 (h2) 00:59 (h3) This is text (p)

The issue I'm running into is if I run the jquery script, it will always return false on the h2, h3, p that were created with $time, $date, $bodytext.

If in the h1 I just simply tell the php the h1 is "00:59", the code executes perfectly.

If the time that was outputted in h3 is 00:59, and I use the jquery to search for that it returns false everytime, same if I search for the date or bodytext.

It seems like the code will fail every time if it's searching for the text outputted by one of the php variables $time, $date, $bodytext. I cannot figure out why it is unable to find this. The DOM elements should all be there for it to find..

You can ignore the h1, it was only inserted to check if the jquery script was working in the plainest form, which it does. It's only when targeting the elements text that was created by using the information taken from the database

Answer 1

Try putting each element in one line, so H2 should be written like this without line breaks:

<h2 name="date">$date</h2>

This might help with .text finding exactly the date string without being tripped by extra spaces or end of line character.

I also suggest you use console.log() to see what it's actually seeing:

console.log( $('h2').text() );

Using Jquery to target element outputted by PHP

Question

1 answers

solution1
2 2013-05-24 07:42:50

Using Jquery to target element outputted by PHP

Question

1 answers

solution1 2 2013-05-24 07:42:50

solution1
2 2013-05-24 07:42:50