Handling PHP with jQuery .html()

Question

I am trying to get jQuery to change the html of an element and include PHP. It all works fine apart from PHP. Here is what I have:

$('.gridheader').each(function(index){
    $(this).toggle(function (){
        $('.gridimage:eq('+index+'), .gridinfo:eq('+index+')').slideToggle();
        $('.gridheadinfo:eq('+index+')').html('Click to close <img src="<?php echo base_url() ?>/assets/images/closetab.png" width="10" height="10" />');
    }, function(){
        $('.gridimage:eq('+index+'), .gridinfo:eq('+index+')').slideToggle();
        $('.gridheadinfo:eq('+index+')').html('Click for info <img src="<?php echo base_url() ?>/assets/images/scrollup.png" width="11" height="10" />');
    });
});

I have the image originally in there (HTML):

<div class="float-left">Kredible</div><div class="float-right gridheadinfo">Click for info <img src="<?php echo base_url() ?>assets/images/scrollup.png" width="11" height="10" /></div></div>

The HTML works fine, however when I change it using jQuery the image doesn't show. Ive looked at it in the inspector after the change and the PHP shows up as PHP instead of converting to HTML?

Im rather puzzled.

Thanks.

That would be because PHP is executed server side, while javascript is changing the HTML directly in the clients browser — Joe Day
– Joe Day, Commented Aug 19, 2012 at 23:33
Generate an element that holds reference to the PHP variable on page load. <input type="hidden" id="baseURL" name="baseURL" value="<?php echo base_url(); ?>" />. Then you can reference it in the HTML with <img src="'+$('#baseURL').val()+'/assets/images/closetab.png" width="10" height="10"/> — Ohgodwhy
– Ohgodwhy, Commented Aug 19, 2012 at 23:37

Samson · Accepted Answer · 2012-08-19 23:45:57Z

2

Save your server-side variable and then use it:

      var url="<?php echo base_url() ?>"; 
    //this will be parsed by the php interpreter at page load so url will be "localhost/subdomain/" probably. 

        $('.gridheader').each(function(index){
            $(this).toggle(function (){
                $('.gridimage:eq('+index+'), .gridinfo:eq('+index+')').slideToggle();
                $('.gridheadinfo:eq('+index+')').html('Click to close <img src="'+url+'/assets/images/closetab.png" width="10" height="10" />');
    //use it here
            }, function(){
                $('.gridimage:eq('+index+'), .gridinfo:eq('+index+')').slideToggle();
                $('.gridheadinfo:eq('+index+')').html('Click for info <img src="'+url+'/assets/images/scrollup.png" width="11" height="10" />');
            });
        });

edited Aug 19, 2012 at 23:45

answered Aug 19, 2012 at 23:40

Samson

2,8317 gold badges40 silver badges55 bronze badges

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

Comments

Marian Frische · Accepted Answer · 2012-08-19 23:39:28Z

0

Including a php file only influences the html while being on the server.

Thus, the changed code won't have any affect, because the php script is not executed.

You could load the content of a html file and than put it into your page. SQL would not be possible from within that, of course.

answered Aug 19, 2012 at 23:39

Marian Frische

931 gold badge2 silver badges7 bronze badges

Collectives™ on Stack Overflow

Handling PHP with jQuery .html()

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related