Develop Reference

Dynamically Set onExecute callback function in DOJO Confirm Dialog

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
});
});

Bootstrap Popover - JS Trigger

I'm trying to trigger Bootstrap's Pop Over with JS.
I want to be able to change the message and title relative to the link I click.
It works if I actually click the link, but I want to achieve this via Jquery .Click event.
Here is my current JS code:
//Global Tooltip Functionality
$(function () {
$(".tool-tip").on("click",function () {
//Initializes Tooltip
$(function () {
$("#ToolTipContainer").popover();
});
var title = $(this).attr("data-tooltip-title"),
message = $(this).attr("data-tooltip-message");
$("#ToolTipContainer").attr("title", title);
$("#ToolTipContainer").attr("data-content", message);
$("#ToolTipContainer").click();
});
});
Here is my DOM element I am calling function from:
<button type="button" class="tool-tip btn btn-default" data-dismiss="modal" data-tooltip-title="Item Added" data-tooltip-message="Some Message">Continue Shopping</button>
Here is the pop-up container(css hides this, I only want to see the pop-up):
Bootstrap Documentation: Bootstrap PopOver

You can show a tooltip programatically by calling
.popover('show')
$(function () {
$(".tool-tip").on("click",function () {
//Initializes Tooltip
$(function () {
$("#ToolTipContainer").popover();
});
var title = $(this).attr("data-tooltip-title"),
message = $(this).attr("data-tooltip-message");
$("#ToolTipContainer").attr("title", title);
$("#ToolTipContainer").attr("data-content", message);
$("#ToolTipContainer").popover('show');
});
});
Try not hiding the popover container as well, it is most likely hiding your popover.

Moving code from jquery to angularjs

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

Unable to get javascript to do button click from child iframe

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...

colorbox close button with iframe

I am using colorbox for modal popup and the content of the popup is coming from a URL since this is displayed inside an iFrame how can I add a close button to the modal popup?
Thanks
This is the code for color box
<a class="Modal" href="http://google.com" onclick="openModal();">Click here</a>
And the js:
var openModal = function (){
$(".Modal").colorbox({
iframe:true,
opacity:0.5,
scrolling:true,
width:832,
height:456,
top:60
});
}

Try adding this to colorbox-iframe.html
<input type="button" name="btnClose" value="Close" onclick="parent.$.colorbox.close()" />

I've never used colorbox before, but maybe you want to add the close button via jQuery in your function:
var openModal = function (){
$(".Modal").colorbox({
iframe:true,
opacity:0.5,
scrolling:true,
width:832,
height:456,
top:60
});
$("<div class='thisClosesTheModal'>Close Modal</div>").appendTo(".Modal");
// style .thisClosesTheModal to look like a close box
}
// and then the function that closes the modal
$(".thisClosesTheModal").live('click', function(){
$('Modal').hide();
}