ASP.Net ScriptManager and UpdatePanel ignoring javascript once posted back - javascript

I am having major issues using UpdatePanels on a website. The problem is that when i use a ScriptManager, all client side JavaScript that was active when the page was originally loaded is lost once an update panel posts back.
Here's what i'm trying to do...
I have a number of .net calender controls on the same page each within its own update panel. The calendars are initially hidden, until you click within an associated text box (also within the update panel), at that point the calender pops up so you can select a date. They calendars work great untill you actually change the date (post back), after which the calenders no longer pop up when you click within the text boxes, the "onfocus" JavaScript is lost.
After looking on google for what seems like hours, I can get things semi-working by dynamically adding an "onfocus" attribute to the TextBox and registering start up script with the ScriptManager when the calendar posts back.
Example:
TextBox1.Attributes.Add("onfocus", "document.getElementById('searchArrivalDateCalendarDiv').style.display = 'block';")
ScriptManager.RegisterStartupScript(Page, GetType(Page), "StopTxtClick", "$(document).ready(function(){$('.txtArrivalDate').click(function(event){event.stopPropagation(); $('div.searchArrivalDateCalendarDiv').show(); });});", True)
This seems really impractical, especially when I introduce a master page. I'm going to end up having to re-register a hell of a lot of start up script.
There must be an easier way?

It looks like you want to use event delegation. The main idea is that events bubble up and so you would attach your event handler outside of the update panel (perhaps to a div or table that the updatepanel resides in). This handler is in charge of all events it receives so even when your update panel posts back and a new textbox is rendered, you won't need to reattach the event handler. When the new textbox raises its event your existing event handler can try to handle it.
The following is just one way of doing event delegation in javascript (using jquery and taken from http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery)
jQuery.delegate = function() {
return function(e) {
var target = $(e.target);
if (target.attr("showCalendar")) {
var calendar = $("#" + target.attr("showCalendar"));
calendar.css("display", "block");
}
}
}
$(document).ready(function()
{
$('#test').click($.delegate());
});
<form id="form1" runat="server">
<asp:ScriptManager runat="server" EnablePartialRendering="true"/>
<div id="test" style="width:100%;">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<input type="text" id="testText" showCalendar="testCalendarDiv" />
<div id="testCalendarDiv" style="display:none;">
<asp:Calendar runat="server" ID="testCalendar1"/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
In this simple example I register the delegate method on click of this div (the textbox and calendar are inside of this div). When you click the textbox the click event bubbles up to the div. The delegate method gets called and I check for the showCalendar attribute from the element who raised the event. If this attribute exists I find the element this attribute points to and update its display style. This is a pretty simple example but you could easily extend the delegate method to take in functions it will call based on some kind of rules you register.

The problem is that an UpdatePanel refresh completely wipes out the DOM within its div element(s). The easiest way to fix that is to use the live() functionality where possible, e.g.:
$(document).ready(function () {
$('.txtArrivalDate').live('click', function (event) {
event.stopPropagation();
$('div.searchArrivalDateCalendarDiv').show();
});
});

Thanks for the answers.
I still did not manage to solve this problem. However, i have found an alternate solution for the calendar pop up.
I am now using the CalendarExtender control which is part of the ASP.Net AJAX Control Toolkit. It is a much better solution for what I need. The calendar as a whole is much smoother and neater and I no longer need to use the update panel. It also supports multiple cultures without any extra coding which is great.
Cheers.

Related

jQuery $(element) undefined whilst executing .click() method - returns element at all other times

