We Keep Coding

How to add Confirmation Message ASP button click

I need to add confirmation when I click a button.
My ASPX code as follows,
<script>
function ConfirmMessage() {
confirmDialog('Delete TEST', "Are you sure you want to delete");
}
</script>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Panel ID="Panel1" runat="server">
<div class="service-display-order">
<div class="row">
<div class="col-xs-12 text-right">
<button id="serviceBack" class="btn btn-default" onclick="onLinkClick('ServicesAdmin.aspx');return false;" ><i class="fa fa-arrow-left" aria-hidden="true" ></i> Back</button>
<button id="btnSaveDisplayOrder" runat="server" onserverclick="btnSaveDisplayOrder_Click" class="btn btn-default"><i class="fa fa-user-plus" aria-hidden="true"></i> Save</button>
<asp:HiddenField ID="hdnDisplayOrderSaveData" runat="server" Value="" />
</div>
</div>
</div>
</asp:Panel>
</asp:Content>
I already have JS function for confirm Dialog, which as follows,
function confirmDialog(title, message, callbackOnYes, callbackOnNo, callbackOnClose, callbackXClose) {
var this$ = this.$;
this$.modal.close();
this$('#confirm').modal({
closeHTML: "<a href='#' id='modalClose' title='Close' class='modal-close'>x</a>",
overlayId: 'simplemodal-overlay',
containerId: 'simplemodal-container',
onShow: function (dialog) {
this$('#simplemodal-container').css({ 'width': 'auto', 'height': 'auto', 'padding-bottom': '5px' });
this$('.message').css("display", "block");
this$('.message', dialog.data[0]).append(message);
this$('.title', dialog.data[0]).append(title ? title : 'Confirm');
var tmpW = this$('#simplemodal-container').width() / 2
var tmpH = this$('#simplemodal-container').height() / 2
this$('#simplemodal-container').css({ 'margin-left': tmpW * -1, 'margin-top': tmpH * -1 })
if (!this$.isFunction(callbackOnYes)) {
this$('.yesbutton', dialog.data[0]).css("display", "none");
this$('.nobutton', dialog.data[0]).css("display", "none");
} else {
this$('.closebutton', dialog.data[0]).css("display", "none");
}
// if the user clicks "yes"
this$('.yesbutton', dialog.data[0]).click(function () {
// call the callback
if (this$.isFunction(callbackOnYes)) {
callbackOnYes();
}
// close the dialog
this$.modal.close();
});
// if the user clicks "no"
this$('.nobutton', dialog.data[0]).click(function () {
// call the callback
if (this$.isFunction(callbackOnNo)) {
callbackOnNo();
}
// close the dialog
this$.modal.close();
});
// if the user clicks "close"
this$('.closebutton', dialog.data[0]).click(function () {
// close the dialog
this$.modal.close();
});
$("#modalClose").click(function () {
if (this$.isFunction(callbackXClose)) {
callbackXClose();
}
});
},
onClose: function () { this$.modal.close(); if (this$.isFunction(callbackOnClose)) callbackOnClose(); }
});
}
I tried to add OnClientClick to the button, but it does not working,
<button id="btnSaveDisplayOrder" runat="server" OnClientClick="ConfirmMessage() return false;" onserverclick="btnSaveDisplayOrder_Click" class="btn btn-default"><i class="fa fa-user-plus" aria-hidden="true"></i> Save</button>
And also trying to call it from Code-behind,
protected void btnSaveDisplayOrder_Click(object sender, EventArgs e)
{
//ClientScript.RegisterStartupScript(typeof(Page), "Popup", "ConfirmMessage()", true);
}
But its not also working, How can I add confirmation popup.please help me

Have you tried setting a simple
alert('message')
?
Just to check if the code is working.
When adding a function to a OnClientClick i usually don't need to do anything but to add the name of the function, unless i am sending parameters.:
OnClientClick="ConfirmMessage()"
You post the function but where do you have it? If it's on an external file then you need to specify where you have it.
From code behind you can add an alert as well, just add a new controller on your event.

knockout.js afterRender does not work in a jquery pop-up

