I have a tiny javascript which uses JQUERY UI.
When I get the 'drop' event call I would like to know what HTML Element was dropped.
Can somebody tell me how to figure that out.
I know how to figure which HTML element received the event but I don't know how to figure which HTML element was dropped
$(function() {
$( "#draggable,#draggable2,#draggable3" ).draggable({ revert: "invalid" });
$( "#draggable,#draggable2,#draggable3" ).droppable({
accept: "#draggable,#draggable2,#draggable3",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
alert("destination:"+ this.id+" source:"+event.target.id);
alert("source is "+"???");
});
});
In the drop function it will be ui.draggable.
Related
Ok, Im using JQM 1.4.5 and i'm trying to resolve all the deprecated commands on an existing multi page/file site.
This may appear simple but after spending several hours on google finding several different ideas some of them conflicting i've finally exhausted all options.
I'm trying to replace the existing events [pageinit] and [pagebeforeshow].
According to JQM website I can bind in two ways:
$( ".selector" ).on( "pagecontainerbeforeshow", function( event, ui ) {} );
$( ":data('mobile-pagecontainer')" ).pagecontainer({
beforeshow: function( event, ui ) {},
beforehide: function( event, ui ) {},
show: function( event, ui ) {},
hide: function( event, ui ) {}
});
I've tried:
$( "#pageDetails" ).on( "pagecontainershow", function( event, ui ) {}
alert("show"); );
AND
$("#pageDetails").pagecontainer({
create: function( event, ui ) {
alert("Create");
},
show: function( event, ui ) {
alert("show");
},
beforeshow: function( event, ui ) {
alert("show");
}
});
of which the 'create' is fired as expected but nothing else.
On my index.html page I have script outside of the initial pages which runs across all pages and inside each html file I have script inside a page are which relates to each page.
Previously I had:
$("#pageDetails").off("init");
$("#pageDetails").on("init",function(){
});
$("#pageDetails").off("pagebeforeshow");
$("#pageDetails").on("pagebeforeshow",function(){
});
Both of these fire fine.
How can I convert to the newer method ?
I'm trying to build a simple prototype of an app and I cannot seem to get JQM to change to either an internal or external page with $.mobile.changePage($('#page2')) or $.mobile.changePage('page2.html').
I have successfully binded the form submit to the button, but when clicking (tapping), it changes the same page. After a second click/tap, it redirects.
$("#fd-login button#login-fd-submit").on('click', function(e) {
forge.logging.info('login-fd-submit clicked');
$.mobile.changePage('page2.html');
});
For a "local" page in your "src" directory:
$("#fd-login button#login-fd-submit").on('click', function(e) {
forge.logging.info('login-fd-submit clicked');
forge.file.getLocal('page2.html', function(file) {
$.mobile.changePage(file);
}, function(err) {
forge.logging.log("error");
});
});
If you are using a jQuery object instead, then its mostly likely not trigger.io and need to see more code.
It seems that $(element).on("click", function() {}); doesn't work for this. $(element).live("click", function() {}); works perfectly.
Try using:-
$("#fd-login button#login-fd-submit").on('tap', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
forge.logging.info('login-fd-submit clicked');
$.mobile.changePage('page2.html');
});
Update: Changed to use tap event.
I'm building offline application with Phonegap + JQM. Is there any possibility to set globally that on every page change event would showing loading message?
$(document).live('pagebeforehide', function(){
$.mobile.showPageLoadingMsg();
//More stuff to do
});
$(document).live('pageshow', function(){
//More stuff to do
$.mobile.hidePageLoadingMsg();
});
Nirmal's answer doesn't work for me, but binding to the individual pages does:
$("div[data-role='page']").live('pagebeforehide', function(){
console.log("showing....");
$.mobile.showPageLoadingMsg();
//More stuff to do
});
$("div[data-role='page']").live('pageshow', function(){
//More stuff to do
console.log("hiding....");
$.mobile.hidePageLoadingMsg();
});
jsFiddle - look at the logs, sometimes it's too fast to see
I am using Jquery ui Autocomplete.But it show error autocomplete showing self.element.propAttr error.
this is my ajax code
$.ajax({
url: "persons.xml",
dataType: "xml",
success: function( xmlResponse ) {
var data = $( "person", xmlResponse ).map(function() {
return {
value: $( "name", this ).text()
};
}).get();
$( "#birds" ).autocomplete({
source: data,
minLength: 0
});
}
});
I am using xml for response but that doesnot seem to be the problem it seems some function in javascript is deprecated.
Can anyone give me any solutions for this?
Add this lines in front of your statement:
jQuery.fn.extend({
propAttr: $.fn.prop || $.fn.attr
});
I was facing this problem when refactoring my javascript and found that the problem was I removed jquery.ui.core.js, and instead was using only jquery-ui-1.9.1.custom.min.js.
I created this file using the Download Builder at the Jquery UI website with everything checked. Correct me If I am wrong but jquery-ui-1.9.1.custom.min.js should have contained all the javascript necessary to run all the jquery ui addins (in this case autocomplete was failing).
Adding the reference back to jquery.ui.core.js fixed the bug.
I am trying to get my form to submit when a user either clicks enter or mouse clicks. I have seen some examples as well as the example on the jQuery UI site. The example that I am following is jQuery UI autocomplete submit onclick result. Therefore my code looks like this.
<script type="text/javascript">
$(document).ready(function() {
$("#myInput").autocomplete({
source: "fh_autocomplete_search.php",
minLength: 2,
select: function(event, ui) {
if(ui.item){
$("#myInput").value(ui.item.value);
}
$("#myInput").submit();
}
});
$( "#myInput" ).bind( "autocompleteselect", function(event, ui) {
})
});
</script>
I'm not sure what should go under the .bind section of the code. Or really what it is even doing. And I have been here and read it but still just not clicking http://api.jquery.com/bind/ When I put an alert under it and select a ui.item from the #myInput box the alert does go off. But nothing fills or submits. If I put an alert under the if(ui.item) part it doesn't go off. If someone could explain to me what is going on and suggest some code to put under the .bind section I would greatly appreciate it.
If the id of the form is myForm:
$(document).ready(function() {
$("#myInput").autocomplete({
source: "fh_autocomplete_search.php",
minLength: 2,
select: function(event, ui) {
$("#myInput").val(ui.item.value);
$("#myForm").submit();
}
});
});
Also see this example.
I'm not entirely sure you need to write code for the "autocompleteselect" event. The default behavior of the event is to replace the text in the textbox with the users selection from the menu of items.