I'm creating several accordions headers and bodies from a vuejs data object.
The header is a button that triggers the body content and contains several datas and 2 nested buttons.
1st one to delete current header and its body from the DOM
2nd one to edit the body.
Second button is supposed to open a modal but for some reason when i click on this modal button, it triggers the accordion's collapse and modal at the same time creating a visual bug.
How can I trigger a nested button without triggering the main button?
I would have to see your code to tell your for sure, but it sounds like you can just use a different on click event for the second button?
Related
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 am using on click method onclick example am using
I am using two step Onclick method when I click 2nd Onclick a HTML form should open in same page how do I do that
since I am using many sub categories Like ,mobile, computer, etc,...
so I have many sub form
when user click sub form the linked form should open in same page here is the working example Onclick method
what I need is how to open html form file below
You could do something like this: http://jsfiddle.net/8ugjj2yo/2/
In short: bind click events on each 1:st menu item, and then on 2:nd menu item.
Each click handler should close "all other" of the same kind when you click it, then open whatever you clicked (if you want more forms to be displayed at the same time, remove all rows that call
.hide();
The css supplied in the fiddle is just temporary, change it to whatever, the only thing you can't change is the
display:none;
thats there already. (You could also hide them on page load with jquery ofc..)
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)
I have custom form like element made with javascript. It works a bit like the HTML select. I.e. clicking on its pull-down control displays a pop-up of options and when you click on an option, the pop-up collapses.
I would also like to collapse the pop-up when you click somewhere else on the page. E.g. another control. At the moment I have a click event attached to the body element to do this, but it doesnt seem like the correct way to do it. Any suggestions for a better way to detect when to collapse the pop-up?
I have multiple buttons on my website and I want them all to use the same popover ID. The problem is, the only popover that actually works is for the button at the top of the page.
If I click any other button (with the exact same settings and popover ID), it won't open. Only the top one opens.
How can this be fixed?
Instead of using IDs, I had to use the class.