So I am currently working with an e-commerce cms that implements Lightbox to display large product pics.
In the sidebar I have implemented my own tab group powered by jquery-ui.
The sidebar works perfectly on every page except the product pages. i soon found out the problem was the call to prototype.js used by Lightbox...When i comment out the call to the prototype script the tab group starts working again.
I have tried various things like trying to change the scope of my code and reordering when the scripts are called, but this hasn't worked...any ideas on what i could do to remedy the situation?
NOTE: I didn't include any code because i thought we could just throw around soem theory : )...if you think anything would help i can add it
thanks for any help,
~skev
The problem was i needed to use $.noConflict();
before #MichealKoper suggested this i had no idea it existed
Thanks!
Related
Have been bashing my head against the wall for a good day and a half now. Did everyone abandon old fashioned page structures to go to jQuery Mobile?
I have a webpage, tracks legislation. Main navbar goes as such:
/bills/list, /legislators/list, /committees/list
Where each link is rewritten into
index.php?category=$1&detail=$2
so /bills/list translates to
index.php?category=bills&detail=list
But when I load a page from the navbar, using an a href tag, the pages load all nice and easy using the AJAX loader, but the newly loaded pages 1. don't run scripts, and 2. don't display any formatting. This is a problem.
All the suggestions I have seen say to .bind something or .refresh or .trigger without any context of where that goes, and everything I have tried in that vein has frustrated me to no end.
Please help! And by the way, if I just data-ajax=false everything it works perfectly. But I want the quick loading that ajax gives! I just don't understand how it works and there are really no good pointers on the web I could find.
Code in this pastebin: http://pastebin.com/9jMxV0B6
You can see some artifacts of my struggling to get the thing working.
From what I gather, you shouldn't call new pages via a href, but then why the hell does jqm use href's for its nav menu? Is that supposed to call a function or something?
"But when I load a page from the navbar, using a basic old fashioned a href tag, the pages load all nice and easy using the AJAX loader, but the newly loaded pages 1. don't run scripts, and 2. don't display any formatting. This is a problem."
That happens because JQM ignores all the headers in all other pages besides the first page that loads. So if you want to do any changes to the page use page events, place them In first page.
I had problems understanding it also. Here is a link to my previous post that explains it a bit: How do I enable onload in jQuery mobile (open page both from link & load)?
Hope it clears some things for you. My recommendation for you is to do two simple pages and test simple URL functionality.
I wanna have a dropdown menu like this link: http://datatables.net/release-datatables/examples/basic_init/table_sorting.html
(The one that are right below "Live example" line);
I haven't got many experience of working with jQuery UI, and I guess that result is produced by using it. Could you suggest me a way to create that dropdown.
Thank you.
P/S: that may be ok if it is not using jQuery UI (it's just my guess)
That solution doesn't appear too complex - they've got all the data already, and they're just hiding rows depending on what's selected.
On the other hand, as that's an open source project, you could just download it or use the hosted versions and integrate it on your site, which is probably easier than rolling your own solution.
Ok, got it. This is just default style in Firefox (There's no style applying for it yet). I got this misunderstand due to changing browser.
Long story short:
We've had errors being logged concerning a JQuery/JQueryUI based system for some time. At it's core we're doing a pretty basic click link -> JQuery AJAX GET -> Open JQueryUI modal pattern.
The error we were getting appeared simple - "Object doesn't support property or method 'dialog'" - leading us to believe there was an error with JQueryUI. After expending a lot of time ruling out browser incompatibilities, bad code on JQuery's end, bad code on our end, angry code gods... we caught a lucky break. A 100% repro on one of the machines in the office.
Turns out the thing was riddled with adware - specifically [an older version of] easyinline - http://www.easyinline.com. When the user clicked any link a cascade of javascript files would be loaded, including reloading JQuery from Google's CDN.
For most links this isn't really a problem - they take you off the page anyway and everything reloads. But for our modals it meant that every modal link would stamp over our JQuery at the point the request was sent, resulting in the response trying to make use of the 'new' $ which would now be missing JQueryUI and any other plugins.
Initially we thought about making another global var ($$ or something) for 'our' JQuery and explicitly using that in our code instead of just $. The issue with that is that we were using a few other 3rd party tools which rely on $ and the adware-loaded $ is a different (older) version. So it's important that we preserve $ correctly.
Any ideas? I'm aware of JQuery's noConflict() method but after a cursory glance don't think it fits the bill.
Ultimately we've decided to re-establish our JQuery integrity when we receive any ajax responses (i.e. just before the open modal code is executed). All our ajax stuff is wrapped in our own handler so this was fairly easy to inject across the board.
Basically;
We have the original JQuery 'saved' - we've got it in-scope thanks to our handler but it could be easily put into a separate global (like $$) just after it is loaded. In our ajax response handler we've got a fairly straightforward check;
if (window.$ !== $$) {
window.$ = window.jquery = window.jQuery = $$;
}
This will reset the global jquery back to what it should be.
well this is just a work around and not a full fledged solution.
you can try multiple things here
1. if you have control over what the adware loads then just put in something like this if(!$) where they try to load the jquery
2. try loading your plugin at the end of the page
3.even if end of the page is not working. Try injecting the link(a script tag using document.write) to the plugins CDN in the Jquery document ready event. this would ensure that the plugins code would be loaded at the end when all the jquery is already loaded (not a preferred thing).
I have the following issue.
In the following JSFiddle1 the dialogs allow the editing of folders and the editing of links.
In this JSFiddle2 I try to add JQuery UI tabs to the previous JSfiddle and apply the model to a div in one of the tabs
ko.applyBindings(foldersModel, document.getElementById("folders-view"));
the dialogs do not work.
Any ideas?
Your're not doing it right, use custom bindings handlers to achieve this instead.
And since I'm such a nice guy I've already made my own bindings public and with a JSFiddle togo with it.. :P
https://github.com/AndersMalmgren/Knockout.Bindings
http://jsfiddle.net/H8xWY/
Sorry, but I've never seen so many logic errors in a code before :D
Anyway, beacuse I was bored and are a nice guy i cleaned up the code somewhat and fixed the bugs
http://jsfiddle.net/uK5KL/20/
I'm looking to build a navigation system similar to Apple Finder using jQuery UI. The idea is you drag an object into this 'finder' navigation and are able to navigate between folders to drop an object. This is to behave similar to moving a file from on your Desktop to a directory or moving a file between directories.
Additionally, inside this 'finder' navigation, I'd like to be able to sort objects by dragging and dropping using jQuery UI Sortable, except it will need to be a nested sortable option.
Has anything like this been created yet? I prefer not to reinvent the wheel in javascript if necessary. Otherwise, any examples or directions to help solve this will be appreciated.
Thanks!
I'm not sure if this helps but you can see what I've done with jQuery Finder: http://code.google.com/p/jqueryfinder/ (the demo link does not work, so you'll have to checkout the trunk)
It's pretty much abandoned so I'd love it if someone else would pick it up.
I believe this is quite similar if you're still looking..
http://net.tutsplus.com/tutorials/wordpress/wordpress-sidebar-turned-apple-flashy-using-jquery-ui/