placing PHP Variables inside javascript file - php

Question

As per title.
I have a piece of jQuery that looks like the following
$("<div class='creditCardDetails' id='usercurrentccbox'>
<div class='creditCard'>
<div class='cardChoice'>
<span>Choose Card Type</span>
<input name='cctype' type='radio' value='V' class='lft-field' id='visa' />
<label for='visa'></label>
<input name='cctype' type='radio' value='M' class='lft-field' id='mastercard' />
<label for='mastercard'></label><input name='cctype' type='radio' value='A' class='lft-field' id='amex' />
<label for='amex'></label>
</div>
<!--cardChoice-->
<div class='cardNumber'>
<input name='ccn' id='ccn' type='text' class='long-field' value='<?php echo MaskCreditCard($loggedInfo[ccn]);?>' maxlength='19' readonly />
</div>
<div class='cardCVV'>
<input name='cvv' id='cvv' type='text' maxlength='5' class='small-field' />
</div>
<div class='creditCardName'>
<input name='ccname' id='ccname' type='text' class='long-field' value='<?php echo $loggedInfo[ccname];?>' readonly/>
</div
<div class='cardDate'>
<input name='exp1' id='exp1' type='text' maxlength='2' class='small-field' value='<?php echo $loggedInfo[ccm];?>' readonly /><input name='exp2' id='exp2' type='text' maxlength='4' class='small-field' value='<?php echo $loggedInfo[ccy];?>' readonly />
</div>
</div><!--creditCard-->").insertAfter("#paymentCardChoice");
But as you'll see it has PHP Variables, if I have this embedded into my PHP file this works but I want to keep the PHP file as short as possible and placed this code inside a .js file and of course my variables only display the text of the PHP not the variable its self.
The variables I am trying to call are defined already in a config.php file.
Would I need to use something like this? if so I'm stuck with how I would call the variables in the code above.
$.post('phpfile.php', qString, function (data) {
}, "json");

Answer 1

PHP code will not execute in a .js file. A very simple workaround is to put your JavaScript+PHP code in a .php file; and set the content type header, for example:
<?php
#
# script.js.php
#
header("Content-type: text/javascript");
?>
$("<div><?php echo $foo; ?></div>");
You will find the json_encode function very handy for converting just about any PHP variable (string, number, arrays etc) into valid JavaScript. This function takes care of escaping characters such as ", \, \n etc which could break your JavaScript code. Following example demonstrates how you can pass arbitrary PHP variables to your JavaScript code:
<?php
#
# script.js.php
#
header("Content-type: text/javascript");
?>
var config = <?php echo json_encode(array(
"foo" => "foo",
"bar" => "bar",
"baz" => array(
"baz1",
"baz2"
)
)); ?>;
You can include "PHP-powered JavaScript" file in your PHP page using the <script src> tag:
<script type="text/javascript" src="script.js.php"></script>

Answer 2

If you place it in a separate .js file, it will not work since Javascript is client side and PHP is server side.
Your PHP variable only works now since it is declaired earlier in the page before you insert your javascript, so it is rendered when the page loads.

Answer 3

you can have a PHP file which will include your config.php file
include("config.php");
and then you can have your jquery code within script tags
<script>
// you jquery code with php config variables
</script>

Answer 4

.js
var qString = 'selectedID=' +selectedID;
$.post('/assets/inc/get-logged-info-card.php', qString, function (results) {
$("<div class='creditCardDetails' id='usercurrentccbox'>
<div class='creditCard'>
<div class='cardChoice'>
<span>Choose Card Type</span>
<input name='cctype' type='radio' value='V' class='lft-field' id='visa' />
<label for='visa'></label>
<input name='cctype' type='radio' value='M' class='lft-field' id='mastercard' />
<label for='mastercard'></label><input name='cctype' type='radio' value='A' class='lft-field' id='amex' />
<label for='amex'></label>
</div>
<!--cardChoice-->
<div class='cardNumber'>
<input name='ccn' id='ccn' type='text' class='long-field' value='"+results[0].maskccn+"' maxlength='19' readonly />
</div>
<div class='cardCVV'>
<input name='cvv' id='cvv' type='text' maxlength='5' class='small-field' />
</div>
<div class='creditCardName'>
<input name='ccname' id='ccname' type='text' class='long-field' value='"+results[0].ccname+"' readonly/>
</div
<div class='cardDate'>
<input name='exp1' id='exp1' type='text' maxlength='2' class='small-field' value='"+results[0].ccm+"' readonly /><input name='exp2' id='exp2' type='text' maxlength='4' class='small-field' value='"+results[0].ccy+"' readonly />
</div>
</div><!--creditCard-->").insertAfter("#paymentCardChoice");
}, "json");
.php
<?php
$selectedID = $_POST['selectedID'];
$q = "SELECT * FROM tbl_user WHERE user_id = '$selectedID'";
$sql = mysql_query($q);
$results = array();
while($row = mysql_fetch_array($sql))
{
$results[] = array(
'cct' => $row['user_cct'],
'ccn' => $row['user_ccn'],
'maskccn' => MaskCreditCard($row['user_ccn']),
'ccname' => $row['user_ccname'],
'ccm' => $row['user_date_m'],
'ccy' => $row['user_date_y']
);
}
echo json_encode($results);
?>