apScrollTop plugin with jqm failing on page change - jquery-mobile

apScrollTop plugin gets messed up on jqm page change. I've tried to destroy it on page change, and reinit it after a few millis, no luck.
The git source shows a destroy call.. https://github.com/armin-pfaeffle/ap-scroll-top/blob/master/lib/js/ap-scroll-top.js
$(document).on( "pagecontainerchange", function() {
$.apScrollTop().destroy;
setTimeout(function () {
handleUp();
},200);
});
function handleUp() {
$.apScrollTop({
'onInit': function(evt) {
console.log('apScrollTop: init');
}
});
// Add event listeners
$.apScrollTop().on('apstInit', function(evt) {
console.log('apScrollTop: init');
});
$.apScrollTop().on('apstToggle', function(evt, details) {
console.log('apScrollTop: toggle / is visible: ' + details.visible);
});
$.apScrollTop().on('apstCssClassesUpdated', function(evt) {
console.log('apScrollTop: cssClassesUpdated');
});
$.apScrollTop().on('apstPositionUpdated', function(evt) {
console.log('apScrollTop: positionUpdated');
});
$.apScrollTop().on('apstEnabled', function(evt) {
console.log('apScrollTop: enabled');
});
$.apScrollTop().on('apstDisabled', function(evt) {
console.log('apScrollTop: disabled');
});
$.apScrollTop().on('apstBeforeScrollTo', function(evt, details) {
console.log('apScrollTop: beforeScrollTo / position: ' + details.position + ', speed: ' + details.speed);
});
$.apScrollTop().on('apstScrolledTo', function(evt, details) {
console.log('apScrollTop: scrolledTo / position: ' + details.position);
});
$.apScrollTop().on('apstDestroy', function(evt, details) {
console.log('apScrollTop: destroy');
});
}
Else some advice on a good jqm and page change compatible Scroll up thingie would be most welcome.

Related

jquery autocomplete call function if only 1 record returned

