I have been tooling around with this all day and can't figure it out...
I have a list of buttons (utilizing the jQuery UI buttonset() functionality) and I am wanting to keep the ui-active class even after I hover off of a button, but for some reason, jQuery UI functionality keeps removing the class and erases the highlight from the button (this is bad because the user then wouldn't know what button they are on).
Here is the code so far:
function showSection(sectionIndex){
$('.listSection').hide();
$('#listSection' + sectionIndex).show();
$('.listSectionHeader.ui-state-active').each(function(){
$(this).removeClass('ui-state-active');
});
$('#listSectionHeader' + sectionIndex).addClass('ui-state-active');
}
var buttons = $( "#listHeader a" );
$.each(buttons, function(){
$(this).bind('mouseleave.button', function(){
if($(this).hasClass('ui-state-active'))
return;
});
});
Something like this: http://jsfiddle.net/4yamQ/ ? Would require an extra class in the css such as:
ui-state-active,
ui-mycustomclass
{
jquery ui styling...
}
Related
I'm trying for some time to make events work, but they do not work, I'm trying to look for any reaction with alert or console.log but nothing to do, no reaction. I tried to change the selectors, same result. I also try to introduce them with $(document).ready or $("#mypage").("pagecreate", ...
Still trying with jsfiddle, it works perfectly but on my file from the browser, nothing.
I have only swipe that works.
Scrollstop and navigate does not work.
$('#neww').on("scrollstop", function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
recept2();
}
Looking for a way to dynamically add more lists to the bottom of jQuery Mobile listview
$("#mypanel").on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
$("#mypanel").panel("close");
console.log(direction);
}
});
how to control back button event in Jquery mobile?
I've got a navbar outside the page div in a footer (it is on every page) I tried to do a simple fix for the persistent active state of the navbar It worked for the tabs on one of the pages but does not seem to work for this.
Actually, everything works except for some reason ui-btn-active does not get added
Here is the code
$(document).one( "pageinit", function() {
$('div[data-role="footer"] [data-role="navbar"] a').click(function(e) {
$(this).html("abc");
$('div[data-role="footer"] [data-role="navbar"] .ui-btn-active').removeClass('ui-btn-active ui-state-persist');
$(this).addClass('ui-btn-active ui-state-persist');
});
});
The html of the anchor changes, ui-state-persist gets added on the last line but ui-btn-active just does not get added for some reason...
Ok it seems jquery mobile automatically removes ui-btn-active on page transition, even if your navbar is out of page div (which I find kind of lame...) It seems it does this on or after pagebeforeshow, because this did not work with that event... so I just used pageshow instead.
Here is the working code:
var navbar;
$(document).on("pageshow", function() {
if(navbar) {
$(navbar).addClass('ui-btn-active')
}
});
$(document).one( "pageinit", function() {
$('div[data-role="footer"] [data-role="navbar"] a').click(function() {
navbar = $(this);
});
});
I have a jquery mobile form with several radio inputs whit the options "DS", "NO" and "YES". I want when I click a button it simulates a click on the "YES" option of all radio buttons.
I use this code:
$("#btn-all-yes").click(function(){
$(".replay-yes").each(function(index, element){
$(element).trigger("click");
//$(element).click();
});
});
But I need to do click two times in the button to achieve the desired result. If I put the line '$(element).trigger("click")' two times it works, but I think it should work with a single call to the click event.
You can see all the code at http://jsfiddle.net/qwLPH/7/
You need to change its' status using .prop and then refresh it .checkboxradio('refresh').
Working demo
Update - Uncheck other buttons
$("#btn-all-yes").click(function () {
$('[data-role="controlgroup"]').find("[type=radio]").each(function () {
if ($(this).hasClass('replay-yes')) {
$(this).prop('checked', true).checkboxradio("refresh");
} else {
$(this).prop('checked', false).checkboxradio("refresh");
}
});
});
Old answer
$("#btn-all-yes").click(function(){
$(".replay-yes").each(function(index, element){
$(element).prop('checked', true).checkboxradio("refresh");
});
});
Reference
Similar issue
Try to initialize the click on page load:
$(".replay-yes").each(function (index, element) {
$(element).trigger("click");
//$(element).click();
}).click();
//-^^^^^^^----------this way
Tryout in fiddle here
I have two submit buttons Back, Continue. What should I to do to disable client validation when I click on Back. I was trying to add cancel class to button attribute but It seams does not help.
UPD. Actually this is working cancel class. But It seams not working if you add it dynamically(by javascript).
I attached an event handler to certain buttons, that altered the settings of the validator object on that particular form.
$(".jsCancel").click(function (e) {
$(e.currentTarget).closest("form").validate().settings.ignore = "*"
});
This has worked like a charm for me in MVC3.
I don't know if this helps you in particular, but since I use ajax form, I had to attach the event to these buttons each time the contents of the ajax form was replaced, by using the event ajax success. The full code that reparses the form and attaches the event to the cancel buttons is:
$(document).ajaxSuccess(function (event, xhr, settings) {
var $jQval = $.validator, adapters, data_validation = "unobtrusiveValidation";
$jQval.unobtrusive.parse(document);
$(".jsCancel").click(function (e) {
$(e.currentTarget).closest("form").validate().settings.ignore = "*"
});
});
Hijack the button click for form submission using JavaScript.
Here is good example with jQuery:
$("#MyButton").click(function(e) {
//submit your form manually here
e.preventDefault();
});
This is really a comment to the answer by tugberk, but comments don't show code examples very well.
Some browser versions do not like the "preventDefault()" function. After being bitten by this a few times, I added a simple utility function:
//Function to prevent Default Events
function preventDefaultEvents(e)
{
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
You call it in place of "preventDefault" like this:
$("#CancelButton").on("click", function(event) {
preventDefaultEvents(event);
return false;
});
You can use "cancel" css class.
Ex: <input type="submit" value="Cancel" name="Cancel" class="cancel" />
JQuery.Validate handle the rest in the following code:
// allow suppresing validation by adding a cancel class to the submit button
this.find("input, button").filter(".cancel").click(function() {
validator.cancelSubmit = true;
});
example: i have an un-ordered list containing a bunch of form inputs.
after making the ul .sortable(), I call .disableSelection() on the sortable (ul) to prevent text-selection when dragging an li item.
..all fine but I need to re/enable text-selection on the form inputs.. or the form is basically un-editable ..
i found a partial solution # http://forum.jquery.com/topic/jquery-ui-sortable-disableselection-firefox-issue-with-inputs
enableSelection, disableSelection seem still to be un-documented: http://wiki.jqueryui.com/Core
any thoughts?
solved . bit of hack but works! .. any comments how i can do this better?
apply .sortable() and then enable text-selection on input fields :
$("#list").sortable({
stop: function () {
// enable text select on inputs
$("#list").find("input")
.bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(e) {
e.stopImmediatePropagation();
});
}
}).disableSelection();
// enable text select on inputs
$("#list").find("input")
.bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(e) {
e.stopImmediatePropagation();
});
A little improvement from post of Zack - jQuery Plugin
$.fn.extend({
preventDisableSelection: function(){
return this.each(function(i) {
$(this).bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(e) {
e.stopImmediatePropagation();
});
});
}
});
And full solution is:
$("#list").sortable({
stop: function () {
// enable text select on inputs
$("#list").find("input").preventDisableSelection();
}
}).disableSelection();
// enable text select on inputs
$("#list").find("input").preventDisableSelection();
jQuery UI 1.9
$("#list").sortable();
$("#list selector").bind('click.sortable mousedown.sortable',function(e){
e.stopImmediatePropagation();
});
selector = input, table, li....
I had the same problem. Solution is quite simple:
$("#list").sortable().disableSelection();
$("#list").find("input").enableSelect();
The following will disable selection for the entire document, but input and select elements will still be functional...
function disableSelection(o) {
var $o = $(o);
if ($o.find('input,select').length) {
$o.children(':not(input,select)').each(function(x,e) {disableSelection(e);});
} else {
$o.disableSelection();
}
}
disableSelection(document);
But note that .disableSelection has been deprecated by jquery-ui and will someday go away.
EASY! just do:
$( "#sortable_container_id input").click(function() { $(this).focus(); });
and replace "sortable_container_id" with the id of the element that is the container of all "sortable" elements.
Quite old, but here is another way:
$('#my-sortable-component').sortable({
// ...
// Add all non draggable parts by class name or id, like search input texts and google maps for example
cancel: '#my-input-text, div.map',
//...
}).disableSelection();