PHP variable inside a Javascript function outputs the variable and not the value

Question

What I want to do is that only when I click on a div with id="$project['slug']", it will load the iframe inside that div. So, i removed the src attribute from the iframe, and add it on onclick event. I have this in my HTML/PHP:

<div class="box" id="<?=$project['slug']?>" onclick="load_frame();">
    <iframe id="frame_<?=$project['slug']?>" frameborder="0"></iframe>
</div>

Js:

function load_frame() {
    id = location.hash.replace('#', '');
    var source = "<?php echo $project['video']; ?>";
    $('#frame_'+id).attr("src", source);
}

Unfortunately, when I inspect the iframe it shows: src="<?=$project['video']?>" instead of the value that the variable holds. Do you have any idea what i am doing wrong? thank you!

Think about what you're doing. A .js file is delivered to the browser as is, not passed through PHP (by default), so there's no way to insert PHP variables into it. Put the video URL into a data attribute instead. — user1233508
– user1233508, Commented Dec 26, 2012 at 11:16
@DCoder Thanks so much for the tip! I learned something today :) It works this way too, but i gave accept to Amith for he provided a more complex answer. Thank you! — musicvicious
– musicvicious, Commented Dec 26, 2012 at 11:30

Amyth · Accepted Answer · 2012-12-26 11:24:04Z

2

jQuery is a client side language and have access only to the DOM elements once they have been rendered. So what you need to do is store $project['video'] variable in a hidden field and then using the id of that field get access to the rendered data.

Also, i noticed that you should use <?php instead of <?

You may try something like this.

<div class="box" id="<?php echo $project['slug']; ?>">
    <iframe id="frame_<?php echo $project['slug']; ?>" frameborder="0"></iframe>
    <input type="hidden" id="<?php echo $project['slug']; ?>" value="<?php echo $project['video']" />
</div>

Then in jQuery do:

$(document).ready(function(){
    $('.box').click(function(){
        var slug = $(this).attr('id');
        var source = $('input#' + slug).val();
        $('iframe#' + slug).attr("src", source);
    });
});

edited Dec 26, 2012 at 11:24

answered Dec 26, 2012 at 11:12

Amyth

33k28 gold badges97 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amyth Over a year ago

oops, forgot to change the iframe statement to use slug var. Updated!

BenMorel · Accepted Answer · 2014-01-04 19:35:49Z

1

add hidden input on html page

 <input type="hidden" id="hidsource" value="<?php echo $project['video']" />

edit your function in js like this

function load_frame() {
id = location.hash.replace('#', '');
$('#frame_'+id).attr("src", $('input#hidsource').val());

}

hope this will work

edited Jan 4, 2014 at 19:35

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Dec 26, 2012 at 11:21

Nipun Jain

6014 silver badges6 bronze badges

Comments

johankj · Accepted Answer · 2012-12-26 11:12:14Z

0

You might not have the shorthand syntax enabled on the server. Try standard PHP instead:

<?php echo $project['slug']; ?>

answered Dec 26, 2012 at 11:12

johankj

1,76716 silver badges35 bronze badges

Collectives™ on Stack Overflow

PHP variable inside a Javascript function outputs the variable and not the value

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related