CODEWITHSUNDEEP
phpjavascriptjquery
musicvicious
musicvicious

Reputation: 1093

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

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!

Upvotes: 0

Views: 195

Answers (3)

Nipun Jain
Nipun Jain

Reputation: 601

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

Upvotes: 1

Amyth
Amyth

Reputation: 32949

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);
    });
});

Upvotes: 2

johankj
johankj

Reputation: 1767

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

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

Upvotes: 0

Related Questions