I'm stuck on 'on click' action on new DOM elemets in JQuery. I have approximately the following html setup:
<ul class="dateList">
<li>
<a href='#' data-date="2016-01-01">
</li>
<li>
<a href='#' data-date="2016-01-02">
</li>
</ul>
<ul class="timeList">
<li>
<a href='#' data-time="00:00:00">
</li>
<li>
<a href='#' data-time="03:00:00">
</li>
</ul>
When the page loads, the time list is loaded for the first available date. If user clicks on a different date, the current time list items get removed and new items are generated from pre-loaded json.
If the user click on the time, it is supposed to show relevant information. And it does after the page is loaded, however, once the date gets changed and the new time list items are created the on click event stops working on new time items.
I've tried adding $('.timeList').find('li') and $('.timeList li').find('a') to the end of the function that generates the new time list items but it does not seem to work.
Any help will be appreciated!
you will need to reference a higher level selector, such as body which was created prior to the dynamic content addition
something like
$('body').on('click','.timeList li',function(){
// do stuff
})
Related
Page of WordPress site use an on page filter menu which user can click on items to filter posts type below. I have already added in each anchor tag href value.
<ul class="list-inline filter">
<li class="active">
All solutions
</li>
<li class="cat-item cat-item-1">
Metallurgy
</li>
<li class="cat-item cat-item-2">
Food industry
</li>
</ul>
And here is js code to simulate a click on the appropriate element based on a URL Fragment.
jQuery(document).ready(function($){
var currentFilter = window.location.hash.substr(1);
$('.js-filter [data-filter="'+ currentFilter +'"]').trigger('click');
});
The deal is when I click on anchor tag it isn't add a href value after base url. For example, I want to have an url "example.com/solutions#.Metallurgy". Click applies filter on data, but url stays as "example.com/solutions".
Moreover, when I change url directly to "example.com/solutions#.Metallurgy" Wordpress redirects me to "example.com/solutions/#.Metallurgy". It brings me to the same page with no filter applied.
I have a bunch of filters done in HTML (and bootstrap, I believe)
<li>
Condition <i class="glyphicon glyphicon-chevron-down"></i>
<ul class="dropdown-menu">
<li>All</li>
<li>New</li>
<li>Used</li>
</ul>
</li>
Next to them I have an "Update button". I would like that when a filter is used, the option that you pick is somehow saved and sent along the next time you press Update. For example, in the form of a GET parameter &condition=new.
How can I do this?
Here is the demo code:
<ul>
<li>All</li>
<li> ADVERTISING </li>
</ul>
suppose, advertise is selected and and goes inside it. Clicking on back button sends back to All tab selected, how to get advertise selected.
I tried following codes but doesn't work
Back
<button type="button" onclick="history.back();">Back</button>
You should send back the data-filter from the inside page to identify which tab needs to be selected.
If received .advertising data-filter then you need to add class is-checked to the respective <a> tag
Example
Inside page
Back
don't forget to update the filename mainPage.php to your file name
Main page
<?php
$dataFilter = $_GET['dataFilter'];
?>
<ul>
<li>All</li>
<li> ADVERTISING </li>
</ul>
I'm looking for the absolute simplest way to pass a data attribute along to a new page (non AJAX loading).
I've been messing around with a Wordpress theme all night trying to customize the gallery category filters. I want to do as little coding as possible in making my adjustments to a pre-existing layout, but the complicating factor here is that I have a single page which already has data attributes assigned to elements that can be filtered from links on the same page and I need to be able to load the page with data attributes already set for filtering from external links.
I'll try to make a visual for the scenario that might help (or not ?):
First page is already functioning:
<!---main-gallery_page.php--->
<header class="category-filters">
<ul class="list">
<li> Category Filter 1 </li>
<li> Category Filter 2 </li>
<li> Category Filter 3 </li>
</ul>
</header>
<div class="gallery-thumbs">
<!--- thumbnails with example-id data attributes are filtered, respectively: "generic-X" --->
</div>
Second page needs to manipulate the page above after loading it ^
<!---second-example_page.php--->
<div class="alternate-category-filters">
<ul class="list">
<li> Category Filter 1 </li>
<li> Category Filter 2 </li>
<li> Category Filter 3 </li>
</ul>
</div>
Obviously the second example is not going to function because the new page doesn't receive any instructions to filter the thumbnails, so it'll just load as-is.
Just want to be able to operate the category filter on page load as specified from an external (non-ajax) page. Any ideas on a simple method? I've been trying to see what I can do with php echoes and even stuffing the info into the hyperlink href value, but I couldn't get that to work. It would be ideal if I could do something like this:
<!---second-example_page.php--->
<div class="alternate-category-filters">
<ul class="list">
<li> Category Filter 1 </li>
<li> Category Filter 2 </li>
<li> Category Filter 3 </li>
</ul>
</div>
Help would be greatly appreciated, I've exhausted myself jumping around millions of topics that always seem to just miss explaining this particular scenario's solution.
You could poll a value in localStorage. Make the main page poll localStorage.category. (Using setTimeout for example). Then, once the second page loads and changes the value, the main page could see the change and act accordingly.
I have created a menu for my website which you can find here:
http://jsfiddle.net/nq9Nt/9/
When click a category on the menu it opens that category on my main navigation?
Is something conflicting or have I placed my Javascript in the wrong place?
So I want to be able to click a category and show the sub-categories but it just won't work. Also is there a way to keep open the category you clicked after you change page?
Thank you
<ul class="nav">
<li>Category 1
</li>
<li class="drop">Category 2
<ul id="sub1">
<li>Item
</li>
<li>Item
</li>
</ul>
</li>
<li class="drop">Category 3
<ul id="sub1">
<li>Sticker
</li>
<li>Sticker
</li>
</ul>
</li>
<li>Category 4
<ul id="sub1">
<li> Mural
</li>
<li>Mural
</li>
</ul>
</li>
$(".drop")
.on('click', function () {
$(this).find('ul').toggle();
})
Actually at least on jsfriddle animation works and if you replace href of your anchors from '#' to a real url you will be redirected to another page, so first make sure that you've attached jquery library in head of the document (since you use it in your script), then move your script to the bottom of the page, right before tag 'body' closes.
About keeping the state of the opened categories after refresh - usually it is made on server side while generating template by adding class, for example 'active', to current link and then, using css, corresponding category (or a hierarchy of categories) is set to be opened (li.active ul {display: block;} for example). Well, actually you could do the same trick - use js to find out current url with the help of window.location.pathname value and match it with a href value of your navigation links and then assign class 'active' to the found element (or its parent, it is up to your css)
You can add a class drop to li in 4th Category, so it will work as others. And remove that onclick if you don't plan to use it.
http://jsfiddle.net/nq9Nt/10/
Here the example,
jsbin
You have gave the anchor href with #, So It reloads the page. And also you have gave the onclick method, But it doesn't there.