Link to home
Create AccountLog in
Avatar of peter_coop
peter_coopFlag for United Kingdom of Great Britain and Northern Ireland

asked on

pass php variable to jquery

I need to pass a variable from php to jquery. I know about client and server side, but is there a way to do it. For example. I have the following code which cycles through records and displays accordingly. I need to pass the message variable through to jquery from a click event. Could someone point me in the right direction. Thanks


mysql_select_db($database_conn, $conn); 
		$query = "SELECT * FROM contact_frm WHERE to_frm = '$_SESSION[kt_name_usr]' AND read_frm = 1 order by date_frm desc"; 
		$result = mysql_query($query) or die(mysql_error()); 
		$a=0; /* VARIABLE*/ 
			if (mysql_num_rows($result)) 
			{
			
				 
				//$rowdate = date("d/m/Y",strtotime($row['destroyed_date'])); 
			
				while($row = mysql_fetch_array($result)) 
				{
			
					$rowdate = date("d/m/Y",strtotime($row['date_frm']));
					$id = $row['id_frm'];
					$from = $row['from_frm'];
					$subject = $row['subject_frm'];
					$message = $row['message_frm'];
					
					echo '<div class="msgTrue" style="background-color:#eee;">' . '<img src="images/sml_new_mail_icon.jpg">' . $subject . '<div style="float:right;margin-right:35px;margin-top:5px;font-size:9px;">' . $rowdate . '</div>';
					echo '<br />';
					echo '<span style="font-weight:bold;">' . $from . '</span>';
					
					echo '</div>';
					echo '<br />';
			
				}
			}
			else
			{
				echo '<span style="font-size:11px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:normal;margin-left:2px;font-style: italic">' . 'There is currently no new mail for you.' . '</span>' . '<br />';
			}

Open in new window

Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

jQuery will only understand what is in the browser client-side, so it's up to you to generate your HTML in such a way that jQuery can get at the info. You can store arbitrary data in the HTML and then access it using jQuery. So you could do something like this:

$message = $row['message_frm'];
printf("<div class='msgTrue' style='background-color:#eee;' data-message='%s'>", $message);

Open in new window

The value of $message is now stored in the data-message attribute of each DIV and can be accessed like this:

$('.msgTrue').click(function() {
     alert($(this).data('message'));
});

Open in new window

Avatar of peter_coop

ASKER

@Chris

What does the '%s' represent? Thanks
@Chris

I have amended my code and all that is appearing is the $from var. Nothing happens when I click. No alert. Also, is data-message html5 only?. Thanks

printf("<div class='msgTrue' style='background-color:#eee;' data-message='%s'>", $message) . '<img src="images/sml_new_mail_icon.jpg">' . $subject . '<div style="float:right;margin-right:35px;margin-top:5px;font-size:9px;">' . $rowdate . '</div>';
	echo '<br />';
	echo '<span style="font-weight:bold;">' . $from . '</span>';
					
	echo '</div>';
	echo '<br />';

Open in new window

Hey Peter,

The %s is a place holder for the printf() function, and is a way of outputting a formatted string. It kind of works like an echo statement with variables:

$name = "chris";
printf("<p>My Name is %s</p>", $name);

Open in new window

You can also pass in more than one variable:

$color = "yellow";
$fruit = "banana";
printf("The %s is %s!!!", $fruit, $color) //outputs 'The banana is yellow!!!'

Open in new window

In your code, you're trying to concatenate the rest of your string to the printf function() which doesn't work. I probably made it more complicated than it needed to be by using printf() instead of sticking with your echos. Have a look at this:

echo '<div class="msgTrue" style="background-color:#eee;" data-message="' . $message . '">' . '<img src="images/sml_new_mail_icon.jpg">' . $subject . '<div style="float:right;margin-right:35px;margin-top:5px;font-size:9px;">' . $rowdate . '</div>';
echo '<br />';
echo '<span style="font-weight:bold;">' . $from . '</span>';
echo '</div>';
echo '<br />';

Open in new window

The data attributes are technically HTML5, but jQuery gives you the ability to store and retrieve the data anyway, so it makes sense to use them.

FYI. Here's how I would do it. It achieve the same as your code, I just find it a little neater and easier to debug if needed, and you tent to not get messed up with all the single and double quotes!

