Does someone have a working example where multiple remote links have to be loaded into the modal?
What I want is a datatable and when one clicks on a link in the row, I want to open the edit page for that row.
e.g. edit.php?id=xyz.
My example works only for the first row I want to edit, when I click on a different row, the content of the first row is loaded.
I've been searching and this topic was the closest, however it does not work for bootstrap 3.2.0
Twitter bootstrap remote modal shows same content everytime
The Bootstrap modal usage says that the remote content will be loaded one time. So, what you have to do is remove the content of the modal when you close it. That will allow new content to be loaded.
$('body').on('hidden.bs.modal', function(e) {
$(e.target).removeData('bs.modal').find('.modal-content').empty();
});
Related
I have customised nested modal script (jQueryModal) to better match project need, but I'm facing some weird issue that I am unable to get
I call that modal to load some contents via ajax, and response from that ajax contains some javascript code along with html and appneds to modal body.
All those javascript code (from ajax response) works perfectly.
Then, when that modal is closed I remove whole modal block and it's content (that ajax responded html + javascript)
But when I reopen same modal, old script has left effect
Example, Modal A opened with ajax content, in that content there's [BUTTON] to call another ajax (will open another modal), lets call it Modal B
In Modal B, there's select dropdown which calls ajax on change, which is fine so far.
Now I close Modal B and reopen it by clicking that same [BUTTON] on Modal A, and then Modal B opens but this time Modal B's select dropdown will call twice upon change
I doubt remove js code on modal close is not enough
What could be problem and solution for that?
Thanks for any help in advance
Thanks to #Taplar for help, I got the problem and could able to solve it by little googleing and solution was to use jQuery's off
example:
$('.button').off('click').on('click', function(){ ... });
same way for select dropdown:
$('select').off('change').on('change', function() { ... });
The reason for this to cover any user that MAY have javascript turned off. It's a company standard that we develop our web pages for this, since our demographic still have their VCR's blinking 12:00.
I have a text link that is being populated by a database call:
Click for Article
The common user experience is that the user will click the link, and it will toggle a modal displaying the article. BUT we want to incorporate a fallback in case the user has javascript turned off, so when the link is clicked, it will simply take the user to the article page and display the dynamic content loaded by padding the Article ID of 123.
Currently with Bootstrap properly loaded on the page, when the user clickson the link, it just goes to the article page and does NOT toggle the modal.
What method do I need to add to a onClick event to prevent this click through from occuring, but still toggling the modal to display?
$('[data-toggle="modal"]').on('click', function(e){
e.stopPropagation();
});
or
$('[data-toggle="modal"]').on('click', function(e){
e.preventDefault();
});
The correct answer is e.preventDefault()
I have a website with some bootstrap modal windows. On server rendering these modal windows everything is as should be, but after loading (appending) new items and theirs modal windows, somehow attached modals don't have bootstrap css.
Steps:
opening web page in gridview it shows 30 items blocks
clicking on any block shows modal with correct css
clicking on 'Load more' I am using ajax call for getting more
items on a page and server generated html for these Items then
append to specific div.
items appended correctly but clicking on appended item modal
window missing css.
Probably I need to recall bootstrap css or js after appending new items to page?
Here you are identifying element by id. That's why JQuery selector is taking only first matching element and ignoring others.
To fix this issue, use class to identify element in JQuery selector.
I found the answer here: bootstrap toggle doesn't work after ajax load
And my actual fix was reloading attributes after ajax success:
setTimeout(function(){
// add an element dynamically,
// now that we have dynamically loaded elements
// we need to initialize any toggles that were added
// you shouldn't re-initialize any toggles already present
// but we also do want to have to figure out how to find the ones we added
// instead, we'll destroy all toggles and recreate all new ones
$("[data-toggle='toggle']").bootstrapToggle('destroy')
$("[data-toggle='toggle']").bootstrapToggle();
$('.tags-list').tagsinput('refresh');
}, 1000)
I am using a bootstrap popover to display an instance of fancytree. On the initial click of the button that triggers the popover, everything loads and initializes correctly.The user can select items in the tree, search for items in the tree, etc. When the popover is dismissed and then shown for the second (or more) time, only the original static html that was in the data-content attribute is shown. After looking at the DOM while this happens, it appears that the popover is just replacing the dynamically generated content that fancytree created with the static content in the data-content attribute.
My question is, is there a way/option for the popover to not reinitialize the content every time it is displayed and just hide it instead?
Because I have an instance of fancytree created dynamically, I can't just swap out the HTML as it would no longer "link" to the fancytree object.
Any help is greatly appreciated!
This is not a solution to the issue of preventing the bootstrap popover from re-initializing the content inside of it but I did end up going with the bootstrap dropdown instead since the content that is displayed by it does not get reset every time a user opens it.
I'm creating a small webapp using jquery mobile and php. I have an issue where I have a menu in a panel which i need to run an onclick event from. This works fine when the page has been re-loaded either using data-ajax='false' or running a page refresh. However when I try to use the event after a page change it just doesn't respond at all.
Here is my onclick code
$('#searchOptionMap').click(function()
{
window.alert("map clicked ");
});
and you can see the js fiddle here http://jsfiddle.net/jbcvnz0p/
If you go to page 1 - panel click - map click the alert appears
If you then navigate to page 2 - panel click - map click the alert doesn't appear
If you stay on page 2 and click the map collapsible - alert appears
You can see that the same onclick event works for a collapsible set outside the panel, just not within it. Is there any fix for this other than using data-ajax='false' or running a page refresh?
You have two divs with the same id, when you bind something with jQuery using an id, it only does the first one.
$('#searchOptionMap').click(function()
{
window.alert("map clicked");
});
So use a class instead, or make the panel external if it's going to be the same panel for both pages.
(#searchOptionMap2 works in this case because there's only one of them)