Bootstrap modal dialog box to load only one remote data solution

The Bootstrap modal dialog box for the front-end frame allows you to specify a URL using the remote option so that the dialog box will automatically load data from this address at the first pop-up to. Modal-body, but it will only be loaded once, but by invoking the The Removedata () method can solve this problem.

1. Bootstrap modal dialog box and simple use

<DivID= "Mymodal"class= "Modal Hide Fade">    <Divclass= "Modal-header">        <Buttontype= "button"class= "Close"Data-dismiss= "Modal">X</Button>        <H3>dialog box title</H3>    </Div>    <Divclass= "Modal-body">        <P>dialog box Body</P>    </Div>    <Divclass= "Modal-footer">        <ahref="#"class= "BTN"Data-dismiss= "Modal">Cancel</a>        <ahref="#"class= "Btn btn-primary"Data-dismiss= "Modal">Are you sure</a>    </Div></Div>

Display effects similar to:

Modal dialogs can be called directly using buttons or links, which is simple to use:

<Buttontype= "button"Data-toggle= "Modal"Data-target= "#myModal">Open dialog box</Button><ahref= "#myModal"role= "button"class= "BTN"Data-toggle= "Modal">Open dialog box</Button>

This will only show the static content in the dialog box, using the Remote option of the dialog box to achieve a more powerful effect.

2. Use the remote option to have the modal dialog box load the page into the. modal-body

There are two ways to use a link, and the other is to use a script.

2.1 Using Links

<href= "page.jsp"  data-toggle= "modal"  data-target = "#myModal" > Open dialog Box </a>

When this link is clicked, the contents of the page.jsp will be loaded into the. Modal-body dialog box.

2.2 Using scripts

$ ("#myModal"). Modal ({    remote: "page.jsp"});

The effect of this script is the same as using a link, and when the script executes, the contents of the page.jsp are loaded into the. Modal-body of the dialog box, and the dialog box appears.

Behind both methods, Bootstrap called the JQuery Load () method and loaded the page.jsp page from the server side. But this load will only happen once, no matter how many times you click the link, or execute a few scripts, even if you change the value passed to the Remote option, the dialog box will not reload the page, this is a very frustrating thing. But the problem can still be solved.

3. Remove the data so that the dialog box can reload the page each time it is opened

After searching and reviewing the relevant documents, it is possible to write a statement in the hidden event of the dialog box:

$ ("#myModal"). On ("Hidden", function () {    $ (this). Removedata ("modal");});

You can also remove the data before you open the dialog box, the effect is the same.

Note: The above code is based on Bootstrap v2, if you use Bootstrape v3, the modal dialog's HTML and event notation are somewhat different, for example, for the above hidden event, write:

$ ("#myModal"). On ("Hidden.bs.modal", function () {    $ (this). Removedata ("Bs.modal");});

Go to: http://my.oschina.net/qczhang/blog/190215

Bootstrap modal dialog box to load only one remote data solution