I had a hyperlinks in the header. When user navigates from one header link to other i need to check whether page is in dirtied or not, if page is dirtied i need to show a modal which has ok and cancel buttons and on ok i need to navigate to the clicked header and on cancel i need to remain in the page. Below is the sample code I wrote.
Template:
HeaderView.js
..
..
ui {
"link1" : "#link1",
"link2" : "#link2",
},
events {
"click #link1" : "navigateLink1"
"click #link2" : "navigateLink2"
}
navigateLink1 : function(e) {
this.navigate(this.ui.link1, "#link1", true, e);
}
navigateLink2 : function(e) {
e.preventDefault();
this.navigate(this.ui.link2, "#link2", true, e);
}
navigate: function(uiElement, path, trigger, event) {
e.preventDefault();
if (model.isDirty() ) {
// I need to send a callback for clicking on ok button
this.callback = function() {
event.trigger();// I am getting an error saying that event.trigger is not a function.
}
new ApplicationModal(model: {callback: this.callback});
} else {
app.router.navigate(path , {trigger: trigger});
}
}
In ApplicationModal i am just executing the callback
I am getting an error saying that event.trigger is not a function while calling from the callback.Let me know how to navigate to the new page after e.preventDefault();
Related
How can I execute this function only once and when the browser tab/window is active ?
$(function(){
noty({text:'Here is my text',type:'error'});
return false;
});
If I use:
$(window).one('focus', function(){
The function is executed but only if I leave the tab and come back again.
Any ideas ?
Many thanks
If you use the load event it will fire when the page is loaded.
$(document).ready(() => {
$(window).on('load', () => {
noty({ text: 'Here is my text', type: 'error' });
});
});
What do you mean by 'is active' ?
If you need this function to be called just one time after load, you can use load event or ready with jquery.
If it's every time the tab is active, so when your user is on the tab, and the mouse focus your document, you can use the focus event.
let activated = false;
window.addEventListener('focus', function() {
if(!activated) {
console.log('test');
activated = true;
}
})
I want to display a Bootbox dialog that includes an "OK" button. When the user clicks the "OK" button, it should POST back, with the ID of the message to confirm that the user has viewed the message. The Bootbox dialog is the form. I don't see a way to make the dialog buttons a submit form with hidden fields, which is what I assume is the right way to accomplish my goals.
Thanks to the helpful comments from Isabel Inc and Mistalis, I have a working solution.
Notes specific to my implementation:
The messages contain images that need to be responsive, so I add the appropriate Bootstrap classes to each image
The messages may have links. Clicking a link is equivalent to clicking "OK" on the dialog
And the JavaScript that makes it happen...
jQuery(function($, window, bootbox, undefined) {
var accept = function(callback) {
$.ajax({
type: 'POST',
data: {message_id: 244826},
success: callback()
});
};
var $message = $('<p><img src="https://www.gravatar.com/avatar/80fa81938a6d1df92cd101d7fe997a71" alt></p><p>Here is a message from Sonny.</p>');
$message.find('img').addClass('img-responsive center-block');
$message.find('a').on('click', function(e) {
var href = $(this).attr('href');
if (0 === href.length) {
return;
}
e.preventDefault();
accept(function() { window.location.href = href; });
});
bootbox.dialog({
message: $message,
closeButton: false,
buttons: {
accept: {
label: 'OK',
callback: function() {
accept(function() { window.location.reload(); });
}
}
}
});
}(jQuery, window, bootbox));
So we have this contact form in the footer of a web page that does not work, the form validation and jquery events arent connected with the form itself.
The javascript on the page should be attaching an event to the submit button, but it looks like this isn't working.
Here is the jQuery:
jQuery(document).ready(function () {
jQuery('#form_contact_form_widget_001').validationEngine('init');
jQuery('#form_contact_form_widget_001 a#contact_form_widget_001_wformsend').click(function () {
var form_builder_url = jQuery('#contact_form_widget_001_wurl').val();
jQuery('#form_contact_form_widget_001 .loading').animate( {
opacity : 1
} , 250);
if (jQuery('#form_contact_form_widget_001').validationEngine('validate')) {
jQuery.post(form_builder_url, {
field_003 : jQuery('#field_003').val(),
field_004 : jQuery('#field_004').val(),
formname : 'contact_form_widget_001',
formtype : 'widget'
}, function () {
jQuery('#form_contact_form_widget_001 .loading').animate( { opacity : 0 }, 250);
document.getElementById('form_contact_form_widget_001').reset();
jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').hide();
jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').fadeIn('fast');
jQuery('html, body').animate( { scrollTop : (jQuery('#form_contact_form_widget_001').offset().top - 100) }, 'slow');
jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').delay(5000).fadeOut(1000);
} );
return false;
} else {
jQuery('#form_contact_form_widget_001 .loading').animate( { opacity : 0 }, 250);
return false;
}
} );
} );
Any ideas why this isn't working properly?
http://medicure-html.cmsmasters.net/
This template page has a working version of the same form.
Looking at the html source, you have this for your form:
There is no action defined other than "#", should at least have a page url or function in it.
you want to use jQuery's built in submit event for your form.
In order to override the default form behavior you should pass in an event object e into this event and call e.preventDefault(). This will stop your form from jumping to the top of the screen and failing to preform your action.
jQuery('#form_contact_form_widget_001').submit(function (e) {
e.preventDefault();
// rest of the code
});
How to undo the action DayPilot.Scheduler on event Resized on the last event i saved without reloading the page?
Here is my code:
dp.onEventResized = function (args) {
if (confirm('Are you sure you want to edit this?')) {
--do some code --
}
else
{
window.location.reload();
//undo the last event..
}
};
You should use onEventResize to display the confirmation dialog. This event is called before the default action (while onEventResized is called after it). You can cancel the default action using args.preventDefault():
dp.onEventResize = function (args) {
if (!confirm('Are you sure you want to edit this?')) {
{
args.preventDefault();
}
};
Keep the original action in the onEventResized handler:
dp.onEventResized = function (args) {
// submit changes
};
I got a delete (input submit) button which pops up a dialog (Alloy UI dialog, html) when clicked:
A.all("#RFB input.ConfirmDelete").each(function(node){
node.on('click', function(event) {
if(confirmed) {
showUserWaitDialog();
return true;
}
else {
deactivateKeyboardNav();
deleteConfirm(node, confirmDeleteMessage, function () { //Runs the function rendering the pop up
confirmed = true;
event.target.click();
showUserWaitDialog();
});
}
});
});
The problem is that the event is running async and thus performs the deletion, and not waiting for the user to click OK (calling the callback).
The deleteConfirm takes the following arguments
function deleteConfirm(link, pText, callback) {
The content in the pop up consists of:
var bodyContent = '<div class="vl-info vl-message"><h2>'+titleText+'</h2>'+
'<p>'+pText+'</p>' +
'<p class="more button-area">'+confirmButtonText+''+discardButtonText+'</p></div>';
And the button functions:
A.one('.deleteOK').on('click', function(e){
(jQuery.isFunction(callback)) && callback.apply();
confirmDialog.close();
confirmDialogOpen = false;
});
A.one('.deleteNotOK').on('click', function(e){
confirmDialog.close();
confirmDialogOpen = false;
return false;
});
How should I approach this?
Alloy UI provides a nice Dialog box API. It may be worth to see this example and apply for your requirement.
var dialog = new A.Dialog({
title : '<your dialog box title here>',
centered: true,
modal: false,
width: 600,
height: 250,
bodyContent: <You can keep the message to display here>,
buttons: [
{
label: 'Delete',
id: 'deleteBtn',
handler: function() {
//Place code to delete here. It get executed when user click on Delete button.
}
},
{
label: 'Cancel',
id: 'cancelActionItemBtn',
handler: function() {
this.close();
}
}
]
}).render();