I'm using jQuery mobile and need it to not apply jQuery to a specific form element. I can see in the jQuery it does target this specific element. It applies an effect I don't want applied.
Is there some way to do this? I have tried using style= inside the element but the jQuery seems to override this.
Add the attribute data-role="none" to the dom element you don't want enhanced.
Related
I have an element:
<td colspan="3" data-enhance="false">
<select id="CandidatesListBox" size="9" onchange="MoveToGeocode()" style="width: 100%" class="candidatesList" data-role="none"></select>
</td>
I want this element to have no jQuery Mobile styles. The problem is that I fill this item dynamically, and jQuery mobile will ignore all data-enhance="false" tags then adding dynamic elements through javascript. JQuery Mobile will also transform the control, so jQuery that would work on the item (.add(), for example) will not. I need to make a dynamic element with no jQuery mobile styles or elements. Is this possible?
Edit
I have also tried to disable all selects from using JQM, but get the same issue:
$(document).bind('mobileinit', function () {
$.mobile.keepNative = "select"; /* jQuery Mobile 1.4 and higher */
});
JQM adds styles and render them when you specify the JQM css file. Once it is called and unless you override the CSS by your own applying styles for a particular element cannot be stopped. Because JQM itself wrapps our elements with their elements. So as a solution get the element and remove additional class names added by JQM from the element. Also you will need to remove wrapping elements too.
I've been trying to create an horizontal radiobutton horizontal list, but somehow I don't get the same visual result as when done with the data-* attributes.
If I do it with code I get squared buttons, while using the attributes I get a nice rounded corner toolbar.
Here is the code I use for creating the button list:
$(element).controlgroup({ mini: true, type: "horizontal" });
which should be the same as the one I use with the data-* attributes:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
I've posted a jsfiddle to show the result
http://jsfiddle.net/simonech/zeDt4/3/
Can someone shad some light on this strange behavior?
Thx
Simone
To make them look the same, try this:
$("#mycontrolbox").controlgroup({ mini: true, type: "horizontal"});
$("#mycontrolbox").attr("data-role", "controlgroup");
updated jsFiddle - http://jsfiddle.net/zeDt4/4/
Now, why is this.
I think that jQuery mobile is actually not build upon jQuery UI even though it is currently very close. jQuery mobile is using those data-** attributes to select what is going to be a role of each tag. When the element is added to the html, jqm reads the content and based on what is in these data-role attributes, it decorates / replaces / the current content with its own. This is more about what is done to the element in order how it looks.
On the other hand, when you call
$("#mycontrolbox").controlgroup();
This does create a jQuery component allowing you to use the methods of that component. etc.
This is close to how the component behaves from the script point of view. This does not, however, add data-role attribute to the element itself.
I need to be able to dynamically replace the radio buttons in a controlgroup. I've come up with a solution, but I'm wanting to make sure I'm going about it the right way. Here's a jsFiddle.
Should I be manually modifying the classes after calling .checkboxradio() on each of the newly-created radio buttons, or is there a method in jQuery Mobile somewhere that will help me accomplish this?
Please note that the jsFiddle here works as I need it to. I'm asking if there's an easier (or more idiomatic) way to update the dynamically-created radio buttons' visual styles to conform to the controlgroup style.
Content should be added to the DOM before jquery mobile enhancement, for instance by binding to the page beforecreate event instead of the page pagebeforeshow. This way your content will be properly enhanced.
As for dynamic content, you can enhance it as soon as it has been inserted in the DOM. See this modified fiddle.
try this:
$('#creneauListPage #fieldcontain input').checkboxradio();
$('#creneauListPage #fieldcontain .ui-btn').removeClass('ui-btn-corner-all');
$('#creneauListPage #fieldcontain .ui-btn:first').addClass('ui-corner-top');
$('#creneauListPage #fieldcontain .ui-btn:last').addClass('ui-corner-bottom ui-controlgroup-last');
I have a page on which I'm using jQuery UI Tabs, what I'm doing is loading the content of each tabs via Ajax, but the problem I'm having is that, in the content of my tabs, the buttons (I'm using jQuery ui button) lose all their jquery ui classes, meaning:
When the page loads for the first time, my buttons look like this:
<button class="my_button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only">
<span class="ui-button-icon-primary ui-icon ui-icon-plusthick"></span>
</button>
As you can see, my buttons have all the jquery-ui classes ui-button, ui-widget, etc.... Also, my buttons have a span which displays a plus(+) sign as a label for my buttons. Therefore, my buttons display correctly.
But when I load the same content (which contains the same buttons) via Ajax, my buttons become like this:
<button class="my_button"></button>
As you can see, I lose all the jQuery ui classes of my button. Therefore, the button is not styled
How can I fix this?
NOTE : Please note that I did not manually add those jquery-ui classes to my buttons in my HTML. When you initialize the buttons using $(".my_button").button(); in jQuery, jQuery automatically applies all the necessary jquery-ui classes to my button appropriately. So please don't tell me it's because I didn't not assign the jquery-ui classes to my buttons upfront (I should not have to). Also, I tried .live(), .delegate(), none of those work.
Please help me with this anyone
Thank you
I've faced this problem once and solved this problem using the document.ready call like
function myreadyFunc(){
$(".my_button").button();
// Other codes
}
I had my document.ready like following
$(document).ready(function(){
myreadyFunc();
});
After each ajax (success) call I used to call
myreadyFunc();
Hope this will help you too. I used this approach to execute document.ready's code that was not possible by calling document.ready after each ajax call.
When I use JQuery UI's draggable/sortable feature at the parent element....and when applying contenteditable attribute at the child item....the selection feature doesn't works....
<div id="parent">
<div id="child" contenteditable></div>
</div>
$('#parent').draggable();
i.e. focus or active features do not work....without the dragging/sorting features of jQuery UI...focus and active features works at content editable applied element.....
OK.....I found the solution here: How can I enable 'draggable' on a element with contentEditable?
But the problem is: when calling the focus() method inside click-event...it brings cursor at the begging of focused element....it should be at the end...for typing something cursor should go to end...Is there any way to call focus() method and tell him that place cursor at the end of focused element?