Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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!

share|improve this question
2  
are u using external js ??? – Nipun Jain Dec 26 '12 at 11:11
Seems you mix asp and php syntax. Change = to echo – mplungjan Dec 26 '12 at 11:11
@NipunJain Yes, i am using external js. – musicvicious Dec 26 '12 at 11:15
1  
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. – DCoder Dec 26 '12 at 11:16
check updated answer. – Amyth Dec 26 '12 at 11:19
show 1 more comment

3 Answers

up vote 2 down vote accepted

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);
    });
});
share|improve this answer
oops, forgot to change the iframe statement to use slug var. Updated! – Amyth Dec 26 '12 at 11:24
it works, thank you! much appreciated! – musicvicious Dec 26 '12 at 11:26
up vote 1 down vote

add hiden input on html page 

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

edit your funtion in js like this 

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

}

hope this will work

share|improve this answer
up vote 0 down vote

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

<?php echo $project['slug']; ?>
share|improve this answer
i tried standard php too, and still nothing. – musicvicious Dec 26 '12 at 11:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.