I'm extremely new to jQuery, although not new to javascript in general. I'm trying to use the UI dialog widget. I've downloaded a .min.js file containing the dialog widget and a few others, and already have the core .min.js.
I copied the demo code directly from the UI doc for modal form and pasted it into a plain html file. Clicking the button does not work; nothing happens.
Can anyone tell me if there's something else I need to do to use the demo code? And how do I go about debugging this jQuery stuff in Chrome? (I do have FireBug Lite installed; just haven't quite figured out how to use it for jquery.)
I can post pieces of code if anyone can tell me something specific to look for, but the entire html file, simple as it is, is over 100 lines. Here's a link to my sample.
$( "#create-user" ).button is not a function
it is supposed to be
$( "#create-user" ).click(function(){.....
Judging from the .button() call, you forgot to include a reference to jQuery UI.
Related
Above is just some test code for me to learn how to program with backbone and jqm.
Initially, I think it's always better to start running my code when the document is ready, so I wrap backbone view creation logic in the document ready function: $(function(){ }). But the page is just not showing like a mobile app.
So I tried and tried, and I found when I remove the document ready function part, the page will be displayed correctly, exactly like a mobile app.
What's wrong with document ready function here?
Please help.
I guess that you are applying some Backbone manipulation for elements like #homepage which is trying to manipulate by JQM too. That's why you don't have any problem if you remove the document ready function. You can do this Backbone code inside JQM page event functions.
JQM page events. So the other code works after the pages are rendered by JQM.
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.
We encounter the following problems with Jquery Mobile.
Our site is divided in a mobile and a fixed desktop site.
Both use the same database and php code. Only the templates are different.
On our mobile site we use Jquery mobile for a better user experience and that works fine. However we integrated a button "goto desktop".
This link should bring us back to our "normal" desktop site.
But there is the problem. In the desktop-site, Jquery mobile is still activated and it replaces drop down fields, input fields and make a complete mess of the desktop site.
We tried everything to disable JQM but nothing seems to work.
How we can switch from our mobile site template to the desktop site template and disable JQM completely when we are on the desktop template?
Thanks a lot for help!
There are few available solutions but only one will really do.
Working example: http://jsfiddle.net/Gajotres/NvEcW/
Few things are needed, first we need to set this:
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
it will give us an ability to programatically turn on/off content enhancement. If you already don't know this mobileinit event must be initialized before jQuery Mobile initialization but after the jQuery initialization. This must always be a part of a page.
There's one last step. When we want to move from mobile to desktop page we need to reload page and use this javascript:
$(document).on('pagebeforecreate', '#index', function(){
$(this).attr('data-enhance','false');
});
Pagebeforecreate event is important because at this point content is still not enhanced and attribute data-enhance = false will prevent any further page enhancement. If you want to turn it on again just set attribute value to true.
If you want more solutions then take a look at my other answer, search for the topic Methods of markup enhancement prevention : jQuery Mobile: Markup Enhancement of dynamically added content.
I want to use just the slide transitions / AJAX navigation component of jQuery Mobile. On jQuery Mobile's website they have a "Custom Builder Tool" which lets you select just the "AJAX Navigation System" (and it auto-selects associated stuff like transitions).
http://jquerymobile.com/download-builder/
This yields some custom JavaScript and CSS files. For the life of me, I can't get this to work on a webpage. If I include these custom files, then add data-transition="slide" to an anchor element, nothing happens. If I include the full jQuery Mobile library it works perfectly (but screws up the styling of my mobile site). How can I make this work? Maybe one needs to initialize the custom jQuery Mobile manually? I can't find anything in the docs about this. Help!
Here's how I got this to work:
I included the latest jQuery Mobile js but used the stripped down css from my custom JQM build (using the Custom Builder tool).
data-role="page" was added to page content containers. Some scripts called in needed to be moved to now load from within the content containers. Now transitions work as expected.
I hope this helps somebody.
A question about jquery UI widgets. Is there a way to get them without all the bloat of CSS that they carry and render out ? I'm having a complete mess with tabs rendering all those jquery-ui-widget, jquery-ui-panel etc. etc. classes.
This guy here does it somehow
http://www.davereederdesign.com/post/2010/04/23/Tabs-with-Memory.aspx
?
He doesn't use the JQuery Tab widget.
I know this as an old post, but I'm having a similar problem applying UI widgets to an already very heavy website. If you inspected the widget in Firebug you might be able to only grab the rules that the widget uses and create a custom CSS file to apply to it. I'm going to try this when I'm back at work tomorrow and I'll report back on my progress.