I am wanting to run a function of the jQuery autocomplete below only returns 1 result. I am not sure how to check that there is only 1 result in the list.
Please help.
$(function() {
function log(message) {
$("<div>").text(message).prependTo("#log");
$("#log").scrollTop(0);
}
$("#inputBox2").autocomplete({
source: "searchsalonproduct.php",
cacheLength: 0,
minLength: 1,
select: function(event, ui) {
addcharge(ui.item.id);
return false;
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
});
Use the response event to check. The results found are stored in ui.content (ui is an argument in the event handler).
$("#inputBox2").autocomplete({
source: "searchsalonproduct.php",
cacheLength: 0,
minLength: 1,
select: function(event, ui) {
addcharge(ui.item.id);
return false;
},
response: function(event, ui) {
if(ui.content.length === 1) {
//do stuff
}
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};

How to use Jquery autocomplete with the backend couchDb

So far I've used Jquery autocomplete for backend php. But I want to use jquery auto complete to fetch records from couchdb. Can anyone please help me.
Or is there any other way to achieve autocomplete with couchDB
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$("#search_name").autocomplete({
source: function( request, response ) {
$.couch.db("db1").view("Views/testPatients", {
success: function(data) {
response(data.rows);
},
error: function(status) {
console.log(status);
},
key: request.term
});
},
minLength: 3,
focus: function(event, ui) {
console.log(ui.item.key);
$("#search_name").val(ui.item.key);
return false;
},
select: function( event, ui ) {
$("#search_name").val(ui.item.key);
return false;
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
}).
data("uiAutocomplete")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.key + "</a>")
.appendTo(ul);
};

JqueryUi slide effect with duration won't stop when click on other link

While I'm on PAGE 1, I click on PAGE2 link, it will slide to the right with duration 2seconds, While it is sliding, I CANNOT click PAGE1 link. How do I click on page1 or stop the slide while it's sliding?
Help me please
$(document).ready(function(){
$('.link2page1').click(function(e){
e.preventDefault();
$('#page2').hide(
function(){
$('#page1').show();
}
);
});
$('.link2page2').click(function(e){
e.preventDefault();
$('#page1').hide('slide',{direction:'right'},2000,
function(){
$('#page2').show();
}
);
});
});
Please check out my code on jsfiddle
I think below code will help you.
$(document).ready(function () {
$('.link2page1').click(function (e) {
e.preventDefault();
$('#page2').hide(
function () {
$('#page1').stop();
$('#page1').css("left","0px");
$('#page1').show();
}
);
});
$('.link2page2').click(function (e) {
e.preventDefault();
$('#page1').hide('slide', { direction: 'right' }, 10000,
function () {
$('#page2').show();
}
);
});
});

twice occuring drop events from jquery ui

I am using jquery ui 1.7.2 alongwith jquery 1.3.2
The following script is causing drop event to be triggered twice.. I tried a lot of time but not able to figure out why?
any suggestions to fix this code
$("document").ready(function () {
$(".draggable").draggable({
revert: "invalid",
helper: "clone",
connectToSortable: ".column"
});
$(".column").droppable({
accept: ".draggable",
drop: function (event, ui) {
debugger;
var ordinalNo = 1;
$(".column .contentObject").each(function () {
ordinalNo = ordinalNo + 1;
});
var objectId = guidGenerator() + '_' + ordinalNo;
var objectType;
var contentObjContent = "<div id=\"" + objectId + "\" ><h2>[<span class=\"ordinal\"></span>] ";
if (event.srcElement.id === "tableobj") {
objectType = tableSource;
}
else if (event.srcElement.id === "chartobj") {
objectType = chartSource;
}
else if (event.srcElement.id === "textobj") {
objectType = textSource;
}
$.ajax({
url: "/ContentBuilder/ContentObject",
data: {
viewObjectId: objectId,
contentObjectId: null,
contentObjectTypeId: objectType,
contentObjSourceId: null,
ordinal: ordinalNo
},
type: "POST",
success: function (data) {
contentObjContent = data;
}
});
}
});
$(".column").sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
update: function (event, ui) {
changeOrdinal();
if (event.srcElement.id.length <= 0) {
updateObjectOrdinals();
}
}
}).disableSelection();
$(".tablecolumn").sortable({
connectWith: '.tablecolumn',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
update: function (event, ui) {
changeColumnOrdinal();
}
}).disableSelection();
});
becouse you use dropable AND sortable on the same selector $(".column"). I think both triggering a drop.

How to create jQuery Dialog in function

Does anyone know how to create a jQuery Dialog in a function? I can't find an attribute to set the message... In every example I found, the dialog has been statically written into the code in a div-tag. However, I want to create it dinamically, so I need to know how to create a dialog in a function.
It is no problem to set the title:
<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "#opener" ).click(function() {
//$( "#dialog" ).dialog( "open" );
$( this ).dialog({ title: 'Please confirm deletion!' });
return false;
});
});
</script>
</head>
<body>
I have the documentation and some examples here.
Thanks for helping out guys.
Cheers,
doonot
============================= [SOLUTION]=====================================
Thanks for all who answered this questions. This is how i wanted it:
function createDialog(title, text) {
return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
.dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Confirm": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
}
And it can be called for example like this (clicking on an image):
<img src="delete.png" onClick="createDialog('Confirm deletion!', 'Do you really want to delete this package?')">
function createDialog(title, text, options) {
return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
.dialog(options);
}
Here is a simple example:
function openDialog(message) {
if ($('#dialog').length == 0) {
$(document.body).append('<div id="dialog">'+message+'</div>');
} else {
$('#dialog').html(message);
}
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "#dialog" ).dialog("open");
}
I used this with additionally jQuery tmpl plugin.
var confirmTemplate = jQuery.template("<div class='dialog' title='${title}'><p>${text}</p></div>");
function showDialog(options) {
if (options && options.data && options.dialog) {
var dialogOptions = jQuery.extend({}, { modal: true, resizable: false, draggable: false }, options.dialog);
return jQuery.tmpl(confirmTemplate, options.data).dialog(dialogOptions);
}
}
function hideDialog (item) {
if (!item.jQuery) item = $(item);
item.dialog("close").dialog("destroy").remove();
}
usage:
showDialog({
data: {
title: "My Title",
text: "my Text"
}
dialog: {
myDialog: "options"
}
});

Resources