jQuery ui Autocomplete with json call, why does it work by itself but not on the main page? - jquery-ui

Here are the two urls: Working And Not Working
I cannot for the life of me figure out why I can get the simple version working but the other one is sending the data, receiving it and then not displaying the results.
I thought it was a css issue, but I've tried various methods to correct it and I haven't had any luck.
No javascript errors as well.

Not sure how much this helps, but a quick look reveals that on the test page you include this stylesheet:
http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css
But I cannot find a link to it on the 'not working' page.

Related

Using Jquery moble with old fashioned hrefs just wont work right

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.

Google Analytics MIME type issue in Chrome using Rails 3

I'm adding GA to a Rails 3 app, which would normally be extremely simple, of course. I've added the GA JS snippet, which is rendering just fine. Everything works perfectly in Safari. In Chrome, however, it's giving me a console error: Resource interpreted as Script but transferred with MIME type text/html: "about:blank", pointing to the JS line that loads the ga.js file: s.parentNode.insertBefore(ga, s). Some things I've investigated:
I created a plan HTML page with the JS snippet, and it loads outside Rails in Chrome with no error.
The same HTML page, when put in /public, gives the error above.
The same HTML page, loaded in Safari from /public, doesn't give any error according to Firebug.
I tried the GA Debug extension in Chrome, but it remains silent, because ga.js isn't getting loaded.
Looking at the developer console in Chrome, I see a request for "http://www.google-analytics.com/ga.js" that seems to stay in "pending" state, and a redirect to "about:blank" seemingly initiated by http://www.google-analytics.com/ga.js, which makes very little sense.
So this seems to be related to Rails (since the snippet works in the HTML outside Rails), and doesn't affect Safari, but other than that I'm stumped. Hopefully I've just been staring at it wrong, and someone else will point out the obvious to me...? Anyone come across this before? Any ideas will be very much appreciated.
Came across this issue myself. "Disconnect" disabled share buttons on my site (g+, twitter and fb). Had to remove it to view the site properly.

jQueryUI with master pages

So I have recently started using jQuery, jQueryUi and ASP.NET MVC. And I have been trying to use jQueryUi widgets like tabs, menu etc. in MVC pages.
Now, these widgets work perfectly fine when used without a master page. But when there is a master page involved in the picture, it seems to give the error
object doesn't support property or method 'menu'
or
object doesn't support property or method 'tabs'
etc.
Now, I have googled this problem and it seems that this is a common problem when using jQuery with master page.
So if anyone can tell me what is the proper way to make these things work with master pages please let me know.
And I have not posted a code because this always happens!! I have tried different code, different pages and I have always copied the code straight from jQueryUi website. So the code must be right. And it does work perfectly well without master pages! So I am looking for a general solution.. not just solution for a particular code.
Thank you!
I figured it out.. apparently the order in which the tags are written matters...
for me.. this is worked..
<script src="../../Scripts/jquery-1.8.3.js"></script>
<script src="../../Scripts/jquery-ui-1.9.2.custom.js"></script>
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />

Prototype.js Interferring with Jquery UI

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!

Preventing malicious overwrite of JQuery

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

Resources