I have an ASP page which displays a text box when it loads. It takes an input number, send it to the server through post back, and then displays some record in a grid view. After a number is input into the box, the server fetches some data from a database and add records to the grid view. It also contains a link column, whose URL is set to "#", so that the page isn't redirected when it is clicked.
Now I want to bind a jquery "click" event to that link. How can I do that ? I have tried that to do myself but failed, because it is not available when the DOM is loaded (since it only contains rows when a number is input through the box), and is being modified through ASP.NET Ajax post back.
You should be able to use the live handlers in jQuery to do this. I'd give these links a specific class to uniquely identify them and make it easier.
$('a.gridLink').live('click', function() {
... perform your action...
return false; // to cancel the default click action
});
i think you're looking for .live.
You need to call the live function:
$('#<%=myGrid.ClientID%> a').live("click", function(e) {
//Do things
return false; //You don't need to set the href to #
});
Related
When using ASP.NET WebGrid paging and sorting works by appending a specific query string to the url which contains names and values stating page number, sorting direction etc.
However, when using ajaxUpdateId property to be able to update WebGrid asynchronously,
when clicking on pages in footer or clicking on headers to sort a column it works fine, but query string is no more appending to url which is not persisting paging and sorting after refreshing the browser page.
Is there a way to persist sorting and paging values while updating WebGrid via ajax?
Thanks a lot in advance for any useful suggestions
I think I found solution. Maybe it's not perfect but it works. I spent so much time trying to figure out how WebGrid works when it's updating via ajax, however all that functionality is kind of hidden.
So if you need to keep sorting and paging even when you refresh the page you have to update url everytime you change a page or sorting. WebGrid remembers it by query string in url.
So I added a jquery click event to all links within the WebGrid and used history.pushState function to save the clicked url and then refreshed the page (you need to do that since it will work only for one change as ajax will not change the url)
<script type="text/javascript">
$("#gridContainderID a").click(function () {
history.pushState(null, null, this.href);
location.reload();
});
</script>
I have been able to do it with this code:
(note the return false!)
$('#gridContent tfoot a[href]').click(function () {
history.replaceState({}, null, this.href);
return false;
});
i have a dropdownlist and a listbox both asp.net controls
i am trying to prevent the user add duplciate items to listbox control
i able to block it but i want to display DIV or Alert box saying,"duplciate names are not allowed"
protected void btn_AddRecipientAction_OnClick(object sender, EventArgs e)
{
if (Convert.ToInt32(this.ddlRecipient.SelectedValue) > 0)
{
if (ddlRecipient.Text.Length > 0)
{
//var items = new System.Collections.ArrayList(this.lstRecipient.Items);
for(var i = lstRecipient.Items.Count - 1; i >= 0; --i)
{
if (lstRecipient.Items[i].Text == ddlRecipient.SelectedItem.Text)
{
lstRecipient.Items.RemoveAt(i);
**//alert("duplicate entry not allowed")
//div display the message and disappears after few seconds?**
}
}
ListItem newList = new ListItem();
newList.Text = ddlRecipient.SelectedItem.Text;
newList.Value = ddlRecipient.SelectedValue;
this.lstRecipient.Items.Add(newList);
}
}
}
alert way:
You could use this line assuming you have a ScriptManager
ScriptManager.RegisterClientScriptBlock(this,this.GetType(),"alert","alert('duplicate entry not allowed');",true);
This, however still does a postback since the script is run when the page is loaded again after the click. A better solution is to validate in client using javascript before submitting the page.
What you want is actually two separate things.
You should be validating on in the code behind, checking for duplicates on the post back. Then, use some javascript to do the same check on the client.
You MUST check for duplicates on the server since the user may not have javascript turned on.
Wow! Please don't inject js in the page to alert the user. You should instead have a notification control that receive a dataset of messages like an array then display the messages to the user. You want to separate your concerns.
You can achieve that in js. At the server you can set the array in json in a hidden field and then at the document ready event in js read that json data, parse it and loop on the array and display you messages. If you must you can use alert to display them but you should avoid it since it's so 1990's.
But I would go beyond that. I you do all the processing and validation in javascript before it gets to the server. So you don't rely on a post back to execute your validation. So as soon as the user adds the item it's told that it's a duplicate. Then, once the list is filled by the user he could save with a ajax call or post the page and at the server you parse the list, validate it and save it. If you have to compare the list to one already persisted at the server you can do that there. SOme thing goes wrong? you add the message to the notification control.
Please think about it. Try using a framework like MVC to separate you concerns. I makes the hole thing much faster to develop and so easier to maintain.
To call some JS from the code behind you can use Page.ClientScript property and call the RegisterStartupScript() method
http://msdn.microsoft.com/en-us/library/asz8zsxy.aspx
I've got a strange problem concerning dynamically loaded controls in a asp.net application.
So there is a control where user have to select some items and/or do some text input (textboxes). The control depends on a single dropdown list element.
So user A chooses a certain value in this dropdownlist "controlselector" -> on of the many controls will be loaded. After that the user clicks on save and then it should save it to the database.
The problem is following that not every item is saved into the databse.
I create and recreate the control at every Page_Load, i've turned autopost back on the "controlselector" but the control is loading at the page_load event. When trying to save the elements are empty, but not every item :(
MyCustomControl:
FillElements(someParameter)
{
//fill some lists, dropdowns, checkboxes or whatever with some values from db
}
Foo Save()
{
//Save selected input(also some textboxes)
//and return an object
return foo;
}
Page:
Page_Load()
{
PlaceHolder.Clear();
//with Createpath the path to the control is created and loaded
PlaceHolder.Controls.Add(LoadControl(CreatePath(Selector.SelectedValue)));
//some methods are started to fill some lists in the control
((MyCustomControl)PlaceHolder.Controls[0]).FillElements(someParameter);
}
Save_Button_Click()
{
var myFoo = ((MyCustomControl)PlaceHolder.Controls[0]).Save();
myFoo.DoSomethingElse();
}
it seems that sometimes the page remembers values and sometimes not... ver strange everything
thanks
[EDIT]
The problem i see that, there is 2 time a dynamic fill action.
1.) deciding which and then loading the custom control
2.) filling the custom control with the parameters
Page_Load is too late in the life cycle to create dynamic controls, because state is restored to controls before the load event. This means you need to create your control earlier, or ASP.Net won't see it when it comes time to restore state. Try creating them in the Init event instead. Or, even better, try one of these options:
Create one custom control type that adapts itself as needed and have a normal instance of the control on the page.
Place all controls on the page but only set Visible to true for the one you care about.
You need to check for "IsPostBack" if it is you dont want to recreate those controls... its killing the values etc that you have in them.
try changing your code to something like this.
Page_Load()
{
if(IsPostBack == false){
PlaceHolder.Clear();
//with Createpath the path to the control is created and loaded
PlaceHolder.Controls.Add(LoadControl(CreatePath(Selector.SelectedValue)));
//some methods are started to fill some lists in the control
((MyCustomControl)PlaceHolder.Controls[0]).FillElements(someParameter);
}
}
thanks for your help, but the problem was on something totally different
the items which were loaded dynamically into the dropdowns which where also loaded dynamically, had some "\n" special character, but not every item
thats why not every item got lost just few
i don't know if i should/can mark this as answer, because the problem was on a other place
Here's my situation.
I have a button on my ASP.NET webform. This button creates a new browser window pointing to a page which has a lot of hidden fields (which are dynamically generated). This form submits itself to SQL Reporting Services on the bodies onload event. This works fine and the report is displayed in this new window.
However, now I want to still POST a form to SQL Reporting services but I want to get back an excel spreadsheet. So I add another hidden input with a name of rs:Format and value of Excel. This works and the user gets the option to download the excel file.
However they are now stuck with the extra window that was created. How do I get around this? I've tried creating the dynamic form and POST in the same window, but then they see the (empty) page with the form, and not the page they generated the report from. I've tried closing the window that I've created but I don't know where to put the javascript to do this. If I put it on the onload, then the window closes without the form being submitted.
Any ideas for what to do here?
Edit: What I was doing here wasn't the best way of getting the result I needed. I ended up using a WebRequest to get the excel report from Reporting Services instead posting a form, therefore I didn't need the second window afterall.
Don't close the browser. It belongs to the user, even if you opened it. Closing it can make them mad.
Do redirect to a page the communicates to the user that you're done with the window. There you can provide a (javascript-based) link that make closing the browser a little easier if you want, though closing a browser window is generally pretty easy.
By the way, if the popup doesn't contain any useful output, what you may want to do is submit your form into a small Iframe within the page. This way there's no need to close a window, as the frame can be made invisible.
When user wants an Excel file, there's no need to pop up another window. I assume selection of Excel file or HTML report is done in some HTML control like a radio button or a checkbox. So, before doing anything, check the value of that radiobutton/checkbox with javascript and do the appropriate action. Something like:
function getReport(excelFormat)
{
if (excelFormat)
document.form1.target = '_blank';
else
document.form1.target = '_self';
document.form1.submit();
}
What if the button did an Ajax request back to the original page and got the hidden field values. You could then construct another form on the page with the hidden fields using javascript and submit it -- with the download option. Since the request will return an application/ms-excel file, it shouldn't refresh the current page but the download should still occur. You'd need to make sure that the button click didn't cause a postback by returning false from the client-side function. Note that this only works if the post of the generated form results in a download, not a new html page.
<script type="text/javascript">
function submitReport( button ) {
PageMethod.SubmitReport(onSuccess,onFailure,{ control: button });
}
function onSuccess(values,ctx) {
var form = document.createElement('form');
form.action = reporting-services.url;
form.method = 'post';
document.body.appendChild(form);
.... add hidden fields to form from returned values
form.submit();
document.body.removeChild(form);
}
function onFailure(error,ctx) {
... pop up some error message....
}
</script>
...
<asp:Button runat="server" id="reportButton" ClientClick="submitReport(this);return false;" Text="Report" />
Generally it's ok to close any popup window that your app has created.
This can be done with window.close() (which will pop up a confirmation if the window was not created by script).
If you want to be sure that the download is successful before closing the window, you will need to perform some server-side magic - have your server keep track of the download in progress, and poll it via AJAX from the popup window until the download completes.
Once the server tells you it's done, the window can be closed.
I'm using jQuery and SimpleModal in an ASP.Net project to make some nice dialogs for a web app. Unfortunately, any buttons in a modal dialog can no longer execute their postbacks, which is not really acceptable.
There is one source I've found with a workaround, but for the life of me I can't get it to work, mostly because I am not fully understanding all of the necessary steps.
I also have a workaround, which is to replace the postbacks, but it's ugly and probably not the most reliable. I would really like to make the postbacks work again. Any ideas?
UPDATE: I should clarify, the postbacks are not working because the Javascript used to execute the post backs has broken in some way, so nothing happens at all when the button is clicked.
Both of you were on the right track. What I realized is that SimpleModal appends the dialog to the body, which is outside ASP.Net's <form>, which breaks the functionality, since it can't find the elements.
To fix it, I just modified the SimpleModal source to append eveything to 'form' instead of 'body'. When I create the dialog, I also use the persist: true option, to make sure the buttons stay through opening and closing.
Thanks everyone for the suggestions!
UPDATE: Version 1.3 adds an appendTo option in the configuration for specifying which element the modal dialog should be appended to. Here are the docs.
All standard ASP.NET postbacks work by calling a __doPostBack javascript method on the page. That function submits the form (ASP.NET only really likes one form per page) which includes some hidden input field in which all the viewstate and other goodness lives.
On the face of it I can't see anything in SimpalModal that would screw up your page's form or any of the standard hidden inputs, unless the contents of that modal happened to come from a HTTP GET to an ASP.NET page. That would result in two ASP.NET forms being rendered into one DOM and would would almost certainly screw up the __doPostBack function.
Have you considered using the ASP.NET AJAX ModalPopup control?
Web browsers will not POST any disabled or hidden form elements.
So what's happening is:
The user clicks on a button in your dialog.
The button calls SimpleModal's close() method, hiding the dialog and the button
The client POSTs the form (without the button's ID)
The ASP.NET framework can't figure out which button was clicked
Your server-side code doesn't get executed.
The solution is to do whatever you need to do on the client (closing the dialog in this case) and then call __doPostback() yourself.
For example (where "dlg" is the client-side SimpleModal dialog reference):
btn.OnClientClick = string.Format("{0}; dlg.close();",
ClientScript.GetPostBackEventReference(btn, null));
That should hide the dialog, submit the form, and call whatever server-side event you have for that button.
#Dan
All standard ASP.NET postbacks work by calling a __doPostBack javascript method on the page.
asp:Buttons do not call __doPostback() because HTML input controls already submit the form.
got caught out by this one - many thanks to tghw and all the other contributors on the appendto form instead of body fix. (resolved by attributes on the 1.3 version)
btw: If anyone needs to close the dialog programmatically from .net - you can use this type of syntax
private void CloseDialog()
{
string script = string.Format(#"closeDialog()");
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}
where the javascript of closedialog is like this....
function closeDialog() {
$.modal.close();
}
I have found the following works without modifying simplemodal.js:
function modalShow(dialog) {
// if the user clicks "Save" in dialog
dialog.data.find('#ButtonSave').click(function(ev) {
ev.preventDefault();
//Perfom validation
// close the dialog
$.modal.close();
//Fire the click event of the hidden button to cause a postback
dialog.data.find('#ButtonSaveTask').click();
});
dialog.data.find("#ButtonCancel").click(function(ev) {
ev.preventDefault();
$.modal.close();
});
}
So instead of using the buttons in the dialog to cause the postback you prevent their submit and then find a hidden button in the form and call its click event.
FWIW, I've updated the blog post you pointed to with come clarification, reposted here - the reasoning & other details are in the blog post:
The solution (as of my last checkin before lunch):
Override the dialog's onClose event, and do the following:
Call the dialog's default Close function
Set the dialog div's innerHTML to a single
Hijack __doPostBack, pointing it to a new function, newDoPostBack
From some comments I’ve seen on the web, point 1 needs some clarification. Unfortunately, I’m no longer with the same employer, and don’t have access to the code I used, but I’ll do what I can. First off, you need to override the dialog’s onClose function by defining a new function, and pointing your dialog to it, like this:
$('#myJQselector').modal({onClose: mynewClose});
Call the dialog's default Close function. In the function you define, you should first call the default functionality (a best practice for just about anything you override usually):
Set the dialog div's innerHTML to a single – This is not a required step, so skip it if you don’t understand this.
Hijack __doPostBack, pointing it to a new function, newDoPostBack
function myNewClose (dialog)
{
dialog.close();
__doPostBack = newDoPostBack;
}
Write the newDoPostBack function:
function newDoPostBack(eventTarget, eventArgument)
{
var theForm = document.forms[0];
if (!theForm)
{
theForm = document.aspnetForm;
}
if (!theForm.onsubmit || (theForm.onsubmit() != false))
{
document.getElementById("__EVENTTARGET").value = eventTarget;
document.getElementById("__EVENTARGUMENT").value = eventArgument;
theForm.submit();
}
}
The new Jquery.simplemodal-1.3.js has an option called appendTo. So add an option called appendTo:'form' because the default is appendTo:'body' which doesn't work in asp.net.
Had the same problem, but {appendTo:'form'} caused the modal popup to be rendered completely wrong (as though I had a CSS issue).
Turns out the template I'm building on top of has includes that put other forms on the page. Once I set {appendTo:'#aspnetForm'} (the default Asp.net form ID), everything worked great (including the postback).
In addition to tghw's answer, this excellent blog post helped me: jQuery: Fix your postbacks in Modal forms -- specifically BtnMike's comment: "You also must not have CssClass=”simplemodal-close” set on your asp:button." Taking that off the class was the not-obvious-to-me solution.
-John
if you don want modify the SimpleModal source.
try this..
After you call the modal() method add this:
$("#simplemodal-overlay").appendTo('form');
$("#simplemodal-container").appendTo('form');
the SimpleModal plugin add two this to your markup.
'simplemodal-overlay' for the background
'simplemodal-container' containig the div that you whant as pop up modal.