i have an updatepanel in my asp.net web page. I want to trigger the updatepanel within a javascript function insead of triggering with a button.
In order to do that, i used __doPostBack('myUpdatePanel', ''); function. But i think it causes the whole page postback. My document.ready function is also executed when i call this function. I may be missing some points.
Is there any other way to trigger updatepanel within a javascript function?
I think if you put a hidden button inside the update panel and you can use the javascript to fire the click of this button, it will do what you want.
<script type="text/javascript">
function Update_UpdatePaanel() {
document.getElementById('<%= YourButton.ClientID %>').click()
}
</script>
The button MUST be inside a hidden div and DON'T set visibile="false" because if you set it to false, the control will not render and the javascript will produce errors.
<div style="display:none">
<asp:Button ID="YourButton" runat="server" />
</div>
Just create a javascript function and execute the generated postback event:
<%=ClientScript.GetPostBackEventReference(myUpdatePanel, "")%>
The above statement is put on your aspx page, and it references the exact same code generated from the server to cause a postback for your panel. You can use it by putting it inside a function on the client side:
function fncUpdatePanel () {
<%=ClientScript.GetPostBackEventReference(myUpdatePanel, "")%>;
}
Then you can attach that function to any event on your page (even a mouseover event). This example uses a server side to attach the event:
myUpdatePanel.attributes('onmouseover', 'fncUpdatePanel()')
Related
I have a html code:
<a title="intro">INTRO?</a>
I need to link a jQuery click event on the tag. Using the solution given here I wrote the following javascript:
jQuery("a[title='intro']").click(alert("abc"));
However the page is alerting ("abc") on page load rather than on clicking the tag. Also to inform that the above code is NOT inside the load function jQuery(function() {... } and is a separate function.
Any solutions pls?
You are invoking the alert function during the event registration and is passing the value returned by the alert as the click callback handler.
Instead you need to pass a function reference as the click callback and within the function you can add the alert call
jQuery("a[title='intro']").click(function(){
alert("a")
});
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.
I have an asp.net page that contains a gridview within an update panel. On this Gridview there is a number of Textboxes. One of these textboxes causes a postback when it loses focus (textChanged event) and the updatepanel does a postback. I want this textboxes only to do a postback if there are 20 characters in it when it loses focus. I have written a javascript function to do this but I still have a problem. When I do the postback the whole page reloads, not only the update panel. I had something like the below function, can anyone explain how I can get it to only postback the update panel:
<script language='Javascript'>
function CheckPostback(var textbox)
{
if(textbox.value.length() == 20)
{
__doPostBack(textbox.Id, '');
}
}
</script>
Calling __doPostBack with the Id of the UpdatePanel you want to do the partial postback on should be a better bet. See Easily refresh an updatepanel using javascript for more information.
This question ASP.NET: Manually updating an UpdatePanel using jQuery should be useful as well.
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.
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.