发表新帖
发表新帖

Bootstrap dropdown not working after initial ajax form submission

前端 未结
关注
4 489
野的像风
野的像风 2020-12-17 02:47

I have a dropdown on my page, manager.php, here. Sorry for the formatting - bootstrap.:
相关标签:
4条回答
  • 感情败类
    2020-12-17 03:28

    You need to manually reset the dropdown after you've loaded the data into the everything div. I've modified your AJAX call to show you where to put the call.

    $.ajax({
      type: 'POST',
      url: 'manager.php',      
      data: {number:number, location:location, project:project, comments:comments},        
        success:function(data){
          $('#everything').html(data);
          $('#searchBy').dropdown();
        }
  });

    The dynamic loading you're doing doesn't cause the DOM to reload forcing the drop down to be reinitialized. After you're AJAX call has completed, you can then reset the bootstrap drop down manually by calling .dropdown();.

    EDIT

    Generally functions in bootstrap for features are setup using a $( document ).ready() call. This function executes once, after the DOM has been loaded and only after the DOM has has been fully loaded. Since your manipulating the DOM, you are not causing the function to be triggered again, and you need to manually trigger the feature you need.

    You also want to load your includes only once on each page. They need to on manager.php in order for the function be available when you go into your success method. I'd suggest using a template for your project so you manage all your includes in one place. Also, if your using manager.php as a page to be included in another page, it's okay if you don't have the reference to the JavaScript pieces won't work since you don't want users accessing that component on it's own.

    The reload you are doing appears to be forcing the content to be re-added to the page, thus forcing the $( document ).ready() call in the included file to be re-executed. You can do this, but it's very inefficient.

    0 讨论(0)
  • 猫巷女王i
    2020-12-17 03:32

    So I'm not sure why this works, but it has so far:

    I've modified my ajax call to reload bootstrap's .js file prior to executing the return.

    function reload_js(src) {
    $('script[src="' + src + '"]').remove();
    $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head');
}

$.ajax({
      ...      
        success:function(data){
        reload_js('https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js');                
        $('#everything').html(data);                                                            
        }
  });

    For the bounty, can someone explain to me:

    a.) Why do I need to force the reload of bootstrap.min.js?

    b.) Why is this even necessary if I have a link to this file in BOTH files' <head> sections?

      <!-- Bootstrap -->
  <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../css/bootstrapstyle.css">

    I've also tried loading it in one, but not the other (so I don't load it twice,) and that doesn't do anything.

    c.) Why does this work? What is it doing?

    0 讨论(0)
  • 隐瞒了意图╮
    2020-12-17 03:48

    page will load DOM 1st time. ajax just update a part of page, so new elements you add wont have prop you defined. you need to reinit as you did or make something like this

    http://hussain.io/2012/01/reinitializing-jquery-event-on-ajax-response/

    0 讨论(0)
  • 南方客
    2020-12-17 03:49

    you can't initialize the bootstrap component after page load by adding bootstrap clasaes. To do this you have to initialize it by your self

    To initialize a dropdown write this code 

    $('.dropdown-toggle').dropdown();

    after

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

    for more details: http://getbootstrap.com/javascript/#dropdowns

    0 讨论(0)
 看不清?
提交回复
热议问题