Including HTML/PHP in JQuery

Question

I am developing a website for a manufacturing company using a combination of PHP HTML CSS and JQuery. I want the user to be able to click on a "Contact Us" button to open a modal window with a table of sales reps that they can contact for quotes and other such contact information. I have written a PHP file that will generate and format all of the information that I am interested in displaying, is there a way that I can include this into the JQuery .ModalWindow() call?

JQuery:

<script type="text/javascript">
$(document).ready(function(){
$('.modalLink').ModalWindow();
$('#ContactUs').ModalWindow({
height: '750', width: '750',title: 'Does This Work?',description: 'I Want To Include the PHP here'});});
</script>

The ModalWindow "Class":

(function($){
    // Defining our jQuery plugin

$.fn.ModalWindow = function(prop){

    // Default parameters

    var options = $.extend({
        height : "250",
        width : "500",
        title:"Hey James isn't this slick?",
        description: "This is where we put the stuff that does the things.",
    },prop);

    return this.click(function(e){
        add_block_page();
        add_popup_box();
        add_styles();

        $('.ModalWindow').fadeIn();
    });

     function add_styles(){ 
                    /*Block page overlay*/
        var pageHeight = $(document).height();
        var pageWidth = $(window).width();

        $('.ModalWindow').css({ 
            'position':'absolute', 
            'top':'50%',
            'left':'50%',
            'margin':'-125px auto auto -250px',             
            'display':'none',
            'height': options.height + 'px',
            'width': options.width + 'px',
            'border':'1px solid #fff',
            'box-shadow': '0px 2px 7px #292929',
            '-moz-box-shadow': '0px 2px 7px #292929',
            '-webkit-box-shadow': '0px 2px 7px #292929',
            'border-radius':'10px',
            '-moz-border-radius':'10px',
            '-webkit-border-radius':'10px',
            'background': '#f2f2f2', 
            'z-index':'50',
        });
        $('.ModalClose').css({
            'position':'relative',
            'top':'0px',
            'left':'0px',
            'float':'right',
            'display':'block',
            'height':'30px',
            'width':'30px',
            'background': 'url(/PictureLibrary/ModalWindowImages/CloseButton.png) no-repeat',
        });

        $('.BlockPage').css({
            'position':'absolute',
            'top':'0',
            'left':'0',
            'background-color':'rgba(0,0,0,0.6)',
            'height':pageHeight,
            'width':pageWidth,
            'z-index':'10'
        });
        $('.InnerModalWindow').css({
            'background-color':'#fff',
            'height':(options.height - 50) + 'px',
            'width':(options.width - 50) + 'px',
            'padding':'10px',
            'margin':'15px',
            'border-radius':'10px',
            '-moz-border-radius':'10px',
            '-webkit-border-radius':'10px'
        });
    }

     function add_block_page(){
        var block_page = $('<div class="BlockPage"></div>');

        $(block_page).appendTo('body');
    }

     function add_popup_box(){
         var pop_up = $('<div class="ModalWindow"><a href="#" class="ModalClose"></a><div class="InnerModalWindow"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
         $(pop_up).appendTo('.BlockPage');

         $('.ModalClose').click(function(){
            $(this).parent().fadeOut().remove();
            $('.BlockPage').fadeOut().remove();              
         });
    }

    return this;
};

 })(jQuery);

Ken Wheeler's answer is correct. In the interest of clarity: you can't "include" PHP in a client-side JavaScript/jQuery modal, but you can tell jQuery to send a request to the server to execute the script and then display the output of the script in the modal. — George Cummins
– George Cummins, Commented Apr 21, 2014 at 20:54
Thank you, although I'm not quite sure what is happening in Ken's answer and am looking for a little bit of elaboration. — PugsOverDrugs
– PugsOverDrugs, Commented Apr 21, 2014 at 21:00

Ken Wheeler · Accepted Answer · 2014-04-21 20:52:45Z

2

Add an contentURL option, and then use $.ajax to grab the content and use $('.ModalWindow').html(result) to populate the window.

answered Apr 21, 2014 at 20:52

Ken Wheeler

1,95813 silver badges12 bronze badges

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

2 Comments

PugsOverDrugs Over a year ago

Im not quite sure I understand what you are saying. Would you be able to elaborate some more?

Ken Wheeler Over a year ago

If you want to load a php page into a javascript modal, say your page is at mysite.com/popup.php. You need to make an ajax request to that URL. When the request comes back, in a success method, set the modal window's content to the response. api.jquery.com/jQuery.ajax

Charlie Liu · Accepted Answer · 2014-04-21 21:26:15Z

0

<script type="text/javascript">
(document).ready(function(){
$('.modalLink').ModalWindow();
$('#ContactUs').ModalWindow({
height: '750', width: '750',title: 'Does This Work?',description: <?php echo $description; ?>});});
</script>

not sure if this works for you as this answer is quite trivial but : if you have your php function that generates and formats all the information that will be displayed. Just put that information in string format and you can echo it out directly. This is obviously because php is server side while html and JQuery are front-end.

ex: $description='<div id="container"><p>hello world<p><a href="http://google.com">google link</a></div>';

edited Apr 21, 2014 at 21:26

answered Apr 21, 2014 at 20:55

Charlie Liu

1051 silver badge9 bronze badges

1 Comment

Jay Blanchard Over a year ago

Can you go into a little more detail so that the OP understands what you're doing with this code?

Collectives™ on Stack Overflow

Including HTML/PHP in JQuery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related