I am calling a function when the user has panned the map with:
$('#updateTheMap').click(function() {
if (document.getElementById('updateMap').checked) {
// stop the the dragend event...
}
else {
map.on('dragend', function() {
sortBinis(simpleFilterSql);
});
}
});
But I can not figure out how to end this event?
Use a variable:
var updateTheMap = true;
$('#updateTheMap').click(function() {
updateTheMap = document.getElementById('updateMap').checked;
});
map.on('dragend', function() {
if (updateTheMap) sortBinis(simpleFilterSql);
});
If by 'end this event' you mean 'remove the event listener' you can use map.off()
function onDragend(e) { sortBinis(simpleFilterSql); }
$('#updateTheMap').click(function() {
if (document.getElementById('updateMap').checked) {
map.off('dragend', onDragend);
}
else {
map.on('dragend', onDragend);
}
});
Related
Hi i implemented a Messagebox in a for loop, but i know the messagebox works asynchron.
I want that the programm wait for every loop to the desicion of the user.
onBook: function(oEvent) {
var that = this;
for (var i = 0; i < Items.length; i++){
function message(innerArg) {
sap.m.MessageBox.confirm(
"Text", {
icon : sap.m.MessageBox.Icon.INFORMATION,
title : "Really",
actions : [ sap.m.MessageBox.Action.YES,
sap.m.MessageBox.Action.NO ],
onClose : function(oAction) {
if (oAction === sap.m.MessageBox.Action.NO) {
delete(i);
}else{
}
}
});
}
message(i);
}
that.do(oEvent);
The programm jumps in the "do" method before a user action is done
Edit:
for (var i = 0; i < Items.length; i++){
(function (innerArg) {
sap.m.MessageBox.confirm(
"Delete?", {
icon : sap.m.MessageBox.Icon.INFORMATION,
title : "Delete",
actions : [ sap.m.MessageBox.Action.YES,
sap.m.MessageBox.Action.NO ],
onClose : function(oAction) {
if (oAction === sap.m.MessageBox.Action.NO) {
delete(innerArg)
}}
});
})(i);
}
that.Save(oEvent);
When the box is open the entries are booked because the programm goes to the save method without wating of user action Whats wrong ?
Ah, the asynchronous-function-in-a-synchronous-loop anti-pattern ;-)
You can try using closures:
for (var i = 0; i < items; i++) {
// use self-executing function here
(function(innerArg) {
sap.m.MessageBox.confirm(
"Text", {
onClose: function(oAction) {
if (oAction === sap.m.MessageBox.Action.NO) {
// here I want to do something
console.log("Value: ", innerArg);
}
}
}
);
})(i);
}
EDIT: Update with Promises
Based on your updated question, I have provided a more-or-less sorta-kinda working example (it may not work flawless, but it should show the design pattern you should follow)
You wrap the message box responses into a Promise resolve, and store these into an array. You then feed that array to Promise.all() in order to proceed with your save functionality
processData: function() {
var promises = [],
self = this;
for (var i = 0; i < items; i++) {
promises.push(this.doMessageboxAction(i));
}
Promise.all(promises).then(function(aData) {
aData.forEach(function(oData) {
self.save(oData);
});
}).catch(function(err) {
console.log(err);
});
}
doMessageboxAction: function(item) {
return new Promise(function(resolve, reject) {
sap.m.MessageBox.confirm(
"Text", {
onClose: function(oAction) {
if (oAction === sap.m.MessageBox.Action.NO) {
//do something
//etc
resolve(item); // or some other variable
}
else {
//do something else
//etc
resolve(item); // or some other variable
}
}
}
);
});
}
Can we show adMob ads for particular DIV in Android application?
If possible, Can you tell me how to implement?
install this plugin cordova plugin add https://github.com/floatinghotpot/cordova-plugin-admob.git
and past bellow code inside your controller
$(function () {
// alert('1');
if ((/(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent))) {
document.addEventListener('deviceready', initApp, false);
} else {
initApp()
// alert('2');
}
})
function initApp() {
// alert('3');
initAd()
// display the banner at startup
window.plugins.AdMob.createBannerView();
}
function initAd() {
// alert('4');
if (window.plugins && window.plugins.AdMob) {
var ad_units = {
ios: {
banner: 'ca-app-pub-6869992474017983/4806197152',
interstitial: 'ca-app-pub-6869992474017983/7563979554'
},
android: {
banner: 'ca-app-pub-6869992474017983/9375997553',
interstitial: 'ca-app-pub-6869992474017983/1657046752'
},
wp8: {
banner: 'ca-app-pub-6869992474017983/8878394753',
interstitial: 'ca-app-pub-6869992474017983/1355127956'
}
};
var admobid = "";
if (/(android)/i.test(navigator.userAgent)) {
admobid = ad_units.android;
} else if (/(iphone|ipad)/i.test(navigator.userAgent)) {
admobid = ad_units.ios;
} else {
admobid = ad_units.wp8;
}
window.plugins.AdMob.setOptions({
publisherId: admobid.banner,
interstitialAdId: admobid.interstitial,
bannerAtTop: false, // set to true, to put banner at top
overlap: false, // set to true, to allow banner overlap webview
offsetTopBar: false, // set to true to avoid ios7 status bar overlap
isTesting: true, // receiving test ad
autoShow: true // auto show interstitial ad when loaded
});
// alert('5');
registerAdEvents()
} else {
// alert( 'admob plugin not ready' );
}
}
// optional, in case respond to events
function registerAdEvents() {
document.addEventListener('onReceiveAd', function() {});
document.addEventListener('onFailedToReceiveAd', function(data) {});
document.addEventListener('onPresentAd', function() {});
document.addEventListener('onDismissAd', function() {});
document.addEventListener('onLeaveToAd', function() {});
document.addEventListener('onReceiveInterstitialAd', function() {});
document.addEventListener('onPresentInterstitialAd', function() {});
document.addEventListener('onDismissInterstitialAd', function() {});
// alert('6');
}
function onResize() {
// alert('7');
var msg = 'web view: ' + window.innerWidth + ' x ' + window.innerHeight;
document.getElementById('sizeinfo').innerHTML = msg;
}
// ADMob
})
I am facing problem in form validation. Following is my jQuery validation code.
kindly help me how this validation is working on submit button.
<script type="text/javascript">
$(document).ready(function() {
$(".col a").click(function() {
$(".col a").removeClass("active");
$(this).addClass("active");
});
});
jQuery(document).ready(function() {
jQuery(".expContent").hide();
//toggle the componenet with class msg_body
jQuery(".expHeading").click(function() {
jQuery(this).next(".expContent").slideToggle(500);
});
});
$(document).ready(function() {
// Vertical
$("#vertical").on("blur", function(e) {
if ($("#vertical").val().length < 2) {
alert("vertical", "Vertical is Mandatory");
} else {
hideMsg("vertical");
}
});
// Name
$("#name").on("blur", function(e) {
if ($("#name").val().length < 2) {
alert("Name is Mandatory");
} else {
hideMsg("name");
}
});
function IsEmail(email) {
var filter = /^[\w-\.]+#([\w-]+\.)+[\w-]{2,4}$/;
if (filter.test(email)) {
return true;
} else {
return false;
}
}
$("#email").on("blur", function(e) {
if ($("#email").val().length == 0) {
//alert("Please submit a Valid Email Id");
}
if (IsEmail($("#email").val())) {
hideMsg("email");
} else {
alert("Please submit a Valid Email Id");
}
});
// Mobile No
$("#enqMobileNo").on("blur", function(e) {
if ($("#enqCountryResidence").val() == "in") {
if ($("#enqMobileNo").val().length == 10) {
hideMsg("enqMobileNo");
} else {
alert('Please Enter 10 Digit Mobile No. Only like 9812345678. Without Area or Country Code i.e "0" or "+91"');
}
} else {
if ($("#enqMobileNo").val().length 1) {
hideMsg("enqMobileNo");
} else {
alert("Please Enter Mobile No. Only. Without Area or Country Code");
}
}
});
$("#enqMobileNo").on('keyup', function() {
if ($("#enqMobileNo").val() == "0") {
$("#enqMobileNo").val("");
}
if ($("#enqCountryResidence").val() == "in") {
limitText(this, 10);
if ($("#enqMobileNo").val().length == 10) {
hideMsg("enqMobileNo");
}
} else {
//inlineMsg
("enqMobileNo", "Please Enter Mobile No. Only<br /Without Area or Country Code");
}
});
// Gender
$("#gender").on("blur", function(e) {
if ($("#gender").val() == "") {
alert('Please select Gender', 2);
} else {
hideMsg("gender");
}
});
// Age
$("#age").on("blur", function(e) {
if ($("#age").val() == "") {
alert('Please select Age', 2);
} else {
hideMsg("age");
}
});
// City
$("#enqCity").on("blur", function(e) {
if ($("#enqCity").val() == "") {
alert('Current Location City Name is Mandatory', 2);
} else {
hideMsg("enqCity");
}
});
// Course
$("#enqSection").on("blur", function(e) {
if ($("#enqSection").val() == "") {
alert('Please Select Course', 2);
} else {
hideMsg("enqSection");
}
});
// Spl
$("#enqSpeciality").on("blur", function(e) {
if ($("#enqSpeciality").val() == "") {
alert('Please Select Speciality', 2);
} else {
hideMsg("enqSpeciality");
}
});
// Level
$("#enqLevel").on("blur", function(e) {
if ($("#enqLevel").val() == "") {
alert('Please Select Level', 2);
} else {
hideMsg("enqLevel");
}
});
function limitText(field, maxChar) {
var ref = $(field),
val = ref.val();
if (val.length = maxChar) {
ref.val(function() {
console.log(val.substr(0, maxChar))
return val.substr(0, maxChar);
});
}
}
});
</script>
I think it is better to use jQuery form validation plugin. It is very easy to use.You can get step by step help with examples on this site
i have simple dropdown, and i need to hide (fadeout) it by clicking on the document
this is my jquery code:
var expandCheckbox = $('.filterShow'),
formCheckbox = $('.checkboxWrap');
expandCheckbox.click(function(e) {
e.preventDefault();
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(formCheckbox).fadeOut(200);
} else {
$(this).addClass('active');
$(formCheckbox).fadeIn(100);
}
});
$('body').not('.filterShow, .checkboxWrap').click(function() {
$(formCheckbox).fadeOut(100);
});
SEE JSFIDDLE
Remove "e.preventDefault" which has no use here, add "return false" to prevent event propagation to its parent, use "document" instead of "body" as the selector for fading the dropdownlist upon clicking anywhere on the document.
$(document).ready(function(){
expandCheckbox = $('.filterShow'),
formCheckbox = $('.checkboxWrap');
expandCheckbox.click(function (e) {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
formCheckbox.fadeOut(200);
} else {
$(this).addClass('active');
formCheckbox.fadeIn(100);
}
return false;
});
$(document).click(function (e) {
if (expandCheckbox.hasClass('active')) {
expandCheckbox.removeClass('active');
formCheckbox.fadeOut(200);
}
return false;
});
formCheckbox.find('input:checkbox').click(function (e) {
e.stopPropagation();
});
});
I have this, and I am showing a div if user clicked one button and not showing it if the user clicked other. Its working but its dumb to do this way with repeatition
$j(document).ready(function() {
$j('#Button1').click( function () {
var data = $j("form").serialize();
$j.post('file.php', data, function(response){
$j("#Response").show();
});
});
$j('#Button21').click( function () {
var data = $j("form").serialize();
$j.post('file.php', data, function(response){
//do something else
});
});
});
I'd do it by adding a class to the selected buttons and then pull the event.target id from the click function:
$j('.buttons').click(function(e) {
var buttonId = e.target.id,
data = $j("form").serialize();
$j.post('file.php', data, function(response) {
switch (buttonId) {
case "Button1":
$j("#Response").show();
break;
case "Button21":
//do something else
break;
}
});
});
You need to abstract the data from the functionality.
sendClick('#Button1', function() {
$j('#Response').show();
});
sendClick('#Button21', function() {
// do something
});
sendClick function
function sendClick(selector, callback)
{
$j(selector).click( function () {
var data = $j("form").serialize();
$j.post('file.php', data, callback);
});
}
This way you can repeat the same functionality over and over by changing the selector and the callback. You could customise this even further by:
function sendClick(selector, options, callback)
{
// handle arguments
if(typeof options == 'function') {
callback = options;
options = {};
} else {
options = options || {};
}
$j.extend({
form: 'form',
file: 'file.php'
}, options);
// abstracted logic
$j(selector).click(function() {
var data = $j(options.form).serialize();
$j.post(options.file, data, callback);
});
}
then use like
sendClick('#select', {form: '#anotherForm'}, function() {
// do something
});
or
sendClick('#another', function(response) {
// something else
});
You can attach the event to both, and then, when you need to check which element triggered the event, use event.target.
$j(function() {
$j('#Button1, #Button2').click( function (event) {
var data = $j("form").serialize();
$j.post('file.php', data, function(response){
if ($(event.target).is('#Button1')) {
$j("#Response").show();
} else {
// Do something else
}
});
});
});
Here are two different ways:
You can combine the two handlers into one handler:
$j(document).ready(function () {
$j('#Button1, #Button21').click(function() {
var id = this.id;
var data = $j("form").serialize();
$j.post('file.php', data, function(response) {
if (id == 'Button1') {
// Show
} else {
// Do something else
}
});
});
});
Or write a special kind of handler:
$j.fn.clickAndPost = function (handler) {
this.click(function () {
var me = this;
var data = $j("form").serialize();
$j.post('file.php', data, function(response) {
handler.call(me);
});
});
});
...and attach two of them:
$j(document).ready(function () {
$j('#Button1').clickAndPost(function () {
// Show
});
$j('#Button21').clickAndPost(function () {
// Do something else
});
});
$j(function($) {
$('#Button1', '#Button21').click(function() {
var that = this,
data = $('form').serialize();
$.post('file.php', data, function(response) {
if ( that.id === 'Button1' ) {
$('#Response').show();
} else {
//do something else
}
});
});
});
$(document).ready(function() {
$('#Button1 #Button21').click(function() {
var that = this.attr("id");
data = $('form').serialize();
$.post('file.php', data, function(response) {
if ( that === 'Button1' ) {
$('#Response').show();
} else {
//do something else
}
});
});
});
Let me know if it's not working.