Bootstrap modal on html element append missing css - javascript

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)

Related

How can I expand / collapse a Jarvis Widget programmatically?

I'm working with JarvisWidgets and JQuery since some time and I need to open programmatically a widget that is collapsed by default.
Up to now I've tried the following attempts without success.
1st attempt:
$('#my-widget-id').removeClass("jarviswidget-collapsed");
2nd attempt:
$('#my-widget-id').removeAttr("data-widget-collapsed");
however I'm still unable to trigger the widget expansion.
Note: the first method should be the right one as I've seen that, when the widget is expanded by clicking on the collapse toggle button, the class jarviswidget-collapsed is removed while the attribute data-widget-collapsed="true" is always there. So the attribute is just used to define the default widget startup state; in other words if the attribute data-widget-collapsed="true" is present then the widget will appear collapsed by default, if the attribute is removed the widget will appear expanded by default. Having said that I cannot understand the reason why removing the class jarviswidget-collapsed, hence behaving as the widget was expanded by user click, the widget doesn't expand.
I think maybe they are using something similar to this:
show widget:
$('#wid-id-2').removeClass('jarviswidget-collapsed').children('div').slideDown('fast');
Hide widget:
$('#wid-id-2').addClass('jarviswidget-collapsed').children('div').slideUp('fast');
I cannot find the code source of jarvis widgets, but there is an old version here has almost the same code as above but without slideUp or slideDown function, they use only show() and hide() methods
Hope this helps

Prevent Bootstrap popover from resetting content on show

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.

Onclick not working in panel after page change

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)

better way to hide modal elements on page load [duplicate]

This question already has answers here:
When creating a dialog with jquery, how do I hide the dialog div?
(2 answers)
Closed 8 years ago.
Imagine a fairly standard web app page using jQuery and Knockout which uses mostly modal dialogs for editing data. The modal dialogs are created via jQuery UI and everything works. As the page loads, the JS runs, the dialogs open when the button is clicked, do their job, all is fine, great, and peachy.
However, as the page is loading, the elements in the divs containing the HTML for the modal controls will flash just for a second before the script to turn them into dialogs completes, after which they're once again hidden until the dialog is opened. And yes, this will happen even when the script has been wrapped in the $(document).ready() call since all that does is prevent manipulation until the DOM has been loaded.
One method which seems to make this go away is to add visibility: hidden; to the CSS of the class which I assign to my modal divs which stops the elements form appearing on page load but it also then turns those elements inside the modal control invisible and I have to add the following line to the function which opens it...
$modal.css('visibility', 'visible');
Again, all this seems to work, but I'm wondering if anyone knows a better way to effectively hide all of the inputs and dropdowns, and text inside what will become a modal control on page load than by playing with the CSS when the dialog opens.
Add a class called hidden to your css file.
.hidden{
display: none;
}
This will allow you to reuse this class on other elements. If your using twitter bootstrap this class should be available: http://getbootstrap.com/css/#helper-classes-show-hide

JQuery Mobile Listview Disappearing

I am creating a JQuery Mobile web-app, and am experiencing a problem.
When then user clicks on an element in a Listview, a new page is loaded. However, when the user clicks the button, the elements in the Listview do not show.
The list elements are dynamically added, then enhanced with$("#landmarksList").listview().listview("refresh");
Here is a link to a page illustrating the problem:
http://jakeserver.com/Apps/BostonLandmarks/B6/landmarks.html
Any ideas about what might be causing this problem?
Thanks.
In JQM , DOM element are handled in differently .For example, try using $(document).on('pageinit','#youpage'.. instead of $(document).ready ....ref.try
Landmarks Page
$(docuemnt).on('pageshow','#landmarks',function(){
// load the landmark content dynamically here
createListRow();
});

Categories

Resources