Have a really strange issue that a colleague was facing which I managed to work around, but for the life of me cannot understand why his initial code did not work! - we have a legacy asp.net web application that is using MasterPages/Content controls and has jQuery mixed all over the web application providing some client interactivity.
Essentially there is a web form view that has a div containing a button which is initially hidden (display: none), upon clicking another menu item, this div is shown using jQuery BLOCKUI Plugin, blocking the rest of the UI and rendering the popup div into place - the user can then click the button, clicking the button should hide the containing div, and show another div that contains another two buttons - all should be simple.... but this is where it got funky:
Bear in mind none of this content is dynamically generated, all HTML elements are present within the .aspx view up front after the page is finished loading.
var blockUiRenderFrame = function (html, width, height) {
window.parent.$.blockUI({
message: html,
css: {
top: ($(window.parent).height() - height) / 2 + 'px',
left: ($(window.parent).width() - width) / 2 + 'px',
width: width
}
});
};
<div id="anotherContentFrame">
<p>some text</p>
</div>
<div id="contentFrame" style="display:none;">
<div id="myButtonContainingDiv">
<button id="aButton" />
</div>
<div id="myOtherButtonsContainingDiv"></div>
</div>
$(document).ready(function() {
$("#myButton").click(function() {
$("#myButtonContainingDiv").hide();
$("#myOtherButtonsContainingDiv").show();
});
});
<!-- A Button on the page calls this code -->
blockUiRenderFrame($("#contentFrame"), 200, 200);
What I observed occurring was what appears to be a complete loss of context, or executing the event under a different context all together... during the handling of the click event, the div elements, or indeed anything within the HTML div contentFrame all return undefined.
At any other time if I use the console/debugger, I can successfully return an element using say $("#myButtonContainingDiv").
The click event has its correct event element, I can use $(this) to get the button I clicked on, but even trying to select $("#myButton") within the actual click event handler code itself returns 'undefined'.
I can access $("anotherContentFrame") perfectly fine, at any time, including during the handling of the click event of #myButton.
The workaround I had to use in order to get this code to work was:
During the click event handler, use the following:
$(this).closest('div').hide()
$(this).closest('div').next().show()
As this was the only way I could get any reference to the DOM elements on the page to successfully hide/show them.
I can try to give out some more information if anyone wishes, I am not sure if anyone has ever seen an issue like this.
Thanks in advance!
Where's the code showing your button?
When you call $(element).click() it will try to bind to your element on the DOM that is already loaded (no async elements!). If you're loading the #myButton via a async call, you need to bind the click on a parent element and then filter the function call to your #myButton like this:
$(document).on('click', '#myButton', function(){});
This way you're sure that the element (in this case, document) existing when jQuery tries to bind the click event and it will only fire it when clicking on the filter you specified as the 2nd parameter to the .on() call, in this case, your #myButton element
Your event is not firing because jQuery doesn't know the element, because its state changed dynamically. In order to be sure to fire your click event, no matter the context, you can use
$(document).on('click', '#myElement', function(){});
By doing that, you are refering to the easiest "non dynamically generated" element, and jQuery will always be able to find your element.
You can then access your element properties with :
$(this)

jQuery Mobile button click event not working

I'm new to JQuery Mobile so excuse me for this probably easy question.
I have a button:
<a id="btnSort" href=# data-role="button"
runat="server" onclick="Click_btnSort">Sort</a>
and code-behind event handler:
protected void Click_btnSort(object sender, EventArgs e)
{
...
}
I've got a breakpoint at the beginning of this method, however it does not fire when I click on the button.
PS. I'm not using any field validators.
Any suggestions?
The reason your event is nog firing is because you use a html a-element, that element does not trigger a postback (maybe it does when you set the elements autopostback proerty to true, not sure if this works for a-elements).
When you want to use the ASP.NET button click event in code behind (to do server side stuff when clicking), you probably better use a ASP:Button or LinkButton element, which works out of the box.
When you want to use a client side click event (for example with jQuery, to do client side stuff when clicking), you probably better add an event listener to the element like this:
$(document).on('click', '#btnSort', function () {
// client side stuff here
});
EDIT:
See this for basic client side event binding with jQuery. If this does not look familiar, please read about JavaScript / jQuery basics, it will be worth the time
http://jsfiddle.net/6mYQN/1/
As <a> tag is not related to serverside controls so I suppose that can't happen like that way.
your code even with run at server is still will look for the Click_btnSort in javascript function no the one in code behind so you should add a function in script/javascript tag with the name you will call in onclick event.
Although this is an old post what you can do is create a
<asp:Button ID="btnServerSort" style="display:none;" runat="server" Text="SORT" OnCommand="Click_btnServerSort" ..>
with an associated server side event.
Then modify the code as follow
<a id="btnSort" href=# data-role="button" data-ajax="false" runat="server" onserverclick="Click_btnServerSort" >Sort</a>
I hope this helps.

Ajax loads new button, do I need to load a new selector?

