I'm a newbie to dev extreme. I'm trying to customize the Save and Cancel buttons at the bottom of a pop up window.
Everything I find online doesn't show how to pass the event through to the component.
<dxo-popup title="New Popup" [showTitle]="true" width="75%" >
<dxi-toolbar-item toolbar="bottom" location="after" widget="dxButton" [options]="{ type: 'success', text: 'Save', onClick: 'popupSave' }">
</dxi-toolbar-item>
<dxi-toolbar-item toolbar="bottom" location="after" widget="dxButton" [options]="{ type:'danger', text: 'Cancel', onClick: 'popupCancel'}">
</dxi-toolbar-item>
async popupSave(event) {
// Do stuff with the event
event.changes[0] = blah
// Keep popup open
)
async popupCancel(event) {
// Do stuff with the event
event.changes[0] = blah
// Close popup
)
I read that you do some kind of binding in the component constructor:
constructor(){
this.popupSave = this.popupSave(this)
}
But then how do you access the event?
I am using Angular 13.
Thanks.
Related
I need disable the browser back button after the window alert.
in page1.aspx i put like this
**$(document).ready(function () {
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function (evt) { if (evt.persisted) disableBack() }
});**
After in Page2.aspx
I put alert message when button click.once close the alert message i press the back button.
same alert show when each click of back button.
(How to prevent the alert message when back button press)
Try This:
jQuery(document).ready(function(){history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};})
I have used the below script to open a popup window of woocommerce product.
I am looking forward to close this window automatically as I will click on "Add to Cart" Button.
Can someone help me to achieve this task, please?
<script>// <![CDATA[
function pop1(){
window.open(
'https://www.veggietiffin.co.uk/product/flextiffin-plan'
,'popwin'
,'width=640
, height=480'
);
}
// ]]></script>
<p>
Flex Tiffin Day 1
</p>
Here is a code just change the button class to the class on your site have fun
<script>
function pop1() {
//wrapping the popup inside a variable
var popup = window.open('https://www.veggietiffin.co.uk/product/flextiffin-plan', 'popwin', 'width=640, height=480');
//add event listner to add to cart button
document.getElementsByClassName('your class here').addEventListener("click", function() {
window.close(popup);
});
}
</script>
I want to find out which input opened the dialog.
$('#dialog').dialog({
autoOpen: false,
open: function (event, ui) {
// find the opening button here?
},
buttons: {
"Save": function () {
// if button "Add" opened dialog
// do something...
// if button "Edit" opened dialog
// do something...
},
Cancel: function () {
$(this).dialog("close");
}
}
});
<form id="myForm">
<input id="Add" type="button" value="Add" />
<input id="Edit" type="button" value="Edit" />
</form>
During debugging, set a breakpoint on the modal dialog code. When it is reached, the stack trace should show you what input triggered it. If during production use, instrument your code that calls the modal dialog to store a string representing the calling context in some convenient persistent place (as a new 'window' property, for example). Then the modal dialog can fetch the calling context. I doubt that jquery itself can do this.
I have jQuery UI dialog with ASP.NET. I wrap a list of check boxes in the dialog. Since, it's an "Edit page", some of the checkboxes are already checked
because the data fetched from datatbase when page is first loaded.
I have no problem when I click on the link to open dialog, and everything works as expected. However, if I don't click on the link to open dialog, those checkboxes
values will not be picked up from code-behind when form is submitted back. I understand because jQuery UI dialog append "div" to HTML body outside of the "form"
element when the page is loaded.
//I'm trying to append dialog-dept to form on document ready like this but not yet working
$("#dialog-dept").parent().appendTo($("form:first"));
How do I make jQuery UI dialog part of "form" tag required by ASP.NET page when page first loaded?
Because there are many other fields on the page not just those checkbox. Sometime,
there might be no need to open dialog to select any checkbox.
The code below works well only if I click on the link to open the dialog.
$(document).ready(function() {
// Dialog Link
$('#dialog_link_dept').click(function() {
$('#dialog-dept').dialog('open');
return false;
});
// Launch Dialog
$('#dialog-dept').dialog({
autoOpen: false,
width: 700,
modal: true,
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
});
</script>
You can move it into the <form> immediately upon creation, even if it's autoOpen: false, like this:
$('#dialog-dept').dialog({
autoOpen: false,
width: 700,
modal: true
}).parent().appendTo("form");
I guess this way form modal dialog:
$("#dialog-dept").dialog({ height: 300, width: 250, modal: true,appendTo:"form", title: "Title", show: { effect: "fade", duration: 500 }, hide: { effect: "fold", duration: 500} });
and work fine for me
Having this div:
<div id="advSearchDialog" style="visibility:hidden;">
<xx:search ID="searchUC" runat="server" />
</div>
And a button:
<input type="button" id="btnAdvSearch" value="Search" />
I turn it into a jQuery dialog, where the button opens the dialog:
$(document).ready(function() {
$('#advSearchDialog').dialog({
autoOpen: false,
height: 500,
width: 600,
modal: true,
bgiframe: true,
title: 'Avanceret søgning',
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
$('#btnAdvSearch').click(function() {
$('#advSearchDialog').css('visibility', 'visible');
$('#advSearchDialog').dialog('open');
});
});
Using ASP.NET, I get a problem.
If I push some other button on the ASP.NET page (inside an update panel), and after that clicks the btnAdvSearch button, nothing happens. Why is that?
Thanks in advance
maybe the partial page refresh removes your click event, hard to say without seeing the whole page.
the solutions to that problem would be using jquery live events
http://docs.jquery.com/Events/live
hth
Check the emitted HTML using firebug or somthing similar and you will probably notice that your button is no longer inside the form tags and is at the end of the body tag.
In you're OK button callback you can use something like
dialogBox.appendTo($('#FormIdHere'));
dialogBox is a variable set as so
var dialogBox = $('#DialogDiv').dialog({ autoOpen: false });
This should add your button back into the form.
EDIT:
Here is a code snippet I've recently used (all the code below is fired within an onload function but reasonPostBack must be declared outside the onload function)
var button = $('input.rejectButton');
reasonPostBack = button.attr('onclick');
button.removeAttr('onclick');
var dialogBox = $('#ReasonDiv').dialog({ autoOpen: false, title: 'Please enter a reason', modal: true, bgiframe: true, buttons: { "Ok": function() {
if ($('input.reasonTextBox').val().length > 0) {
$(this).dialog('close');
dialogBox.appendTo($('#theform'));
reasonPostBack();
}
else
{
alert('You must enter a reason for rejection');
}
}
}
});
button.click(function() {
dialogBox.dialog('open');
return false;
});
First i take a reference to the .Net postback with
var reasonPostBack = button.attr('onclick');
and hold it for later then strip the click event from the button to stop the post back ocurring "automatically". I then build the dialog box and add an anonymous function for the OK button, this runs my code to test if there is anything in a text box, if there isn't it simply alerts the user otherwise it;
Closes the div
$(this).dialog('close');
Adds the div back inside the form tags ready for the post back
dialogBox.appendTo($('#theform'));
and then calls the original postback
reasonPostBack();
Finally the last bit of code
button.click(function() {
dialogBox.dialog('open');
return false;
});
adds our own event handler to the .Net button to open the dialog that was instantiated earlier.
HTH
OneSHOT