Response title
This is preview!
Move this topic
JQM 1.4.0: dynamically set disabled="disabled" to option in selectmenu
in jQuery Mobile
•
9 years ago
This attribute disables an option in a selectmenu:
disabled="disabled"
How to set or unset this option in a JQM not-data-native menu dynamically?
This is my fiddle:
http://jsfiddle.net/rCFzP/3/
I tried:
$("#idSel option[value='c']").prop('disabled', true);
This only works when the selectmenu has data-native-menu="true", not when false.
What it does, is adding this property:
Please help! I tried the whole morning to solve this..
disabled="disabled"
How to set or unset this option in a JQM not-data-native menu dynamically?
This is my fiddle:
http://jsfiddle.net/rCFzP/3/
I tried:
$("#idSel option[value='c']").prop('disabled', true);
This only works when the selectmenu has data-native-menu="true", not when false.
What it does, is adding this property:
disabled=""Please help! I tried the whole morning to solve this..
1
Replies(9)
Hello Henk.
Include the Jquery in body instead of onLoad and things should work fine. Even in your fiddle, in Frameworks & Extensions section change onLoad to No wrap - in <body> and your code will work.
Cheers!
Shreerang
Web Developer
Spatial Unlimited
Cheers!
Shreerang
Web Developer
Spatial Unlimited
Leave a comment on Shreerang's reply
Thanks. You saved my day!
Leave a comment on henk's reply
It works, but it leaves some questions.
What is the difference between placing JQM in body vs head.
In the anatomy of a page (http://demos.jquerymobile.com/1.4.0/pages/) is stated that JQM must be placed in the head.
What is correct here?
Thanks,
Henk
What is the difference between placing JQM in body vs head.
In the anatomy of a page (http://demos.jquerymobile.com/1.4.0/pages/) is stated that JQM must be placed in the head.
What is correct here?
Thanks,
Henk
Leave a comment on henk's reply
You shouldn't load the jQuery Mobile CSS and JS in the body.What is the difference between placing JQM in body vs head.
In the anatomy of a page (http://demos.jquerymobile.com/1.4.0/pages/) is stated that JQM must be placed in the head.
Shreerang gave you a work-around to use in a Fiddle only that is usable for simple single-page tests.
Leave a comment on watusiware's reply
The solution of Shreerang works on my multi page project.
This is the source:
http://m.vocatrain.com/
Is there no real solution? And what is the catch to load JQM (and jquery) in the body?
This is the source:
http://m.vocatrain.com/
Is there no real solution? And what is the catch to load JQM (and jquery) in the body?
Leave a comment on henk's reply
jQuery Mobile is designed to have the CSS and jQuery/jQuery Mobile JS loaded in <head>. Some aspects (such as setting defaults) cannot work correctly if you do otherwise.
Do you have some good reason for wanting to load it in <body>?
It's acceptable to put your own JS code in <body>, though I don't particularly recommend this approach. If you do, you should still put jQuery and jQuery mobile in <head>. You can put your own code for a specific page at the end of the page, inside the <div data-role="page">, just before the closing </div>.
The placement you have for your jQuery and jQuery Mobile JS is unexpected by the platform, and you can anticipate incorrect results. That "it works" (for now...) is not a valid argument for this placement.
I note that you've created a 21-page single-document site. IMO, this is completely impractical on mobile devices. The user will have to wait for 21 pages to download before they see anything, and some devices will likely not have sufficient memory.
Leave a comment on watusiware's reply
Somehow I was confused by the fiddle with the difference between body and head.
I moved the includes to body in my project, added the disable-code and it worked.
Now when I change the includes back to the head section, it is still working. So I don't want the includes in the body. Thanks for pointing me at this.
And thanks for looking into my code. The 21 pages are combined in 1 html file because I wrap it in a phonegap application. This way I can control all the pages from a single javascript file. And with multiple pages I have to pass all the variables every time pages are switched.
The project is 500 KB in total (including js files), so the memory problem you mention is something I want to solve.
I'll read the documentation again about this. JQM is something that has a lot of secrets for me.
Thanks,
Henk
I moved the includes to body in my project, added the disable-code and it worked.
Now when I change the includes back to the head section, it is still working. So I don't want the includes in the body. Thanks for pointing me at this.
And thanks for looking into my code. The 21 pages are combined in 1 html file because I wrap it in a phonegap application. This way I can control all the pages from a single javascript file. And with multiple pages I have to pass all the variables every time pages are switched.
The project is 500 KB in total (including js files), so the memory problem you mention is something I want to solve.
I'll read the documentation again about this. JQM is something that has a lot of secrets for me.
Thanks,
Henk
Leave a comment on henk's reply
There's nothing about PhoneGap that dictates that you put your entire project in a single document.The 21 pages are combined in 1 html file because I wrap it in a phonegap application.
If you really want to put all your JS code in a single file (it's bad practice, though) you can do that without putting all your HTML in one document. Just link to that file in <head>. (Best practice: write your JS in multiple files, making it easier to maintain. But combine it all into one and minify it prior to deployment.)This way I can control all the pages from a single javascript file
If you've used data-ajax="false", then you will need to make sure <head> is identical for every page.
After the first page loaded, though, <head> is just ignored, so you don't have to be concerned that the JS is being re-loaded for each page - it isn't.
If you haven't used data-ajax="false" (CONGRATULATIONS! You read the documentation, and you understand the jQuery Mobile document structure, Ajax loading model, and page events!) then - for PhoneGap projects - you can just omit JS and CSS links in <head> on all but the initial page.
There's no problem with loading Javascript from the first page, and having that JS handle all the pages. Just register page event callbacks using delegations, and your callbacks will run whenever the targeted pages are used.
I do prefer to have all of the Javascript loaded up front and forget about it. Most projects don't really have that much "glue" JS - the bulk of the JS is the jQuery and jQuery Mobile libraries. Your own code typically adds very little to the total size. So, IMO, it's silly to place JS in pages. It's a false economy.
What is going to hurt is 21 pages of HTML all in one file, especially if you have a lot of images.
Leave a comment on watusiware's reply
Hi,
Thanks for this comment. It hurts a little and will be a lot of work, but I'll fix this and the result will be better.
Regards,
Henk
Thanks for this comment. It hurts a little and will be a lot of work, but I'll fix this and the result will be better.
Regards,
Henk
Leave a comment on henk's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to henk's question
Statistics
- 9 Replies
- 5273 Views
- 0 Followers