<div data-bind="style: { display: !koIsHidden() ? 'inline-block' : 'none'}">
<button id="hideButton" type="button" title="Hide" onclick="javascript:openJuiPopup('#hidePopup')" style="background: none; border: none">
<i id="hideCross" class="fa fa-2x fa-times" data-bind="attr: { 'data-applicationKey': application.applicationKey }"></i>
</button>
</div>
This button loads a pop-up that looks like this
The code for the popup looks like:
<div id="hidePopup" class="popup ui-content" data-role="popup">
<!-- ko foreach: { data: previewApplications(), afterRender: renderPopup} -->
<form id="hider" style="display:inline;" method="post" data-bind="attr: {action: '#(MVC.GetLocalUrl(MVC.HireOrgJobApplication.ViewApplication(Model.CurrentOrganization.CustomUrl, Model.Job.JobKey, "xxx/ajax-hide")))'.replace('xxx', application.applicationKey)}">
#Html.AntiForgeryToken()
<input type="hidden" name="ApplicationKey" data-bind="attr:{ value : application.applicationKey }" />
<input type="hidden" name="HideReasonId" value="7" />
<button type="submit" class="btn btn-danger jui-tooltip" data-bind="text: application.hideButtonSendRejectionInsteadOfHide === true ? 'Reject' : 'Hide', attr: { title: application.hideButtonSendRejectionInsteadOfHide === false ? 'Reject' : 'Hide'}"></button>
</form>
<!--/ko-->
</div>
And the js code that calls it:
$("#hidePopup").dialog({
dialogClass: "no-close",
position: { my: "bottom", at: "bottom", of: $("#hideCross"), collision: "none" },
autoOpen: false,
draggable: true,
}).dialog("widget").find(".ui-dialog-titlebar").hide();
The detail isn't that important, but one thing important in this code is
<!-- ko foreach: { data: previewApplications(), afterRender: renderPopup} -->
Due to the afterRender feature of knockout js, this should loop through elements in previewApplications() and run the function renderPopup.
The renderPopup looks like
self.renderPopup = function (element, data) {
$(element).find("form#hider").ajaxForm(function () {
alert("heyyyyy");
});
};
This should just simply find a form with id = hider, and run alert("heyyyy").
But it doesn't work.
Notice that afterRender worked totally fine when i put it outside of the popup.
Please help!
EDIT:
I can add more info to this question.
It's not about afterRender, but the ajaxForm just does not work for the popup.
Any idea?
EDIT2:
self.renderApplication = function (element, data) {
filter: ($(element).filter("form#hider")[0]).ajaxForm(function () {
data.koIsHidden(true);
});
};
I tried this and
$(element).filter(("form#hider")[0]).ajaxForm(function () {
data.koIsHidden(true);
});
The code above gives me the error that i wrote in the comment, and the second one gives me no error, but still doesnt catch the renderApplication function.

Call renderPopup like a function - afterRender: renderPopup() or you may have to try $root.renderPopup() or $parent.renderPopup().

The k-add-button works only one times.

The a href with k-add-button in the viewtemplate works only on times, not multible times. Have anybody a idea why, or mybe a sample or solution that's work correctly?
If the k-add-button is outside from the template, it works fine.
<div id="example"></div>
<script type="text/x-kendo-template" id="viewtemplate">
<div class='k-widget'>
<span>Filter:</span><span>#:filtertext#</span><span>Filterwert:</span><span>#:filterwert#</span>
<a class="k-button k-edit-button" ><span class="k-icon k-edit"></span></a>
<a class="k-button k-delete-button" ><span class="k-icon k-delete"></span></a>
<a class="k-button k-add-button" ><span class="k-icon k-add"></span></a>
</div>
</script>
<script type="text/x-kendo-template" id="editTemplate">
<div class='k-widget'>
<input type="text" class="k-textbox" data-bind="value:filtertext" name="filtertext" required="required" validationMessage="required" />
<span data-for="filtertext" class="k-invalid-msg"></span>
<input type="text" class="k-textbox" data-bind="value:filterwert" name="filterwert" required="required" validationMessage="required" />
<span data-for="filterwert" class="k-invalid-msg"></span>
<a class="k-button k-update-button" ><span class="k-icon k-update"></span></a>
<a class="k-button k-cancel-button" ><span class="k-icon k-cancel"></span></a>
</div>
</script>
<script type="text/javascript">
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: [ { filternr: 0, filtertext: "SA-Code", filterwert:"123"} ],
schema: {
model: {
id: "filternr",
fields: {
filternr: { type: "number" },
filtertext: { type: "string" },
filterwert: { type: "string" }
}
}
}
});
var listView = $("#example").kendoListView({
dataSource: dataSource,
template: kendo.template($("#viewtemplate").html()),
editTemplate: kendo.template($("#editTemplate").html()),
}).data("kendoListView");
$(".k-add-button").click(function(e) {
listView.add();
e.preventDefault();
});
}); // Ende $(document).ready()
</script>

