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.
Related
I'm working on an enterprise application which made with Ruby on Rails actually I'm working for the maintenance on the web app, so I want to add a spinner on this application instead of Turbolinks ProgressBar, so on the initial stage I'm testing the page:change & page:receive working but those is not working, look how I tested
$(document).on('page:fetch', function() {
alert("OK");
});
$(document).on("page:receive", function(){
alert("OK");
});
also
$(document).on('turbolinks:fetch', function() {
alert("OK");
});
$(document).on("turbolinks:receive", function(){
alert("OK");
});
also, browser console is clean no any error.
Thanks
You can see the latest Turbolinks Full List of Events then it should be like this use turbolinks:request-start instead turbolinks:fetch and page:fetch, request-start for receive
$(function() {
document.addEventListener('turbolinks:request-start', function() {
alert("OK");
});
document.addEventListener("turbolinks:request-end", function(){
alert("OK");
});
});
I have used this for mine and it's working.
Hope it will help you.
I am trying to update an collection in Meteor when a user clicks on a certain link. The link opens up a new tab, which is on an external site. However, I want to store this click in my database.
I have tried using e.preventDefault(), but then I can't get the link to open in a new tab. Any suggestions?
You can use a click event and use a window.location after inserting into the database.
So, it would look something like this:
Template.name.events({
'click a' : function(e) {
e.preventDefault();
// Insert data into database
Table.insert({
// data here
});
// Open new tab
window.open(url, '_blank');
}
});
You ought not to use javascript to open the new tab since this will activate the popup blocker. The best solution is to have a link, as normal, and track the link on the side:
Html:
<template name="link">
CLick
</template>
JS:
Template.link.events({
'click a#the_link': function(e,tmpl) {
MyCollection.update({_id: "the_link_id"} , {$inc { "clicks":1 } });
}
});
You can do the insertion in the server side which is secure. The window can be opened in the success of the response.
In Client
Template.name.events{(
"click .clickevent":function(e){
e.preventDefault();
Meteor.call("Methodname", datatoinsert,function(err){
if(!err)
window.open(url, '_blank');
})
}
)};
In Server
Meteor.methods({
Methodname:function(datatoinsert){
Tablename.insert({
//insert data here
})
}
});
In this way you can add event and on successful data insert you can open a window.
I hope it helps you.
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.