php - Updating div on button click, when the button is generated by clicking on another button -
on clicking button magic1
or magic2
, div mybox
updated text, button id , button (different magic1
, magic2
).
after clicking on newly generated button should display button id of newly generated button in box
div. when click on newly generated button, box
div not getting updated. here code.
jquerycode.php initial file. on clicking button magic1
or magic2
, ajax call page session.php.
jquerycode.php file
<!doctype html> <?php $first=$_post['q']; echo $first; ?> <html> <head> <meta charset="utf-8" /> <title>my jquery ajax test</title> <style type="text/css"> #mybox { width: 300px; height: 250px; border: 1px solid #999; } #box { width: 300px; height: 250px; border: 1px solid #999; position: absolute; right:210px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".magic_button").click(function() { var data = $(this).attr('id'); //alert (data); $.ajax({ type: "post", url: "session.php", data: { 'id': data } }).done(function(msg) { $("#mybox").html(msg); }); }); }); </script> <script> $(".fir").click(function() { var dataa = $(this).attr('id'); alert ("hello"); $.ajax({ type: "post", url: "jquerycode.php", data: { 'q': dataa } }).done(function(msg) { $("#box").html(msg); return false; }); }); </script> </head> <body> following div updated after call:<br /> <div id="mybox"> </div> <div id="box"> </div> <form name="magic"> <!-- <label for="name" id="name_label">name</label> <input type="text" name="name" id="name" size="30" value="" class="text-input" /> <label class="error" for="name" id="name_error">this field required.</label> --> <input type="button" class="magic_button" name="magic_button" id="magic_button_1" value="magic1" /> <input type="button" class="magic_button" name="magic_button" id="magic_button_2" value="magic2" /> </form> </body> </html>
session.php file
<?php $id = $_post['id']; $id = ucwords(implode(' ',explode('_',$id))); if($id==="magic button 2") { echo "hey button 2!!"; ?> <input type="button" name="butb" id="second" class="fir" value="second"/> <?php } else { echo "hey button 1!!"; ?> <input type="button" name="buta" id="first" class="fir" value="first"/> <?php } echo $id; ?>
best if can use jquery live() dynamic generated elements :
$("a.offsite").live("click", function(){ alert("goodbye!"); }); // jquery 1.3+
beca jquery live() deprecated need use jquery on()
$("#elementid").on("click", function(event){ alert($(this).text()); });
Comments
Post a Comment