$myString = <<<EOF
<div class='msgTrue' style='background-color:#eee;' data-message='%s'>
	<img src="images/sml_new_mail_icon.jpg">%s
	<div style="float:right;margin-right:35px;margin-top:5px;font-size:9px;">%s</div><br />
		<span style="font-weight:bold;">%s</span>
	</div>
	<br />
EOF;
printf($myString, $message, $subject, $rowdate, $from);

Open in new window

Chris

I have amended my code and I am now getting error of

 
unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING

Open in new window

I think it has to do with braces. When I take your code amendments out, it balances fine. Have I marked up incorrectly? Thanks

if (mysql_num_rows($result)) 
			{
			
				 
				//$rowdate = date("d/m/Y",strtotime($row['destroyed_date'])); 
			
				while($row = mysql_fetch_array($result)) 
				{
			
					$rowdate = date("d/m/Y",strtotime($row['date_frm']));
					$id = $row['id_frm'];
					$from = $row['from_frm'];
					$subject = $row['subject_frm'];
					$message = $row['message_frm'];
					
					$myString = <<<EOF
						<div class='msgTrue' style='background-color:#eee;' data-message='%s'>
							<img src="images/sml_new_mail_icon.jpg">%s
						<div style="float:right;margin-right:35px;margin-top:5px;font-size:9px;">%s</div><br />
							<span style="font-weight:bold;">%s</span>
						</div>
						<br />
					EOF;
					printf($myString, $message, $subject, $rowdate, $from);
					
			
				}
			}
			else
			{
				echo '<span style="font-size:11px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:normal;margin-left:2px;font-style: italic">' . 'There is currently no new mail for you.' . '</span>' . '<br />';
			}

Open in new window

Chris

I have corrected html but nothing happens when I click. Is code correct? Thanks

$(function() {
	$(".msgTrue").click(function() {
     //alert($(this).data('message'));
		 $("#msgTrueSubj").show(1000);
		 $(this).data('message');
});
	});

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Hans Langer
Hans Langer

hi,

you could just declare global variables, like this:


echo '<script>';
while($row = mysql_fetch_array($result)) 
{
	echo 'var id_frm= "' . $row['id_frm'] . '";';
	echo 'var from_frm= "' . $row['from_frm'] . '";';	
	echo 'var subject_frm= "' . $row['subject_frm'] . '";';	
	echo 'var message_frm= "' . $row['message_frm'] . '";';	
}
echo '</script>';


and then, you can use: id_frm,from_frm,subject_frm,message_frm   in you javascript code.
only the code after those lines can use those variables.

Open in new window

That would over-write the variable each time the record looped, leaving only the last record's values in place!
you are right, i missed that part, but it still be a diferent way to pass variables from php to js.
Chris

I need to display the result in a div and not an alert. That is why I commented out the alert code and tried to put result in a div. Thanks
OK. I just used the alert as an example. You can do whatever you like with it. To put it in a DIV with an ID of #message:

$('#message').html( $(this).data('message') );
Chris

I have replaced lines 16-23 with your last code amendment, but there are no records being displayed. The EOF; is at the start of the line on it's own. Thanks

if (mysql_num_rows($result)) 
			{
			
				 
				//$rowdate = date("d/m/Y",strtotime($row['destroyed_date'])); 
			
				while($row = mysql_fetch_array($result)) 
				{
			
					$rowdate = date("d/m/Y",strtotime($row['date_frm']));
					$id = $row['id_frm'];
					$from = $row['from_frm'];
					$subject = $row['subject_frm'];
					$message = $row['message_frm'];
					
					$myString = <<<EOF
					<div class='msgTrue' style='background-color:#eee;' data-message='%s'>
					<img src="images/sml_new_mail_icon.jpg">%s
					<div style="float:right;margin-right:35px;margin-top:5px;font-size:9px;">%s</div><br />
					<span style="font-weight:bold;">%s</span>
					</div>
					<br />
					<!-- The following end tag need to be at the start of the line -->
EOF;
					
			
				}
			}

Open in new window

Sorry Chris, my bad. Didn't include the printf statement. cheers
Thanks very much Chris for your help and patience.