javascript(ajax) and php working together?

Question

I have a problem that my Js file is not recognizing a php variable built by ajax. Here is an example:

index.php:

<script src="js.js">
</script>
<?
include('build.php');
<div id="brand">
<?
   echo $brandinput;
?>
</div>
//....more code
?>

build.php:

<script type="text/javascript">

    $(document).ready(function(){
     $.ajax({
       crossOrigin: true,
       dataType: "jsonp",
       type: "GET",
       url: "getBrand.php",
       data: info,
       success: function(data){
             $("#result").html(data); 
       }

     });
     </script>
     <?php $brandinput='<div id="result"></div>'; 
      ?>

js.js:

$(document).ready(function(){
//dosomething with div's in index.php
}

So, I'll try to explain this in the easiest way. My index.php includes a build.php which as you can see calls ajax to retrieve data from another server. This data is located in a php variable ($brandinput) which will contain many <div>,<input>,... etc. Then index.php echo $brandinput, showing all the content of the variable. But I have a js.js which change appearances in div's, input's, etc.. and is this js which is not recognizing the content of the variable $brandinput.

I'd like to know if you have more ideas or what am I doing wrong... All the code is working well, I tested many times (except for what I said before) The ajax call work well and Index.php displays $braninput correctly.

p.s. $brandinput is something like this:

<div id='BlackBerry'><img src='..\/images\/supporteddevices\/blackberry-logo.jpg' alt='blackberry-logo' width='75'><br><input class='adjustRadio' type='radio'

and yeah it works well too.

1. Why are you using JSONP for same domain request? 2. `$ brandinput` is what you set it to be on build.php 3. There is no tag called textfield in HTML. You probably meant textarea — Yaron U., Sep 13 '14 at 23:04
1. I retrieve data from another server, so is not same domain.2. yes it is. 3. yeah sorry I changed that in the last minute, edited now. — Henry Alpaca Salas, Sep 14 '14 at 01:05

score 0 · Answer 1 · edited May 23 '17 at 12:21

You can try moving your <script> tag to after your php codes like this:

<? include('build.php'); ?>
<div id="brand">
    <? echo $brandinput; ?>
</div>
<script src="js.js"></script>

//....more code

On a slightly different note, you should consider avoid embedding/intermixing PHP codes with HTML and Javascript. Take a look at this post for better ways way "passing data from PHP to Javascript".

code-jaff · Accepted Answer · 2014-09-14T01:57:54.740

Actually this is how it supposed to be working, what you need to do is to wait for the ajax request to finish first before executing the functions in js.js

try this way

// in build.php
$(document).ready(function () {
    var promise = $.ajax({
        crossOrigin: true,
        dataType: "jsonp",
        type: "GET",
        url: "getBrand.php",
        data: info,
        success: function (data) {
            $("#result").html(data);

            //dosomething with div's in index.php
        }
    });
});

or (assuming js.js is loaded after the script within build.php, or js.js has to be loaded after it)

// in build.php
$(document).ready(function () {
    var promise = $.ajax({
        crossOrigin: true,
        dataType: "jsonp",
        type: "GET",
        url: "getBrand.php",
        data: info,
        success: function (data) {
            $("#result").html(data);
        }
    });
});

// in js.js
$(document).ready(function () {
    promise.then(function (data) {
        //dosomething with div's in index.php
    });
});

P.S

$brandinput just hold the string whatever assigned to, and will never be changed with ajax request, where ajax success handler just manipulate the rendered DOM directly in the client side.

Just did that but it didn't work. I'm now thinking that my js.js is not reading the content of `$brandInput`. But my html did read it cause it shows me exactly what I want on the screen when I use `echo $brandInput`. I'll keep looking for some answers. — Henry Alpaca Salas, Sep 14 '14 at 03:12

javascript(ajax) and php working together?

2 Answers2