Multiple ids in jQuery selector not working? - javascript

Apparently my note was removed. This is very similar to other answers already out there. I explained that I have tried them all and nothing has worked for me. There are 7 or 8 possibilities I found here on stackoverflow and had no luck with them. There is something I'm missing and can't figure it out. Please help!
We have a script that creates a vehicle selection tool on our dev website. It works great when a single use is in place. However, if there are two versions they conflict. Each instance has a unique id and no matter how I code it, they will not work together. Its probably something obvious, but I don't have the experience to spot it. I've tried all the solutions I could find to attempt to correct the problem and I keep falling short. Depending on how I do the id selectors I can get one or the other to work, but not both. I'm sure it's something obvious that I just don't have the experience to discover.
Code snippets:
function selectVehicleDialog(showCloseButton) {
jQuery("#select-vehicle,#select-vehicle2").dialog('open');
if(showCloseButton == true){
jQuery('.ui-dialog-titlebar-close').remove();
}
loadVehicleFinder('-header');
}
Extensive code trimmed out here as requested
});
When they are both on the page simultaneously, I can change the selectors and make one or the other work.

Related

jQuery(document).on("keydown",...) works, but not document.addEventListener("keydown",...)

I thought I should see how much I really need jQuery now. So I started by replacing
jQuery(document).on("keydown.", function(e){...})
with
document.addEventListener("keydown", function(e){...})
I believed that one was easy, but to my surprise the event was no longer fired. To investigate this a bit I entered the second version in the console. Now it worked. ;-)
That is a bit impractical, of course. I would prefer that I did not have to enter it in the console...
In the code the event listener is added right after some changes to the DOM, i e some additions. I guess the trouble might be related to this, but I have no idea what to do.
Any suggestions?
EDIT: Thanks everyone for the comments. In this particular case it would be good to get rid of jQuery (but otherwise it is no problem using jQuery of course).
I should have said that some DOM elements are added long after the page is loaded so window.onload etc is not useful here.
I should maybe also have said that I am testing this in the latest version of Chrome and for this I am not interested in backward compatibility (it is too complicated anyway in this case so I have just dropped that... ;-) ).
UPDATE: Someone asked for code. Here is an example I just tested:
document.addEventListener("keydown.test", function(e){
console.log("doc.addEL test keydown, e=", e)
});
Looking in Chrome Dev Tools at the properties of the HTML element I can see the event listener there (with the code above). It is just not fired. Seems like it is just time to write yet another bug report then. ;-)
My bad. I misread the news that event handlers now can be removed using standard syntax. They can, but the syntax is that you give the event+handler function to removeEventListener.
The syntax I used above for the event, "keydown.test", is not a valid syntax (if you are not using jQuery).
Sorry for wasting your time. Hope someone can use the answer.

Cloning a DIV with multiple inputs in Jquery Mobile

I'm new to javascript and I can't seem to figure out this thing which I reckon should be a no-brainer.
I'm using Jquery mobile. I would like to clone a div and update the IDs of the elements in it. This seems to work fine. However, I can't get the cloned select element to work properly. I doesn't seem to work - I can't select anything - after its been cloned. When I call an extra $('html').trigger('create'); on the page the select elements starts looking 'funny' (probably because it got enhanced a second time) but does works.
I've posted a simplified version of my code here: http://jsfiddle.net/cUBPF/1/
Does anyone have a suggestion for me?
Thanks!
I'm not experiencing any problems however I'm just using my desktop. My first thought is to avoid calling the $('html').trigger('create'); at all and simply do what you want to within the clone_button click but then again, I'm not really sure what you are doing.
Instead of doing all this, why not output 10 or 20 of these fields and the display:none/display:block them......I assume you will run into less compability issues this way and you really don't want to allow infinite amount of fields....your going to run into browser memory issues which is just going to cause more bugs.

jQuery version clashes

I have sort of run into an issue.. I am possibly using way too much jquery on my site now, and all the scripts require their own version of jquery at the moment.. so they're pretty much clashing and with them all included into one page, nothing works.
Is anyone able to give me some advice on how to get around this?
So far I am using:
https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
http://code.jquery.com/jquery-latest.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js
http://pastebin.com/kWZHNiiu
I've tried removing just one or two, and they all fall into a loop of some working, and others not. The main issue seems to be really coming from the version 1.2.3 > http://pastebin.com/kWZHNiiu
Thank you
- James
Look into http://api.jquery.com/jQuery.noConflict
Although I would suggest to use only one version for your site.

how to, javascript Pop Under not popping in the background

i have this simple script of a popunder window:
function loadpopunder(){
win2=window.open(popunder,"",winfeatures)
win2.blur()
window.focus()
}
It works but it looks like the new window doesn't load under the main one. it loads on top.
i've been looking at this from multiple ways and i can't figure it out.
any ideas?
thanks
edit: this code is just a sample, mine actually has all the ; and the http://.. link,
also, i understand that none likes the popunders, i don't like them either, is just one of those things that needs to be done. I hope one day someone will figure a way of blocking those too, but i am here bcause i am looking for a solution
Please reconsider your choice. There are about zero people that enjoy pop-unders.
For the sake of answering your question, here is what's considered a better way: http://icant.co.uk/articles/how-to-create-popunders/

Scroll with no backward with IE

I am using the Mootools Fx.Scroll effect to navigate horizontally through my website sections. Everything is working properly with Firefox, but Internet Explorer gives me some trouble. First the section were a big mess, but after adding one line in the Mootools core file thanks to a lighthouseapp.com patch, the sections are now well displayed.
My problem is that I can not go backward (to the left), only going to the right (again, it is only with IE...). The working demo is here.
After days of unsuccessful research, I am asking for your help, for any advice. I will provide any needed details.
Thanks a lot ;)
erm - couple of things.
you have commented out mootools 1.2.3.1 and gone back to 1.2.1, any reason for this?
you run to patch the framework using some code from the ticketing system, seems rather dubious to me and it most certainly should not be how you approach solving this. I am far from saying that mootools is free of errors but my point is that for such a simple transition, there can be a million other solutions than to look at the framework's ticketing system. all things being equal, it is safe to assume the problem will lie elsewhere... (and yes, I know of an error to do with Fx.Scroll that is still not patched but I don't think it would affect your setup).
for starters, my debugger on IE7 reports a JS exception on line 57 of your code:
if($('prog')) { // error somewhere here.
progBrowser = new ProgBrowser('prog',{
topX: '50px',
topY: '100px',
mouseOnColor: '#ffe400',
mouseOutColor: '#ffffff'
});
}
subsequently, a lot of code breaks and you get an utter mess on your screen. but there is nothing wrong with your instantiation - the problem is elsewhere: you have actually removed methods of the ProgBrowser class and left a trailing comma, check the bottom of the prog-browser.js file
}, // this comma will always break IE.
});
as for the scrolling problem, you can try using element.scrollTo(x,y) - but in any case, you have totally rewritten the normal event handlers for the class (replacing the click event with a onclick assignment etc) - fix the exceptions and post back your error-free page and we can look at doing scrollback again. good luck :)

Categories

Resources