call a function within jquery dialog()

Question

I am using jquery dialog() so a popup comes up. I want to call a php function to display information in the popup. my code is

 $(document).ready(function() {
                $( "#dialog-form" )
                    .dialog({
                        autoOpen: false,
                        title: "Add Images",
                        //buttons: {"Cancel": function() { $(this).dialog("close"); }},
                        draggable: false,
                        resizable: false 
                });

                $("#addImage").click(function() {
                    $( "#dialog-form" ).dialog("open");
                    return false;
                });
                });
    <button id="addImage">Add Image</button>
        <div id="dialog-form"> <?php function show_php(); ?>
        </div>

Then I have function below: function show_php( echo "I need to put php code here" ); How do I call the function show_php(); is this possible using jquery dialog();?

PHP is executed first. The result is sent to the browser. It then executes the JavaScript. It does not know about PHP. Of course you can put whatever show_php() returns inside the HTML before it is sent to the client. Or you can load the content via Ajax. — Felix Kling
– Felix Kling, Commented Mar 3, 2012 at 20:15
You can make an ajax call to server to a file that runs your function and returns either html or data. If it is html it can be inserted into the dialog either before dialog opens or from some user event inside the dialog. Need to know more about what you want to happen and based on what event — charlietfl
– charlietfl, Commented Mar 3, 2012 at 20:20

footacuu · Accepted Answer · 2012-10-25 22:38:14Z

4

$('#addImage').click(function() {
    $('#dialog-form').load('show.php').dialog({
        autoOpen : false,
        title    : 'dialog title',
        width    : 400,
        position : ['center', 'middle'],
        modal    : true,
        resizable: false,
        buttons: {
            'OK' : function() {
                $(this).dialog("close");
            }
        }
    }).dialog('open');
    return false;
});

show.php
<?php
    echo "this is show.php";
?>

or

$('<div />').load('show.php').dialog({ 
    ......
});

answered Oct 25, 2012 at 22:38

footacuu

412 bronze badges

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

1 Comment

JasonWyatt Over a year ago

You might want to explain to the OP about how you never directly call a PHP function from jQuery, but have to do it via AJAX.

gpasci · Accepted Answer · 2012-03-03 20:16:59Z

0

Use the open event of the query dialog to trigger an ajax call and populate it.

$( "#dialog-form" ).dialog({
   open: function(event, ui) {
     // Here you make an ajax call to load the content of the dialog from the server
   }
});

answered Mar 3, 2012 at 20:16

gpasci

1,44011 silver badges16 bronze badges

Comments

COLD TOLD · Accepted Answer · 2012-03-03 20:26:00Z

you can use ajax by modifying your current file like this 


 $(document).ready(function() {
                    $( "#dialog-form" )
                        .dialog({
                            autoOpen: false,
                            title: "Add Images",
                            //buttons: {"Cancel": function() { $(this).dialog("close"); }},
                            draggable: false,
                            resizable: false 
                    });

                    $("#addImage").click(function() {
                         $.ajax({
                    url: "show.php", //it now afile where your function is and you want to run
                     type: "GET",        
                    data: data,  //any data you want to send to php file/function   
                  cache: false,
                 success: function (html) {  


                //add the content retrieved from ajax and put it in the #content div
                $('#dialog-form').html(html); //will add the content from the  php to div 

            }       
        });
                        $( "#dialog-form" ).dialog("open");
                        return false;
                    });
                    });
        <button id="addImage">Add Image</button>
            <div id="dialog-form"> <?php function show_php(); ?>
            </div>

Collectives™ on Stack Overflow

call a function within jquery dialog()

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