CODEWITHSUNDEEP
phpjquery
LTech
LTech

Reputation: 1761

call a function within jquery dialog()

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();?

Upvotes: 0

Views: 2685

Answers (3)

footacuu
footacuu

Reputation: 41

$('#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({ 
    ......
});

Upvotes: 4

COLD TOLD
COLD TOLD

Reputation: 13579

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>

Upvotes: 0

gpasci
gpasci

Reputation: 1440

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

Upvotes: 0

Related Questions