I have two html buttons in my jsp. One is Add and another is Remove.
Now If ony of the button is clicked then one dojo confirm dialog would be displayed. On click of 'Ok' in the dialog either Add or Remove Functionality will be executed. And this Dojo Dialog in present in one of the parent jsp page which will be reused by other jsp pages where Add or Remove functionlity is present. Depening on the Add/Remove button click the confirm message also needs to be changed. Ex. for Add, the message should be 'Do you want to Add' , for Remove the message would be 'Do you want to Remove'. I am able to set the message dynamically in the DOJO Cinfirm Dialog but not able to set the onExecute callback function ie. when Ok will be clicked in teh Dialog. Below id the code.
NB: I am using DOJO 1.10 library
Confirm Dialog Code:
require(["dijit/ConfirmDialog", "dojo/domReady!"], function(ConfirmDialog){
myDialog = new ConfirmDialog({
title: "GCLDW - Confirm Dialog",
content: "",
style: "width: 300px;",
onExecute:function(){
removeCustomer();
}
});
});
HTML Button Code:
<button type="button" id="removeCustomerButton"
onclick="myDialog.set('content', 'Do you want to remove the selected item ?<br><br>');myDialog.show();">
<SPAN class=grey><EM><s:message
code="customer.removeCustomer" text="" /></EM>
</SPAN>
</button>
<button type="button" id="addCustomerButton"
onclick="myDialog.set('content', 'Do you want to Add the selected item ?<br><br>');myDialog.show();">
<SPAN class=grey><EM><s:message
code="customer.addCustomer" text=""/></EM>
</SPAN>
</button>
Now how to set the onExecute call back function depending on the button click, either it would be addCustomer() or removeCustomer() , and whichever page is using this dialog will have their own implementation of these two method.
Just set the onExecute block- in the same way- how you are setting the content.
Also a suggestion is- put the JS code seperate from HTML.
Here goes the work-around-
HTML Code-
<button type="button" id="removeCustomerButton">
<SPAN class=grey><EM>Remove</EM></SPAN>
</button>
<button type="button" id="addCustomerButton">
<SPAN class=grey><EM>Add</EM></SPAN>
</button>
& the DOJO-
require(["dijit/ConfirmDialog", "dojo/domReady!"],
function(ConfirmDialog){
var myDialog = new ConfirmDialog({
title: "GCLDW - Confirm Dialog",
content: "",
style: "width: 300px;"
});
dojo.query('#removeCustomerButton').onclick( function() {
myDialog.set('content', 'Do you want to remove the selected item ?<br><br>');
myDialog.set('onExecute', function(){removeCustomer()} ); // cant call it directly- must wrap within a function
myDialog.show();
});
dojo.query('#addCustomerButton').onclick( function() {
myDialog.set('content', 'Do you want to Add the selected item ?<br><br>');
myDialog.set('onExecute', function(){addCustomer()} ); // cant call it directly- must wrap within a function
myDialog.show();
});
});
function removeCustomer(){
console.log("removeCustomer called on execute");
}
function addCustomer(){
console.log("addCustomer called on execute");
}
In /dojo-release-1.10.4-src/dijit/_DialogMixin.js, the comments state:
execute: function(/*Object*/ /*===== formContents =====*/){
// summary:
// Callback when the user hits the submit button.
// Override this method to handle Dialog execution.
I implemented a ConfirmDialog like so:
var confirmDialog = new ConfirmDialog({
title: core.confirm
});
confirmDialog.startup();
function confirmAction(text, callbackFn) {
confirmDialog.set("execute", callbackFn);
confirmDialog.set("content", text);
confirmDialog.show();
}
and called it as follows:
lib.confirmAction(core.areyousure, function () {
markedForDeletion.forEach(function (node) {
// Do deletion
});
});
Related
I have a delete icon of an element which shows a modal to ask for the users approval. Once the user approves it should fire another function to delete another element.
First I call the modal
// Function to delete a benefit
$('.delete-benefit').on('click', function(e) {
let id = $(this).closest('.benefit-wrapper-id').attr('id'); // Get the id
call_modal('Delete Benefit', 'Are you sure you want to delete the Benefit?', delete_benefit(id))
// Only execute this function if modal's button with id 'confirm-button' was clicked
delete_benefit(id) // Delete the benefit
})
// Call the modal
function call_modal(title, text, func) {
$('#modalTitle').html(title) // Set some texts
$('#modalText').html(text) // Set some texts
$('#modal-wrapper').show() // Open it
}
// Eventlistener for the modal to execute the passed function upon approval
// Execute the passed function on confirm
document.getElementById("confirm-button")
.addEventListener("click", () => {
func()
}, false);
I tried to pass the delete_benefit(id) function to the modal but this somehow didn't work out as intended (as I want to apply this logic to multiple functions using the same modal component). How to accomplish this / what is a typical workflow here?
In this approach I'm passing information about what should happen when pressing the confirm button directly to the button element itself, via data-attributes:
// Function to delete a benefit
$('.delete-benefit').on('click', function(e) {
let id = $(this).closest('.benefit-wrapper-id').attr('id'); // Get the id
call_modal('Delete Benefit', 'Are you sure you want to delete the Benefit?', 'delete', id)
})
// Call the modal
function call_modal(title, text, intent, id) {
$('#confirm-button').attr('data-intent', intent) // WHAT SHOULD THE CONFIRMATION DO
$('#confirm-button').attr('data-id', id) // WHICH ID IS AFFECTED BY THE CONFIRMATION
$('#modalTitle').html(title) // Set some texts
$('#modalText').html(text) // Set some texts
$('#modal-wrapper').show() // Open it
}
// Eventlistener for the modal to execute the passed function upon approval
// Execute the passed function on confirm
document.getElementById("confirm-button").addEventListener("click", function() {
let intent = $(this).attr('data-intent')
switch (intent) {
case 'delete':
delete_benefit($(this).attr('data-id'))
break;
}
$(this).attr('data-intent', '')
$(this).attr('data-id', '')
}, false);
function delete_benefit(id) {
console.log('Delete benefit: ', id)
}
#modal-wrapper {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="benefit-wrapper-id" id="35">
<button class="delete-benefit">delete</button>
</div>
<div id="modal-wrapper">
<div id="modalTitle"></div>
<div id="modalText"></div>
<button id="confirm-button">Confirm</button>
</div>
I've trying to write a script that automatically displays the summernote link dialog box when I click a button.
For instance, I have the following button:
<button class="btn btn-sm btn-info use_hyperlink" data-href="//files.examples.org.uk/song.mp3" type="button">Copy</button>
So in my js I've got:
$("#linklist").on("click", "button.use_hyperlink", function () {
var href = $(this).data("href")
modal = $("div.note-editor.note-frame.panel.panel-default div.modal.link-dialog")
modal.addClass("in").modal("show")
modal.find("input.note-link-url.form-control.note-form-control.note-input").val(href)
modal.find("button.note-btn.note-btn-primary.note-link-btn").prop("disabled", false).removeClass("disabled").attr("type","button")
})
Which opens the dialog, successfully pastes the href but clicking the Insert Link button submits the form that the summernote resides in.
Looking at the summernote code on line 6765 there is a function called showLinkDialog which I imagine is the one I want. However when I tried:
$(document).ready(function () {
$("textarea#summernote").summernote({height: 500});
$("#linklist").on("click", "button.use_hyperlink", function () {
var href = $(this).data("href")
$("textarea#summernote").showLinkDialog({
url: href
});
})
})
I get an Uncaught TypeError: $(...).showLinkDialog is not a function.
Try trigger clicking the button
$('.note-insert [aria-label^="Link"').trigger('click')
I have a simple form which is opened within a modal when an anchor is clicked.
<a id="callbackLink" class="various" href="#inline">Request</a>
<div id="inline" style="display:none">
<form id="callForm" onsubmit="callEvent(event);">
<h3>Call Back</h3>
<label for="Number">What number shall we call you on?</label>
<input type="tel" id="callback-tel" placeholder=""><br>
<input type="submit" value="Submit" />
</form>
</div>
When the form is submitted, a third party library processes the form. If the form is successful, the form is removed and a success message is displayed in the modal.
Now if you close the modal and then click the button to display the form again, it will still show the success message. So I need a way of displaying a clean form every time the button is pressed.
What would be the best way to achieve this?
UPDATE
The event listener is
function StartClickToCall(event) {
(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
var SuccessfulRequest = function() {
document.getElementById('ClickToCallForm').style.display = 'none';
document.getElementById('ClickToCallErrorMessage').style.display = 'none';
document.getElementById('ClickToCallSuccessMessage').style.display = 'block';
};
var FailedRequest = function(Request, Response) {
document.getElementById('ClickToCallSuccessMessage').style.display = 'none';
document.getElementById('ClickToCallErrorMessage').style.display = 'block';
document.getElementById('ClickToCallErrorMessage').innerHTML = Response.ResponseMessage;
};
_novero.push(['NoveroCallback', 'NewCallback', {
Destination : jQuery("#callback-tel").intlTelInput("getNumber"),
CallbackDate : document.getElementById('CallbackDate').value
}, SuccessfulRequest, FailedRequest]);
}
$('#myModal').modal('toggle');
$('#myModal').modal('view');U can try with modal window cleaning.I think modal window seems to be problem
you didnt post the correct part of the code
if the form is replaced by a success message, then you probably have a function that is making an ajax call and in the success callback you are removing the from HTML and put in the success message HTML
if so .. if you wan to restore the form on modal close . then you need to attach a function to close click that will remove the success message HTML and re-insert the Form HTML
EDIT:
$(".selector").fancybox({
onClosed: function() {
document.getElementById('ClickToCallForm').style.display = ‘block’;
document.getElementById('ClickToCallErrorMessage').style.display = ‘block’;
document.getElementById('ClickToCallSuccessMessage').style.display = ‘none’;
};
});
something like this . (you deleted the fancy declaration) . the close method might have a different name
but what is happening:
on fancy modal close . switch back the styles of the form . that are overwritten in the success function
I have following code block in jQuery which I need to convert it into angularjs
JS Code
command: [
{
name: "Delete",
text: "<span class='glyphicon glyphicon-trash' aria-hidden='true'></span>",
click: function (e) {
e.preventDefault();
//add a click event listener on the delete button
var tr = $(e.target).closest("tr"); //get the row for deletion
var data = this.dataItem(tr); //get the row data so it can be referred later
wnd.content(confirmationWindowTemplate(data)); //send the row data object to the template and render it
wnd.open().center();
wnd.title("Delete Prospect");
$("#yesButton").click(function (e) {
alert("hi")
})
//$("#noButton").click(function (e) {
$scope.noButton = function() {
alert("hi!");
}
},
]
HTML Code
<div class="pull-right">
<button class="btn btn-blue" id="yesButton">Yes</button>
<button class="btn btn-default" ng-click="noButton()"> No</button>
</div>
I have not posted the entire code as it would be too lengthy. I want to convert this jquery code into angularjs. As you can see I am trying to call Yes and No function with jQuery and Angularjs respectively. When I click on yes, I see an alert message "hi" but I don't get an alert message when I click on no.
I am sorry if this question provides insufficient details. I am stuck on this from past 2 days. Any help would be appreciated.
How/where your code $scope.noButton = function() { alert("hi!"); }
is placed? as per my angularjs knowledge, you required controller in your HTML code and then you can set button with ng-click inside that controller, which will finally bind function in your angular controller file code.
Ref - http://fdietz.github.io/recipes-with-angular-js/introduction/responding-to-click-events-using-controllers.html
and here your yes button code $("#yesButton").click(function (e) { alert("hi") }) is working with jQuery so its working correctly
I'm playing around with the Jquery UI dialog. I have a page with a gridview, a button that refreshes the gridview and a link. When you click a link, a dialog window popup up with the details of the record.
When I press save on the child page, I have the child page calling a javascript function from the parent page. In this function, it tried to do the button click event but it doesn't seem to be working.
If you look at the showThanks function below,
The alert works, the button text changes but the button click doesn't work.
Could this be a security feature? Both pages are on the same page right now.
hmm any clue?
Thanks
Edit - if you click the button manually, it changes the grid (in the button event handler). Yet, the jquery doesn't seem to be going in the button's event handler and the grid doesn't change.
Parent page html
<asp:GridView ID="gv" runat="server" />
<asp:Button ID="btnRefresh" runat="server" />
<a id="popoutUsers" href="popup.aspx?page=Bob" class="OpenNewLink">CLICK ME</a>
<script type="text/javascript">
$(function () {
$('.OpenNewLink').click(function () {
var url = $(this).attr('href');
var dialog = $('<div id="modal"></div>').appendTo('body')
$('<iframe id="site" src="' + url + '" />').dialog({
modal: true
, close: function (event, ui) {
// remove div with all data and events
dialog.remove();
}
});
return false;
});
showThanks = function () {
alert("Thanks");
var button = $("#btnRefresh");
button.val("hello"); //This works
button.click(); //Nothing seems to happen
// button.trigger("click"); (Tried trigger as well but no luck)
};
});
</script>
Child page
<div>
Why hello there
<asp:Button ID="btnBob" runat="server" Text="click me" />
</div>
<script type="text/javascript">
$(function () {
$('#btnBob').click(function (e) {
e.preventDefault();
window.parent.showThanks();
window.parent.$('.ui-dialog-content').filter(function () { return $(this).dialog('isOpen'); }).dialog('close');
return false;
});
});
</script>
So decided to do a new round of google searching and found this link Html Button that calls JQuery and does not post back
I changed my button to the following (added the UseSubmitBehavior)
and now it works. Hopefully I didn't waste people's time...