jQueryMobile Dynamic Pages - Events triggered multiple times - javascript

I'm working on a jQueryMobile website that let people order products. There are dynamic pages (such as product page) and I have some events in there (that calculates the total, refreshes the ingredient list, etc).
The first time you enter a product page everything works fine, however after you add the product in the cart and get back to another product, everything triggers once again. So for example if you add 10 items in the cart, for the 10th item, everything (including ajax calls) is triggered 10 times.
I recorded a video here: http://www.screenr.com/Ew5H so you can see exactly the issue.
The website url is: http://m2.pizzaboy.y11.in/
The JS file is here: http://m2.pizzaboy.y11.in/assets/js/main.js
I'm using:
$( document ).delegate("#page-product", "pageinit", function() {
//stuff here
});
to trigger all actions on the product page.
I tried all kind of solutions to fix this (delete the page elements that are no longer active, using flags, etc) but nothing worked.
Thanks for you help

The solution was indeed unbinding the events (using .off), however .off is not working (at least for me) if you provide multiple selectors.
Example:
// This is NOT WORKING because multiple elements are used
$(document).off('change', '.class1, .class2, #idelement');
// This WORKS
$(document).off('change','#idelement');
$(document).off('change','.class1');
// and so on...
// You can add a class to all elements that you want to
// unbind, and then just call it once
$(document).off('event','.classForUnbind')
// If you want to unbind all elements
$(document).off('change');
Hope this helps

Related

Oracle apex: adding filters programmatically with dynamic action adds duplicate filters

I have several dynamic actions that are fired with change event on page load. It seems like all of them are fired at same time. When that happens it adds filter to the interactive grid. Now, the problem is some of the filters are duplicated. How can I solve this problem?
I mean when page loads, it changes bunch of things in the form (like checkboxes and values of textfield), that fires the dynamic action, which then calls addFilter function like this
function newFilter(){
var vals = apex.item('P12_VALUE').getValue();
if(!(vals.includes('DI'))){
deleteExistingFilters('emp', 'IS_ON');
}
if(vals.includes('DI')){
if(!filterAlreadyExist('emp', 'IS_ON')){
addFilter('emp', 'IS_ON','Y','EQ');
}
}
}
Create only one dynamic action that fires on page load, but let it execute several ("true"?) actions, i.e. every action would be one or none of those "several" dynamic actions you have now. "None" means that you'd exclude it if it is already set.

JQuery extension - Youtube playlist - selecting checkbox not recognized as manual click

I'm trying to get some feel for JQuery etc.
Currently, my aim is to write a simple browser extension that selects all "deleted videos" in a playlist and removes them.
The selection is going fine, also works with the alternative commented lines:
var allVideos = $(".playlist-video-item.hidden");
alert("Nbr of deleted videos to remove: " + allVideos.length);
jQuery.each(allVideos, function(){
//$(this).find(":checkbox").attr("checked", true)[0].onclick();
//$(this).find(":checkbox").click();
$(this).find(":checkbox").trigger('click');
});
$("#playlist-edit-actions").click(); // button not editable??
However, even though some videos are "checked", the Actions button on top remains disabled. Only when I add another click manually, it becomes editable.
The solution is probably simple? I've looked around a bit for simulating native clicks but didn't see an immediate answer.
Regards.

Why filter and paging are not working together

I have a function which has to filter and display the result by pages. On document ready everything seems fine. The items are separated by pages. If I click on checkbox or date it is filtering elements as I want, so it's working too. But the problem is that when the function filter items a new pagination is not creating. For example: I have 28 items. They display 3 pages - 10items/page. If I filter and the filter result is 12 items the function doesn't make 2 pages: 10 items on first and 2 on second ... but everything is on the first page and the number of pages are not changing. This is my code:
jsFiddle
I was trying to make the 'click' function 'live' like this:
$('label.check, .calendar a').live('click', function(){
//the code
})
but I don't know why it is not working and it is braking.
I also tried to replace this match-es:
var pages = Math.ceil(match.length/page);
and
match.slice(first_item, last_item).show();
with $('.widget.left:visible') but it still didn't work.
So why is live not working? I think if it does, and give my match a live result, the rest will work but ... Can someone help?
edit: I don't know but my js doesn't run in the jsfiddle. I've tried both jsfiddle and jsbin but still doesn't. Sorry for that I don't know how to fix it but the code runs for sure. It is copy/pasted.
You said :
but everything is on the first page and the number of pages are not
changing.
Because in your JSBin $ is not defined. It means that JQuery is not defined, all others library also BTW.
I quickly add JQuery and JQuery UI, it is working the first time (when I click on americana for example). After it seems freezed. As I don't have all your dependencies, I stopped the debugging.
http://jsbin.com/oqufun/4/edit