I have modified your code slightly at this dojo: list view template with button
You will hopefully notice the following changes I have made.
I have added a DataBound event to your listview object like so:
editTemplate: kendo.template($("#editTemplate").html()),
dataBound: onDataBound
I have then wrapped your button click event in the appropriate function called onDataBound
The reason the button is not working correctly is that once the data you have added to the dataSource is saved and then re-read the template is re-rendered and this then removes the event handlers from the buttons that you associated then with. In order to re-link them we reattach it as part of the dataBound event and then everything is working happily.
If you need more info let me know.
Hopefully the example shows what it is doing.

How write a script that works on modal popup & on full page

I have the following view which is forced to be displayed as a modal popup using jQuery :-
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" /> | #Html.ActionLink("Back to List", "Index")
</div>
</div>
</div>
}
<span id="progress" class="text-center" style="display: none;">
<img src="~/img/ajax-loaders/ajax-loader-5.gif" alt="wait" />
Wait..
</span>
and i wrote the following script, which will fires if the user click on Create/Edit/Delete links . where the script will show a progree message + disable the submit button:-
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
height: 1000,
width: 1200,
resizable: true,
keyboard: true
}, 'show');
$('#myModalContent').removeData("validator");
$('#myModalContent').removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse('#myModalContent');
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$('.btn btn-default').prop("disabled", "disabled");
$('#progress').show();
if ($(this).valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
but let say the that the user instead of clicking on the link, he chose to "Open link in new browser" , so the view will render insdie the browser (not as modal popup) and the script will not fire, so when the user click on submit button,, the submit button will not be disabled + the progress will not be shown?
So can anyone adivce where i need to place a script that always works ?

jquery-ui dialog being displayed with no content (see update 3)

In my spring project, I have this dashboard page, where each click in a link open the destination page in a separate popup window (created with jquery-ui dialog):
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li> <c:url value="/Usuario/listagem" var="usuario"/> <a class="popup" data-action="${usuario}/1/10/1" data-target="popup" href="#">Usuários</a></li>
<li> <c:url value="/logout" var="logoutUrl"/> Sair do sistema</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="popup"></div>
the code to do that it's the following:
$( ".dialog" ).dialog({
autoOpen: false,
closeOnEscape: true,
closeText: "fechar",
show: {
effect: "fadeIn",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
},
close: function( event, ui ) {
$(this).remove();
}
});
function add_dialog(container_div) {
var id_dialog_div = Math.floor(Math.random() * 1000000);
var dialog_div = $('<div id="dialog-'+id_dialog_div+'" class="dialog" title="Basic dialog"> <p> <span id="text'+id_dialog_div+'"></span> </p> </div>');
$(container_div).append(dialog_div);
return id_dialog_div;
}
function open_dialog(url, dialog_div) {
$.ajax({
type: "GET",
url: url
}).done(function(data){
var id_dialog_div = add_dialog(dialog_div);
var dialog_box = $('#dialog-'+id_dialog_div);
var $temp = $('<div/>', {html:data});
$( dialog_box ).dialog( { title: $temp.find('title').text() } );
$( dialog_box ).find('#text'+id_dialog_div).html( $temp.remove('head').html() );
$( dialog_box ).dialog( { height: 480 } );
$( dialog_box ).dialog( { width: 640 } );
$( dialog_box ).dialog( "open" );
});
}
$(document).on('click', '.popup', function (event) {
event.preventDefault();
var action = $(this).data('action');
var target = $(this).data('target');
var div = $("#"+target);
open_dialog(action, div);
});
the view which should be opened in the popup it's that:
<jsp:include page="../../common/listagem.jsp">
<jsp:param name="name" value="Usuario"/>
<jsp:param name="elements" value="login,first_name,last_name,email"/>
</jsp:include>
and the jsp common/listagem.jsp it's that:
<%# include file="../include/header.jsp" %>
<c:url value="/${param.name}/cadastra" var="cadastra"/>
<c:url value="/${param.name}/altera" var="altera"/>
<c:url value="/${param.name}/remove" var="remove"/>
<input type="hidden" name="pagina" value="${pagina}">
<input type="hidden" name="items" value="${items}">
<input type="hidden" name="ordem" value="${ordem}">
<sec:authorize access="hasPermission(#user, 'altera_${param.name}')">
<p>
<button type="button" class="btn btn-default btn-lg">Cadastrar novo ${param.name} </button>
</p>
</sec:authorize>
<table border="2">
<thead>
<tr>
<th>#</th>
<c:forEach var="item" items="${param.elements}" varStatus="index">
<th class="col" data-property="<c:out value="${item}"/>"> <c:out value="${item}"/> </th>
</c:forEach>
<th></th>
</tr>
</thead>
<tbody class="content">
</tbody>
<tfoot>
<tr class="comando">
<sec:authorize access="hasPermission(#user, 'altera_${param.name}')">
<td data-nome="altera" data-action="${altera}"></td>
</sec:authorize>
<sec:authorize access="hasPermission(#user, 'remove_${param.name}')">
<td data-nome="remove" data-action="${altera}"></td>
</sec:authorize>
</tr>
</tfoot>
</table>
<c:url value="/${param.name}/listagem.json" var="listagem"/>
<script>
$(document).ready(function(){
load_content("${listagem}", $('table'));
});
</script>
<%# include file="../include/footer.jsp" %>
My problem is that when I click in the close button, the windows isn't closed immediately, but it's shrunked, remaining only the titlebar. if I click again in the close button, then it close. Also, no title is displayed in the window, but a second (and smallest) titlebar is displayed on the screen with the correct title, and that one I only get to close after the second click in the first close button.
This is what happening:
Anyone knows what's happening here and how to solve this?
UPDATE
In the code above, the line:
$( dialog_box ).find('#text').html( $temp.remove('head').html() );
should remove from the jsp page the <head> tag and its content and append the <body> content inside the element <span> in this <div>:
<div id="dialog" class="dialog" title="Basic dialog">
<p> <span id="text"> </span> </p>
</div>
But when I run the application, and look the html code in the browser dev tool, all the content from the jsp page is added to the <div>, <head> included.
UPDATE 2
I try remove the function add_dialog, and change the <div> to this:
<div id="popup">
<div id="dialog" class="dialog" title="Basic dialog">
<p> <span id="text"> </span> </p>
</div>
</div>
and the function open_dialog to this:
function open_dialog(url, dialog_div) {
$.ajax({
type: "GET",
url: url
}).done(function(data){
//var id_dialog_div = add_dialog(dialog_div);
var dialog_box = $('#dialog');
var $temp = $('<div/>', {html:data});
$( dialog_box ).dialog( { title: $temp.find('title').text() } );
$( dialog_box ).find('#text').html( $temp.remove('head').html() );
$( dialog_box ).dialog( "open" );
});
}
But this work partially: when I open the dialog in the first time, it's displayeh correctly, but after I close and reopen it, the issue happens again.
UPDATE 3
I solve the problem with the shunkring / duplication with this code:
$( "#popup" ).dialog({
autoOpen: false,
closeOnEscape: true,
closeText: "fechar",
show: {
effect: "fadeIn",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
}
});
function open(url, target) {
$.ajax({
type: "GET",
url: url
}).done(function( data ) {
var $temp = $('<div/>', {html:data});
var conteudo = $temp.remove('head').html();
target.empty();
target.find('#text').html(conteudo);
$("#popup").dialog('open');
});
}
$(document).on('click', 'a.link', function (event) {
event.preventDefault();
var action = $(this).attr('href');
var target = $('#dialog');
open(action, target);
});
$(document).on('click', 'button.btn-link', function (event) {
event.preventDefault();
var action = $(this).data('href');
var target = $('#dialog');
open(action, target);
});
But now, my dialog is opened without content. Anyone knows what is wrong now?

not sure about all your javascript and i will be not going there but depending on version of jQueryUI your code uses
close: function( event, ui ) {
$(this).remove();
}
throws an error, check the console output in your browser, in my code i have dialog applied to #page_preview
$("#page_preview").dialog('remove');
Error: no such method 'remove' for dialog widget instance
but as soon as i use
$("#page_preview").dialog('close');
it works
my entrire code looks like this
$("#page_preview").dialog({
title: "Page Preview",
dialogClass: "no-close",
autoOpen: false,
resizable: true,
modal: true,
width: 1100,
buttons: [
{
text: "OK",
click: function() {
$(this).dialog("close");
}
}]
});
i believe that doing what you are doing in that close: section you are actually removing the element that dialog is applied to, but the dialog structure remains, thats why it seems like it has shrunk
hope it helps
FINAL EDIT:
take a look in here, it is slightly different but works, sorry that will be the best i can do for u goo.gl/GLqIYO