CODEWITHSUNDEEP
jqueryajaxtwitter-bootstrapbootbox
jircdeveloper
jircdeveloper

Reputation: 434

How can I replace a bootbox content with ajax call?

I'm newer here and i only speak english a little bit. Sorry if i'll have some error writing.

I am working with bootbox dialog and trying to show ajax responses in the same modal, but I cannot do it. Someone can help me with this ? Which is the best way to do this?

I have a page with a login link. When somebody click there I show the form in a bootbox dialog, This form has down a link like "Don't have account? click here" and my Idea is show the other form in the same bootbox dialog

I tried this : 

$(document).on({
    "show.bs.modal":function(e){
        if($(".bootbox.in ").size()>0){

            $(".bootbox.in ").removeData('bs.modal');
            e.preventDefault();
        }

        $(".bootbox.in").children(".modal-content")
       .html($(e.target).children(".modal-content").html());
 });

Thanks a lot for your help!

Upvotes: 0

Views: 2219

Answers (1)

Matt
Matt

Reputation: 1580

You can set the HTML inside your bootbox using a string made up of HTML. Then you can modify the content inside that HTML once the bootbox is opened.

eg.

// Nifty function that converts a comment to a string
var HTMLstring = (function () {/*
    <div id="container">
        <h1>Title</h1>
        <div id="subcontainer">
            LOGIN FORM HERE
            <button id="createAccount"></button>
        </div>
    </div>
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
// Initialize bootbox with the above string
bootbox.dialog({
    message: HTMLstring,
    buttons:            
    {
        "danger" :
        {
            "label" : "Close",
            "className" : "btn-sm btn-danger",
            "callback": function() {

            }
        }
    }
});
// Here we attach the listeners to the above modal, to do what we want.
$('#createAccount').click(function() {
    createAccountHTML = 'This can be your html for create account form';
    $('#subcontainer').html(createAccountHTML);
});

Alternatively, a better option instead of replacing HTML with javascript is to make the original HTML string with a tab like structure that can swap between the two.

Upvotes: 1

Related Questions