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" />
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.
This is my first question on SO so i'll try and make it as clear and as understandable as possible.
I've recently started messing around with Angular JS and currently I am working on a mobile app using Angular JS and jQuery Mobile. So far I've not had any major problems and so far have no had a need to consider any external libraries for integration (such as the angular js + jquery mobile adapter). I've created a multi-page app (currently only two pages) and used separate controllers for each page (login + content page). The app itself is simple, it's just a list keeping app and i've created a quick jsfiddle based on the ui aspect of the content page: http://jsfiddle.net/G7JNV/4/
The app works as expected from the jsfiddle. However because the content page is a page in the same html document (index.html) as the login page, to navigate to the content page the url becomes:
.../index.html#mainpage
(mainpage being the page for the list keeper)
Thats when things start getting funny. When the url is like above, when adding an item to the list, the item is initially unstyled (it doesn't look like it's part of the list) but the css styling for that item comes back after adding another item. Of course the next item is then unstyled (and so on).
If you want to see what the issue looks like:
Everything however works fine if i don't have the hash page as part of the URL (I tested this by turning the two page app into just one page for the content so that .../index.html goes straight to the content page). The css is applied to the dynamic content fine as one would expect.
Of course I have no idea why it's doing this and I suspect that it's something to do with how angular and jqm treat the hash anchor in the URL (but bare in mind I don't have much experience in both Angular JS nor jQuery Mobile).
Any help from any of the more experienced Angular JS (and jQuery Mobile) users would be greatly appreciated!
You should be creating a directive that encapsulates the list and the logic that you have for it.
As suggested in the comments to your questions, a timeout can work. If you're having issues with the element "flashing" or "flickering", you can use the ngCloak directive to deal with this.
You may also want to check out the $locationProvider configuration in your app and turn off HTML5 mode or set the hash prefix.
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!
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/
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.