Bootstrap not 100% using $('html').html(data);

Question

I have a form login that do the loginCheck using ajax,

If I type the wrong password, it just displays an alert message, but if I use the correctly password it redirect me to the admin page.

The problem is if I call $('html').html(data); after the login check in ajax, the bootstrap components are not rendered perfectly. For example, nothing happens if I click the dropdown menu, but if I admin page directly, everything works perfectly.

Is there something wrong with using$('html').html(data); when also using bootstrap?

Code:

$(document).ready(function() {  
    $('#formlogin').on('submit', function(e) {  
        // don't let the browser submit the form 
        e.preventDefault();  
        var login = $('#usuario').val();
        var senha = $('#senha').val();;
        if(login.length > 1 && senha.length > 1) {
     $.ajax({  
            url: 'http://localhost:8080/Test/doLogin',  
            async: true,  
            cache: false,  
            type: 'POST',  

           data: {"usuario.nome":$("#usuario").val(), "usuario.senha":$("#senha").val(),
               dataType: 'text',
           },
           success: function(data) {

        $('html').html(data);
           }



        });

        } else {
            alert("Login e Senha devem ser preenchidos.");
        }
        return false;
    });  

});

`$('html').html(data)` seems to be a strange if not dangerous thing to do. I'd avoid it all together. — RoToRa, Apr 20 '14 at 17:52

score 2 · Answer 1 · answered Jun 11 '14 at 08:41

The problem appears to be that you are just injecting the html straight into the page. In order for Bootstrap to initialize all it's components such as Dropdowns it runs some of its own JavaScript on page load.

If the page has already loaded and your just changing the DOM this does not trigger. You could initialize all your components manually, for example with $('.dropdown-toggle').dropdown() after you inject your HTML but as RoToRa mentioned in the comments, just injecting an entire html document into your page seems like a bad idea. Just redirecting to the relevant page would be much safer, easier to maintain and a lot less prone to errors, as well as being better for accessibility.

Bootstrap not 100% using $('html').html(data);

1 Answers1