Question

185

Opening jQuery UI Dialog box with dynamic content

rated 0 times [ 186] [ 1] / answers: 1 / hits: 20481 / 12 Years ago, tue, july 17, 2012, 12:00:00

I have a question about jQuery UI Dialog boxes and showing dynamic content from a database.

So I got a webapplication where I also need to make a admin module to manage all users and other information. I created a page that shows all users in a list, in every row I also made an edit button. I wanted to make it so that when you press on a users' edit button, a dialog box opens and shows all the user information and stuff in the dialog box.

So my question is, what is the best way to do this? I was thinking about making a PHP page where I execute the MySQL Query and show that in the dialog box, but I am sure there are better ways..

EDIT: Here is the code for the page as it is right now. I added a small placeholder dialogbox that I used for testing purposes.

Javascript:

script type=text/javascript> 

    jQuery(document).ready( function(){       

        jQuery(.edit-button).click( showDialog );



            //variable to reference window

            $myWindow = jQuery('#myDiv');



            //instantiate the dialog

            $myWindow.dialog({ height: 600,

                    width: 800,

                    modal: true,

                    position: 'center',

                    autoOpen:false,

                    title:'Bewerk therapeut',

                    overlay: { opacity: 0.5, background: 'black'}

                    });

            }



    );

//function to show dialog   

var showDialog = function() {

    $myWindow.show(); 

    //open the dialog

    $myWindow.dialog(open);

    }



var closeDialog = function() {

    $myWindow.dialog(close);

}

PHP:

<?php

//LEFT OUTER JOIN Vragen ON Vragen.bsn_nummer = Gebruikers.bsn_nummer

include_once 'classes/class.mysql.php';

$db = new Mysql();

$dbUsers = new Mysql();



$db->Query(SELECT * FROM USERS_users ORDER BY username ASC);

$db->MoveFirst();



echo <table>;

echo <tr><th> </th><th> </th><th>BSN Nummer</th><th>Gebruikersnaam</th>       <th>Voornaam</th><th>Achternaam</th></tr>;

while(! $db->EndOfSeek()) {

$row = $db->Row();

$dbUsers->Query(SELECT * FROM Gebruikers WHERE user_idnr = '{$row->user_idnr}');

$rowUser = $dbUsers->Row();

echo <tr><td><a class='del-button' href='#'><img src='afbeeldingen/edit-delete.png' /></a></td>

    <td><a class='edit-button' href='#'><img src='afbeeldingen/edit.png' /></a>  </td>

    <td>.@$rowUser->bsn_nummer.</td>      

    <td>.@$row->username.</td>

    <td>.@$rowUser->voornaam.</td>

    <td>.@$rowUser->achternaam.</td></tr>;

    }

    echo </table>;

?>

<div id=myDiv style=display: none>

<p>Gebruiker bewerken</p>

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cherish

Add To Favorites

Follow

Total Points: 734

Total Questions: 94

Total Answers: 86

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

answered 12 Years ago devinjadong · Accepted Answer

Nope. Sounds like you've got it right.

placeholder for the popup ->

<div id=popup></div>

jQuery ui dialog ->

$('#popup').dialog({

  autoOpen: 'false',

  modal: 'true',

  minHeight: '300px',

  minWidth: '300px',

  buttons: {

    'Save Changes': function(){

      $.ajax({

        url: 'path/to/my/page.ext',

        type: 'POST',

        data: $(this).find('form').serialize(),

        success: function(data){

          //some logic to show that the data was updated

          //then close the window

          $(this).dialog('close');

        }

      });

    },

    'Discard & Exit' : function(){

      $(this).dialog('close');

    }

  }

});

Now that the default settings have been created, send a ajax request for the data from the php file, and update the content in the 'popup' div.

$('.edit').click(function(e){

  e.preventDefault();

  $.ajax({

    url: 'path/to/my/page.ext',

    type: 'GET',

    data: //send some unique piece of data like the ID to retrieve the corresponding user information

    success: function(data){

      //construct the data however, update the HTML of the popup div 

      $('#popup').html(data);

      $('#popup').dialog('open');

    }

  });

});

in the PHP page, construct a form to be sent back ->

<?php

  if(isset($_GET['id'])){

    //build the query, do your mysql stuff

    $query = mysql_query(sprintf(SELECT * FROM sometable WHERE id = %d, $_GET['id']));

    //construct constant objects outside of the array

?>

  <form>

  <?php

    while($row = mysql_fetch_array($query)){

  ?>

    <tr>

      <td>

        <input type=text name=<?php echo $row['id']?> value=<?php echo $row['name'] ?> />

      </td>

    </tr>   

  <?php 

    }

  ?>

  </form>

<?php

  }    

?>