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

Popular posts from this blog

c++ - Function signature as a function template parameter -

algorithm - What are some ways to combine a number of (potentially incompatible) sorted sub-sets of a total set into a (partial) ordering of the total set? -

How to call a javascript function after the page loads with a chrome extension? -