Onclick not working in panel after page change - javascript

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)

Related

Open html form below home page Onclick

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..)

getting rid of lower bar in colorbox

I want to use colorbox to display a form. The form will have two buttons, one for submitting the form and one for dismissing the window created by colorbox.
I have been following the examples, particularly the so called Outside HTML (Ajax). It works, but I am trying not to show the close button and to hidden also the whole bar that colorbox uses to display the title and other button for galleries.
If I set closeButton:false, the close button is not shown but I still have some white space at the bottom that I'd like to remove.
Do you know how to achieve this?

jQuery mobile collapsible button in header, stop collapse/expand

I want to place a button in a jQuery collapsible's header.
Of course, when I do that, pressing the button also makes the collapsible expand/collapse. I found the solution to be
e.stopPropagation();
e.stopImmediatePropagation();
I took it from here: adding the button to the collapsible set and getting the value of the collapsible element
However there's a problem. When the collapsible is on a page that has been loaded as such:
$.mobile.changePage("#second", {transition : "pop", role : "page"});
Then, using stopPropagation immediately causes jquery-mobile to swtich to the original page (the index page for example).
Here is an example (forked from the jsfiddle provided in the link above) that demonstates the problem that I'm encountering: http://jsfiddle.net/ga5f86mm/1/
So just to reiterate, I want to be able to place a button in the header of a jquery-mobile collapsible without causing it to collapse/expand on a click of that button.
Firstly, my apologies; I didn't mean to update your Fiddle, I meant to fork it, but alas Update it I did...
Anyway, add:
e.preventDefault();
http://jsfiddle.net/ga5f86mm/2/

Use same ID for popover

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.

Toggle menu issue

I've got a toggle menu, please see http://jsfiddle.net/Wp2em/41/ for code and functions.
On the real site which is using the same code, everytime when you click on h3 (Category 1, 2 & 3 which is an a tag at the moment), it toggles its submenu down a bit, then the page changes to a new h3 linking page, and the submenu collapses together on the new page.
I'm just wondering is there any way I can tell the submenu to be open when its parent page/the new h3 linking page is opened? Please see this bank site which has the side bar effect I'd like my toggle menu to be.
Thank you in advance!
Here is my fiddle
all you will need to do is put the class "currentPage" on the li that you are currently on and the menu should be open after the page loads. I also moved some of your css around so it should move a little smoother now.
** Updated fiddle code. It will now look at your current URL and set the link that matches with it to the currentPage. Also I added that if another menu is open it will close itself if you click on another parent menu
** Updated fiddle code. Ok now if you click on the arrow the menu will expand and not go to the link(like the bank site). Also I changed it where you will have to put the anchor tag in all parent H3s.
This is not too simple. I've had a very similar problem, although I was posting the page back to the same url so I used a hidden field to store a list of the id's of the H3's which were open.
You I think will have to use a cookie to do this as you're navigating straight to the new page. The idea is you create a cookie and set a value on it every time you open an H3 and remove it every time you close it. You can use this plugin to do this. Then when you open the other page, the script reads the H3's which should be open out of the cookie and opens them.
Another route would be to use Ajax to post the open/closed H3 information back to the server which would store it in session data and use it to build the HTML of the new page so the right H3's were open.
If the page loads and the submenu (ul.second_level) is generated (i.e. from php), parse an active css class on the submenu that must be visible.
ul.active {
display: block
}
ul.second_level {
display: none
}
This is in addition to your click function. Do not trigger the click event since it starts the animation (which I presume you don't want).
Update:
It is quite basic stuff, but I do not know how the HTML code for your menu is created. If you are using php and a database (for example) to create the menu, check every submenu item with the page you are on. If the page is one of the pages in the submenu, set the class 'active' on that submenu. The CSS does the rest (displaying this submenu and hide other submenus).
If you have a static page, use javascript to check on which page you are with window.location.href for example. The rest is the same.

Categories

Resources