jquery - Load bootstrap modal from seperate page on button click -


i have web-page default.html containing button id ="btn-add" , page add-students.html containing bootstrap modal. how can load modal in default.html on clicking button (btn-add).

code button :

        <a href="#" class="btn btn-primary" id="btn-add" style="float:right" data-toggle="modal" data-target="#mymodal2" ><span class="glyphicon glyphicon-plus"><strong> add</strong></span>

first 1 loads table automatically on page load next page. did modal didn't work.

$(document).on("ready", function () {             //load student table automatically                 $.ajax({                     url: "ajax/grid/grid-students.html",                     success: function (result) {                         $("#data").html(result);                     }                                       });            //load modal                  $("btn-add").click(function () {                     $.ajax({                         url: "ajax/add/add-students.html", success: function (result) {                             $(document).load(result);                         }                     });                 });           });

my modal code in add-students:

 <div class="modal fade" id="mymodal2" tabindex="-1" role="dialog" aria-labelledby="mymodallabel">     <div class="modal-dialog" role="document">         <div class="modal-content">             <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>                 <h4 class="modal-title" id="mymodallabel">applicants</h4>             </div>             <div class="modal-body">                  <form role="form">                     <div class="input-group">                         <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-asterisk"></span></span>                         <input type="text" class="form-control" placeholder="id" aria-describedby="basic-addon1" required>                     </div><br />                     <div class="input-group">                         <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span>                         <input type="text" class="form-control" placeholder="name" aria-describedby="basic-addon1" required>                     </div><br />                     <div class="input-group">                         <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-envelope"></span></span>                         <input type="email" class="form-control" placeholder="email" aria-describedby="basic-addon1" required>                     </div><br />                     <div class="input-group">                         <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-earphone"></span></span>                         <input type="text" class="form-control" placeholder="phone number" aria-describedby="basic-addon1" required>                     </div>                       <div class="modal-footer">                         <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>                         <button type="submit" class="btn btn-primary">save</button>                     </div>                 </form>              </div>          </div>     </div> </div>

you trying make 2 ajax requests when nest load() inside success of $.ajax

you can using $.get() shorthand method $.ajax , in completion callback opening modal.

i remove data attributes button first since bootstrap unable find target since doesn't exist.

// note invalid selector button in code $("#btn-add").click(function () {     // needed html     $.get("ajax/add/add-students.html", function (result) {         // append response body         $('body').append(result);         // open modal         $('#mymodal2').modal(/* options object here*/);      }); });

you might want check existence of modal element before loading it's html each time since id's must unique

you can check using like:

if(!$('#mymodal2').length){   // load html , open new modal }else{    // open modal...see docs }

Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more