Top and Bottom Pagination Sync

I have some weird behavior with jQuery paginate plug-in (jPaginate). I need to have top and bottom pagination and I want to sync them - whenever one is clicked, the second one should be properly changed as well.
I have two divs with number_pagination class and they are initialized the same way:
$(".number_pagination").paginate(options);
Now, here where it gets weird. Whenever I click on the top div, everything works as supposed to, but if I click on the bottom one, it changes the bottom one and does the pagination, but the top one stays the same. I cannot figure out why that could be happening.
Here's the onChange function that is supposed to change both pagination divs. Note the jQuery.fn.draw function that is a part of jPaginate. This is where it applies classes and style.
var opts=jQuery.extend({},jQuery.fn.paginate.defaults,options);
var o=jQuery.meta?jQuery.extend({},opts,jQuery(this).data()):opts;
jQuery(".number_pagination").each(function(){
var obj=jQuery(this);
jQuery.fn.draw(o,obj,page);
});
Found another solution that works perfectly.
It may even work for other pagination plug-ins. It checks the class that has the currently selected page number and checks if the content matches the selected NOW page, and if it doesn't, it looks for siblings that have the correctly selected page and triggers the click event.
jQuery(".jPag-current").each(function(){
if(jQuery(this).html() != page){
jQuery(this).parent().siblings().children().each(function(){
if(jQuery(this).html() == page){
jQuery(this).trigger("click");
}
});
}
});
You should probably look at using the onChange event to redraw the other pager that didn't incur the change

Same ID's in jQuery Tabs

I am using the jQuery Tabs library in a small application. The page has 5 tabs and the content for each page is loaded using Ajax. The problem is, once I load a tab, it remains in the browsers memory (and so do its HTML elements). So if I use lets say a DIV element with the same ID as a previously loaded tab, all JS function related to that ID try to interact with the old tab.
IN other words, lets say I have a page with 2 tabs, "Traffic Data1", "Traffic Data2". Now first, I click on the Traffic Data1 tab which makes the ajax call and loads the page just fine. This page, has 2 date input fields, id for the first field is "dateFrom" and the other field is "dateTo". Next to that is a "Go" button. Upon clicking the button, a JS function shows an alert box with the values in each of the input fields.
Now, I click on the "Traffic Data2" tab. The contents of the page are very different, but it has the identical input fields, 2 for dates (with same IDs) and Go Button. When I press the Go button on this page, I see the alert box with values form the previous tab.
So my question is, Is there a way to unload the previous tab? Or is the only alternative to use elements with unique divs (even though the pages are complete separate).
Thanks
You cannot have multiple element with the same ID. When you find an element by ID the first one found is always returned because it is expected that IDs will be unique.
Leave the name attributes for the input elements the same but change their IDs to be unique.
You can select an element by its name attribute like this: $('[name="foobar"]')
Update
In the docs for jQuery UI Tabs there is an option called cache that when set to false should remove the old tabs from the DOM after you navigate away from them:
Whether or not to cache remote tabs content, e.g. load only once or
with every click. Cached content is being lazy loaded, e.g once and
only once for the first click. Note that to prevent the actual Ajax
requests from being cached by the browser you need to provide an extra
cache: false flag to ajaxOptions.
Source: http://jqueryui.com/demos/tabs/
You are looking for jQuery Live.
Description: Attach an event handler for all elements which match the current selector, now and in the future.
If you use it jQuery will magically auto-update to match your new elements as they appear/disapear.
// code sample
$("a.offsite").live("click", function(){ alert("Goodbye!"); });
Since the tabs click event reloads your form and assuming you're using divs to contain the ajax-loaded content, add .click(function () { $(this).children('div').children.remove(); }) to your tabs() declaration.
That should remove the div content and any event handlers that are bound to it.
If you can pass a context to the jquery functions, you could make your calls relative to currently selected tab...
$("#someDuplicatedId", activeTab).doStuff();
Or if caching the content is not important, go with Jasper's answer.

Categories