2

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");
Improve this question

4 Answers 4

Reset to default
3

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I have never liked this idea but it is certainly possible
I'm not sure about it, but I think the .php file will be executed each time a users enters the webpage. I mean .js won't be cached by browser. It can slow the server performance. ( i can be wrong )
You can make the .php.js files cacheable by setting the expires headers. Should you do it or not depends on whether the content of file is static or volatile.
0

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.

Improve this answer

Comments

0

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>
Improve this answer

Comments

0

.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);
?>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.