Got request from wife how to display detail in modal box with dynamic content grab in database. So i wrote piece of code to guide her. This tutorial is on PHP

html

<div id="dialog" title="Default">
    <div id="dinamicDiv"></div>
</div>
<button data-value="1" id="opener">Open Dialog</button>

script

$( function() {
		  //Initialize dialog
		$("#dialog").dialog({
			autoOpen: false,
			show: {
				effect: "blind",
				duration: 1000
			},
			hide: {
				effect: "explode",
				duration: 1000
			}
		});

		//Open it when #opener is clicked
		$("#opener").click(function () {
		var id=$("#opener").data("value");
		$.ajax({
		  method: "GET",
		  url: "some.php",
		  data: { id: id}
		})
		  .done(function( data ) {
				$("#dinamicDiv").html(data);
				$("#dialog").dialog("open");
		})
		  .error(function(){
				$("#dinamicDiv").html("error occured");
		});
		});
  } );

some.php file

<?php
$id=$_GET["id"];
if($id==1){ 
?>
<div>
hiii semua<br/>
ok
</div>
<?php
}
?>

sample working project

http://malaysiasky.net/project/ajaxDialogBox/

Dynamic Modal Box Content With Ajax Request

Related posts:

Tagged on:         

Leave a Reply

Your email address will not be published. Required fields are marked *