Let's say that I'm coding a message system for example. Users can add messages (via AJAX) and next to their messages they've got some buttons. (Edit, Remove, ...)
By loading the page, a few messages are loaded.
<div class="message">
<p>blaat</p>
Remove
</div>
<div class="message">
<p>blaat</p>
Remove
</div>
The jQuery selector knows these elements. Because they already exist when I execute the jQuery script. (document.ready)
But when I add another "message", jQuery can't handle the 'remove' link because it's loaded after running the jQuery script.
Can somebody help me out? Thanks in advance!
You can use the live method instead of bind (or the shorthand click). So it'd look like:
$('.btnRemove').live('click', function(e) { ... });
This uses event delegation, with the click event handler attached to document rather than any particular element.
You can use jQuery Live method to work on remove which is loaded using ajax.
can you post the JavaScript code with this example? off the top of my head I know the $().live function in jQuery would probably be a good fit for your needs as it will handle the buttons when they are added to the DOM... For example:
$('.btnRemove').live('click', function(e) { ... });

ASP.NET: Programmatically fire a server-side event in window.opener with JavaScript

I have a DropDownList that fires off some server-side databinding in its OnSelectedIndexChanged event.
<asp:DropDownList ID="ddlGroup" runat="server"
AutoPostBack="True" OnSelectedIndexChanged="SelectGroup" />
Elsewhere in the page, some JavaScript opens a popup. When the popup is filled out and submitted, I want to use JavaScript to fire that OnSelectedIndexChanged event in the opener page. I found some other code that does something similar:
if (window.opener != null ) {
var cf = window.opener.document.forms['aspnetForm'];
if (!cf) {
cf = window.opener.document.aspnetForm;
}
cf.__EVENTTARGET.value = "prAdded";
cf.__EVENTARGUMENT.value = "winClosed";
cf.submit();
}
I think this is what I'm looking for, but I'm not sure what should go in the EVENTTARGET and EVENTARGUMENT parts, or even if I need those at all. I want to specifically fire the OnSelectedIndexChanged event handler for ddlGroup. Is this possible/practical?
Secondary question: Can I make the parent page refresh AFTER I run server-side code in the popup?
Eh, you could do it that way, but I'd just use __doPostback() instead. That sets __EVENTTARGET and __EVENTARGUMENT to the two parameters, and assuming your first parameter is the UniqueID of an UpdatePanel, causes just that UpdatePanel to refresh.
So either you can set things up so refreshing the updatepanel does what you want to happen, or you can check those values on postback -- Request.Form["__EVENTTARGET"] ... and go from there.

Locating an element in a 'Facebox' box

Heres my link:
http://tinyurl.com/6j727e
If you click on the link in test.php, it opens in a modal box which is using the jquery 'facebox' script.
I'm trying to act upon a click event in this box, and if you view source of test.php you'll see where I'm trying to loacte the link within the modal box.
$('#facebox .hero-link').click(alert('click!'));
However, it doesn't detect a click and oddly enough the click event runs when the page loads.
The close button DOES however have a click event built in that closes the box, and I suspect my home-grown click event is being prevented somehow, but I can't figure it out.
Can anyone help? Typically its the very last part of a project and its holding me up, as is always the way ;)
First, the reason you're getting the alert on document load is because the #click method takes a function as an argument. Instead, you passed it the return value of alert, which immediately shows the alert dialog and returns null.
The reason the event binding isn't working is because at the time of document load, #facebox .hero-link does not yet exist. I think you have two options that will help you fix this.
Option 1) Bind the click event only after the facebox is revealed. Something like:
$(document).bind('reveal.facebox', function() {
$('#facebox .hero-link').click(function() { alert('click!'); });
});
Option 2) Look into using the jQuery Live Query Plugin
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
jQuery Live Query will automatically bind the click event when it recognizes that Facebox modified the DOM. You should then only need to write this:
$('#facebox .hero-link').click(function() { alert('click!'); });
Alternatively use event delegation
This basically hooks events to containers rather than every element and queries the event.target in the container event.
It has multiple benefits in that you reduce the code noise (no need to rebind) it also is easier on browser memory (less events bound in the dom)
Quick example here
jQuery plugin for easy event delegation
P.S event delegation is pencilled to be in the next release (1.3) coming very soon.

Categories

Resources