Bootstrap refresh remote modal while open - javascript

I'm using bootstrap 3.x.x & I have a remote modal which is working fine, also I have Implemented the functionality where if the modal is closed, the data is flushed and a fresh ajax request is made if it is reopened. All of this is working fine.
Now I need to refresh/reload the content from that same remote URL without closing the modal.
Is there a way to achieve it?
One way that I can think of is just manually firing a jquery .load with the same URL and modal-body as the target. But that doesn't trigger the respective events like loaded.bs.modal etc.
So again, is there an official way to refresh the remote bootstrap modal, without closing it and re-opening it again?

Related

Get a URL that will load ajax content of a packed solution

I have a packaged web application with multiple ajax calls that will load html content in the middle of the website.
Is there a way to go directly to one of the ajax calls from the URL instead of manually clicking the buttons to reach the required content on the page immediately?
As a sample, i want to show the content of this page like i clicked the button without clicking it using JavaScript, jQuery, or manual click.
https://www.w3schools.com/xml/tryit.asp?filename=tryajax_first

Prevent a page from fully loading in codeigniter

I have separate views for my navbar (I'm using materialize), home, etc.
This is what my navbar looks like
It has tabs. When I click a another tab, a method in my controller does this
$this->load->view('navbar');
$this->load->view('payables');
However, it reloads my whole navbar which prevents my jquery to fulfill it's duty to change the active tab, the page loads but the tab that is selected is still 'HOME'.
How can I prevent my navbar from reloading and load another page at the same time using $this->load->view(). I researched that there is something called ng-route and ng-view in Angular JS that will accomplish this. Is there a counterpart in codeigniter?
If you click in a tab and you "load a method", it means you're launching a whole HTTP request, and you will reload the full page.
To avoid that, you'll need to do it asynchronously. You'll need to create an AJAX request, to load only the part you want. In your view, you'll have to code the JS request that launches a call to the server to render only the part you want to show. When the server answers, your JS will have to allocate that into the page.

Bootstrap-Switch on Modal loaded from remote page

I'm trying to use Bootstrap-Switch to toggle my checkboxes. It works fine on a normal page, or a modal thats pre-loaded into the page.
However, if I load the modal from a remote page (a href=something.html) the toggle does not work/display. Apparently it loads once but doesn't reload after the modal is opened.
I tried
$("#myModal").on("shown.bs.modal",function(){
$(".checkbox").bootstrapSwitch();
});
But to no avail.
I've tried added the JS code directly to the code being pulled from the Modal as well but it didn't work. It worked on the remote page when loaded directly, but not through the Modal.
I'm a novice JS guy so this may be a trivial fix. Basically need to know how to call bootstrapSwitch() after the modal is loaded.
Thanks!
Just realized I had the shown.bs.modal called 2x for different things. When I combined, it fixed it. Bah, 30 minutes down the drain!

Closing a jquery modal dialog from a remote page

I'm using the jQuery-UI dialog widget in a Grails-based application to load a remote page (in this case, a simple file upload form). The remote page is defined elsewhere in my project, and doesn't know it is being loaded in a dialog.
Is there any way to close the dialog via a link in the remote page? Would I have to somehow pass a reference to the dialog when I load the page, or is there a way to trigger the close event while remaining agnostic of the dialog itself?
Try this HTML:
CLOSE
and this JavaScript:
$("#btnDone").click(function (e) {
e.preventDefault();
var dialogDiv = $("#btnDone").parents(".ui-dialog-content");
if (dialogDiv.length > 0) {
dialogDiv.dialog('close');
}
});
in your remote page. It will look to see if it is inside a dialog and if so, it will close it. If not, it will do nothing.
If you give your dialog a known ID then you can look it up using jquery (e.g. $('#mydialog') and close it via script on the remote page. The only issue might be getting JS to be evaluated when the remote page is loaded into the dialog.

solution for popup page as modal

I was using window.showModalDialog() but doesn't work on all browsers.
People recommends me jquery, thickbox and also this contact Example
but the problem is when i submit the page, server will send me another page, and that page will replace my original page!
so actually it doesn't fulfill my requirement.
My requirement is on button click modal page should open and it can redirect to other page on same window without disturbing my original page and when I close My original page get reflections.
So is it possible?
Sounds like you need a simple html target="_blank" in the link to the other page.
http://www.htmlcodetutorial.com/linking/_A_TARGET_95y98y108y97y110y107y.html

Categories