I have this code in an ASP.NET Page
function ShowPopup() {
$("#GridView2").dialog({
title: "GridView2",
width: 1200,
buttons: {
Ok: function () {
$(this).dialog('close');
}
,
Export: function funcXport() {
//EVENT HERE?
}
},
modal: true
});
which is a popup with a gridview and there are 2 buttons on it.
I want the "Ok" button to actually close the Grid but I'd like the "Export" button to trigger an event (I suppose) so I can write a C# code that exports the GridView to an EXCEL file.
Well you could do it with a little trick:
Define a non-visble button and click it:
<asp:Button ID="ButtonID" runat="server" OnClick="DoExport" style="visibility: hidden; display: none;" />
Then:
Export: function funcXport() {
$("#<%=ButtonID.ClientID%>").Click();
}
Or use ClientIDMode=Static on the button and $("#ButtonID").click();
Related
I have a form within popup window something like that:
<div id="dialog" title="Rezerwacja">
<asp:TextBox ID="imieTextBox" runat="server" placeholder="Imię"></asp:TextBox>
<asp:TextBox ID="nazwiskoTextBox" runat="server" placeholder="Nazwisko"></asp:TextBox>
<asp:TextBox ID="emailTextBox" runat="server" TextMode="Email" placeholder="Email"></asp:TextBox>
<asp:TextBox ID="telefonKomorkowyTextBox" runat="server" TextMode="Phone" placeholder="Telefon kom."></asp:TextBox>
<div id="plansza"></div>
<asp:Button ID="rezerwujButton" runat="server" Text="Zarezerwuj" OnClick="rezerwujButton_Click" />
</div>
And JavaScript:
$(document).ready( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "puff",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( ".opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
});
So I have to behind code:
protected void rezerwujButton_Click(object sender, EventArgs e)
{
rezerwacje nowaRezerwacja = new rezerwacje();
nowaRezerwacja.imie_klienta = imieTextBox.Text;
nowaRezerwacja.nazwisko_klienta = nazwiskoTextBox.Text;
nowaRezerwacja.email_klienta = emailTextBox.Text;
nowaRezerwacja.nrtel_klienta = telefonKomorkowyTextBox.Text;
bazaDC.rezerwacjes.InsertOnSubmit(nowaRezerwacja);
bazaDC.SubmitChanges();
}
And there is the problem, submit button "rezerwujButton" does not work. It look like a unclickable or something like that... I'm clicking on it and nothing do... Not refresh page or anything...
When I going to use that form without popup window, It work but within popup not.
I tried to set usesubmitbehavior="false" but when I did it, button worked, send something but every field was blank... I mean when i tried to get something like that: imieTextBox.Text It will be blank... Always...
Any ideas?
#edit
I don't know what Do I do wrong?
Always a fields from form is blank...
Anybody can tell me how can I use correct this __PostBack? Because I have to do something wrong...
I added to button UseSubmitBehavior="fase" and in function PageLoad I got something like that:
if (Page.IsPostBack)
{
rezerwacje nowaRezerwacja = new rezerwacje();
nowaRezerwacja.imie_klienta = imieTextBox.Text;
nowaRezerwacja.nazwisko_klienta = nazwiskoTextBox.Text;
nowaRezerwacja.email_klienta = emailTextBox.Text;
nowaRezerwacja.nrtel_klienta = telefonKomorkowyTextBox.Text;
bazaDC.rezerwacjes.InsertOnSubmit(nowaRezerwacja);
bazaDC.SubmitChanges();
}
For example imieTextBox.Text is always blank... I don't know why...?
edit
Im done. I change the way to get modal window. I used popup window which not moving modal div anywhere and It working.
The reason of the "nothing happens" behaviour is the fact that jQuery-UI dialog widget moves the DOM-element, which is converted to a dialog (in your case - $("#dialog")), to body. After this, the submit button is not inside a form tag anymore, and clicking it does not cause any submission.
It will still work if the whole form is inside the dialog content:
<div id="dialog" title="Rezerwacja">
<form ...>
...
<asp:Button ID="rezerwujButton" runat="server" Text="Zarezerwuj" OnClick="rezerwujButton_Click" />
</form>
</div>
You can try putting your rezerwujButton_Click method into PageMethods
[ScriptMethod, WebMethod]
public string RezerwujCall() {
// logic here
return "ok";
}
Then in your js:
<script type="text/javascript">
function rezerwuj_clicked() {
PageMethods.RezerwujCall(function (response) { if(response == "ok"){} }, function(response){ console.log("failed"); });
}
</script>
This will require to change OnClick="rezerwujButton_Click" into OnClientClick="rezerwuj_clicked()"
$(document).ready(function () {
$('#btnApplyFilter').click(function () {
alert("JQuery Running!");
});
});
The above function is not getting fired on button click. What would be the cause?
My Button :
<asp:Button ID="btnApplyFilter" runat="server" Text="Apply Filter" OnClick="btnApplyFilter_Click" />
Remove onClick from button
There is no use of onClick in button
Write the function delegately if its a dynamic element
$(document).ready(function () {
$(document).on('click','#btnApplyFilter',function () {
alert("JQuery Running!");
});
});
The OnClick is for server side event. You can use OnClientClick if you want to call a javascript function or also you can use jQuery click event.
How does the client know to send request to server only when the confirmation box result is ok and stay on page if cancelled?
Also, is this mechanism any different in ASP.Net and ASP.Net MVC?
The responses I got seem to tell me how to implement the functionality.
I want to know the internal working of when user clicks OK/cancel what happens internally. How does browser come to know it has to proceed to server call or close itself and do nothing?
You can use simple confirm box
$("#callConfirm").on("click", function(e) {
if(confirm('Are you sure'))
alert('Yes');
else
alert('No');
});
JSFIDDLE
Try This
<script>
function CallConfirm()
{
if(confirm('Are you sure'))
//do your stuff
else
return false;
}
<script />
and on asp button write like this
<asp:Button id="Click" runat="server" onclientclick="return CallConfirm();" onclick="btn_Click"/>
you can use bootstrap in asp.net and it will help you give new look and help you in lots of other things,see this http://getbootstrap.com/ and u can use bootstrap confirmation box.
<asp:button
id="Button1" runat="server" text="Button" xmlns:asp="#unknown">OnClientClick="return confirmation();" onclick="Button1_Click"/>
</asp:button>
<script type="text/javascript">
function confirmation() {
if (confirm('are you sure you want to delete ?')) {
return true;
}else{
return false;
}
}
</script>
I write this Jquery code in the aspx page for button.
Steps:
Add a button for which you want to have a confirm box, add its jquery and div to show the confirm box.
Register the script for button on Page_Load, and write the methods which will bind this script on button.
Also do not forget the server side method or event for button click, which will be continued after OK confirmation from confirm box.
If cancel is clicked, nothing will happen and div will be closed.
<script type="text/javascript">
function FileItem(callBackFunction, title, content) {
$("#File-confirm").html(content).dialog({
autoOpen: true,
modal: true,
title: title,
resizable: false,
height: 140,
close: function (event, ui) { $(this).dialog("destroy"); },
buttons: {
'Ok': function () {
callBackFunction(); $(this).dialog("destroy");
},
'Cancel': function () {
$(this).dialog("destroy");
}
});
}
}
where SaveBtn is the button in the UI:
<asp:Button ID="SaveBtn" runat="server" Text="File" OnClick="SaveBtn_Click"/>
<div id="File-confirm" style="display: none">
</div>
Again the code behind:
FileConfirmRequest(SaveBtn, "Confirm", "Are you sure you want to file the changes?");
// In the Page_Load, write the above code
//Use this method later on the page
protected void FileConfirmRequest(Button control, string title, string message)
{
string postBackReference = Page.ClientScript.GetPostBackEventReference(control, String.Empty);
string function = String.Format("javascript:FileItem(function() {{ {0} }}, '{1}', '{2}'); return false;", postBackReference, title, message);
control.Attributes.Add("OnClick", function);
}
Now, The Onclick of the Button:
protected void SaveBtn_Click(object sender, EventArgs e)
{
//Do what you want to after OK Click from the confirm box
}
So to show this modal I have the following code:
<button type="button" onclick="openModal(); return false;">A button</button>
and the javascript for this is:
<script type='text/javascript'>
function openModal(a)
{
$.modal({
content: 'Some content here',
title: 'a title',
maxWidth: 500,
});
win.closeModal();
}
</script>
I need a function that will hide this. Can anyone give me some advice on how to do the hideModal() function which will hide the modal when I click anywhere on the screen?
With the modal open in the browser window, use the browser's console to try
var modal;
function btnsModal() {
var btns = {
'Close': function (win) {
modal.closeModal()
}
}
return btns;
}
function openModal(oLink, content) {
var btn = btnsModal();
modal = $.modal({
buttons: btn
});
}
You can add "open" event to dialog, and then bind on click listener to it which will close the dialog if you click anywhere---
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#ID_of_ur_dialog').dialog('close');
})
}
for hiding effect you can use "hide" option---
hide: "highlight"
This is dumb...
I fixed this with display none in css... It turns out I didn't thick it trough... I added the display none and a JS event that triggers the CSS upon clicking anywhere else in the page, except the modal.
Thank you very much for all your input guys! Really appreciate it!
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...