First time I am using jquery mobile the slider create event seems to not want to fire.
According to jQuery Slider page the following events should work (create/start/stop), I did get start/stop to work but not the create, code below:
<script>
$(function () {
$("#slider-s").slider({
create: function (event, ui) {
console.log("creating");
},
start: function (event, ui) {
console.log("start moving");
},
stop: function (event, ui) {
console.log("stop moving");
}
});
});
</script>
<input type="range" name="slider-s" id="slider-s" value="25" min="0" max="100" data-highlight="true">
So every time I move up the slider I get start moving and when I stop it I get stop moving but I thought I would get creating once the slider has been loaded/created.
Working example: http://jsfiddle.net/Gajotres/6dQ9E/
The point is to use proper page event to detect right widget event. Also you should never used classic document ready with jQuery Mobile, sometimes it works just fine and sometimes it behaves extremely weird. That's why jQuery Mobile page events exist. Read more abut it here.
Javascript used:
$(document).on('pagecreate', '#index', function(){
$(document).on('slidecreate', '#slider-s', function(){
console.log("create");
});
$(document).on('slidestart', '#slider-s', function(){
console.log("start");
});
$(document).on('slidestop', '#slider-s', function(){
console.log("stop");
});
});
Related
So I have a jQuery UI dialog with some buttons inside (full example here => http://jsfiddle.net/VLr5G/3/):
<div id="test">
<button>Btn 1</button>
<button>Btn 2</button>
<button>Btn 3</button>
</div>
What I want to do is force the focus on the "Close" button - I have tried applying the following code when the dialog opens:
open: function() {
$(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
}
Unfortunately the focus always keeps getting on the first button inside the dialog. Is this a bug, or am I missing something ?
Thanks a lot in advance for your help !
UPDATE
Okay so the answer from Stanley works fine with my first example... But try to change the version of jQuery UI => http://jsfiddle.net/VLr5G/10/
From what I could find so far, it worked until jQuery UI 1.10.0.
You are not getting the close button correctly.
You should do this instead:
$(document).ready(function() {
$('#test').dialog({
buttons: {
'Close': function() {$(this).dialog('close');}
},
open: function() {
$(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
});
Working jsfiddle: http://jsfiddle.net/GG7EP/2/
UPDATE
To make it work with jQuery 1.10.0 or above, call the button's focus function in focus event
$(document).ready(function() {
$('#test').dialog({
buttons: {
'Close': function() {$(this).dialog('close');}
},
focus: function() {
$(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
});
JsFiddle: http://jsfiddle.net/V3P4t/
I have an infowindow in a google map like so,
var content = '<div id="link"><input type="button" value="Report this light" id="reportBtn"/></div>';
i am using jquery mobile to bind a 'click' event when the infowindow pops open on the map but it doens't fire, my code:
$(document).on('pageinit', function() {
$('#reportBtn').on('click', function() {
alert('it works');
});
});
You need to use event delegation. Try
$(document).on('pageinit', function() {
$(document).on('click', '#reportBtn', function() {
alert('it works');
});
});
Instead of document you can use nearest static element that is a parent to <div id="link">.
$('#nearestparent').on('click', '#reportBtn', function() {...});
I m using jquery tabs .Like to know how to refresh content on tab click .
I m using document ready function with
$(#TABS).TABS()
$(document).ready(function(){
$("#tabs").tabs();
$("#tabs").bind("tabshow",function(event,ui){window.location.href=ui.tab;});});
See the "select event" here
It says:
This event is triggered when clicking a tab.
Code examples
Supply a callback function to handle the select event as an init option.
$( ".selector" ).tabs({
select: function(event, ui) { ... }
});
Bind to the select event by type: tabsselect.
$( ".selector" ).bind( "tabsselect", function(event, ui) {
...
});
in jQuery-UI 1.10, the following should help:
$("#TABS").tabs("load", $("#TABS").tabs("option", "active"));
Edit: More code details:
$(function() {
$("#TABS").tabs();
$("#TABS").on('click','li',function(event,ui) {
$("#TABS").tabs("load", $("#TABS").tabs("option", "active"));
});
});
Here is a link to jsfiddle
I'm using the following to control my accordion:
$(function() {
$( "#accordion" ).accordion({
autoHeight: false, collapsible: true, active: false
});
$('#accordion').bind('accordionchange', function (event, ui) {
$(window).scrollTop(ui.newHeader.offset().top);
});
});
It works well unless I open the same section twice. Then, the accordion freezes and I get the following error:
ui.newHeader.offset() is undefined
The accordionchange event appears to be the jQuery event that corresponds to the accordion's activate event; yes, this is a bit confusing but that's what the source tells me:
// change events
(function( $, prototype ) {
//...
} else if ( type === "activate" ) {
ret = _trigger.call( this, "change", event, {
The activate documentation has this to say:
activate( event, ui )
Triggered after a panel has been activated (after animation completes). [...] If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects.
So your ui.newHeader is an empty jQuery object and empty jQuery objects don't have offset()s. A quick length check on ui.newHeader will probably sort you out:
$('#accordion').bind('accordionchange', function(event, ui) {
if(ui.newHeader.length)
$(window).scrollTop(ui.newHeader.offset().top);
});
Demo: http://jsfiddle.net/ambiguous/e3gUW/
jQuery UI tabs options have ajaxOptions.
I have next code:
$('#tabs').tabs({
cookie:{expires:1},
cache:true,
ajaxOptions:{
beforeSend: function(xhr,settings){
$(".ajax-gif").css("top",$(window).scrollTop()).show();
},
error: function(xhr,status,index,anchor){
$(anchor.hash).html("Couldn't load this tab.");
},
complete: function(xhr,textStatus){
$(".ajax-gif").hide();
}
}
});
But ajax-gif doesn't show up.
The same code in jQuery ajaxSetup (without jQuery UI) works perfect for usual ajax requests (not in ui tabs). Where did I mistake?
Thanks!
clarification
Usual ajax requests use POST form and tabs use GET form.
What version of jQuery UI tabs are you using? ajaxOptions option is only available up to version 1.8, you can see at http://api.jqueryui.com/1.8/tabs.
For current version (1.11) you would use beforeLoad property. Like this:
$('#tabs').tabs({
beforeLoad: function (event, ui) {
$(".ajax-gif").css("top",$(window).scrollTop()).show();
ui.jqXHR.complete(function(data) {
$(".ajax-gif").hide();
});
ui.jqXHR.error(function(data) {
$(anchor.hash).html("Couldn't load this tab.");
});
}
});
I found solution:
$(document).ajaxSend(function(){
$(".ajax-gif").css("top",$(window).scrollTop()).show();
});
$(document).ajaxComplete(function(){
$(".ajax-gif").hide();
});