So, I've been chasing this for a few days and I think I misdiagnosed the problem. I have an ASPX page with a few buttons and placeholders whose visibility changes based on queries. Everything works fine. But then I added a textbox with datetime from the server, inside an asp panel. The content within the panel works fine, and I've tried several scenarios.
Regardless of how I do it, I find that my buttons, which are outside of this panel, aren't working... I'm not getting to the click event at all. I've come to the conclusion that the partial postback is breaking the connections to my button clicks. Does this sound like a valid explanation and what can I do about it?
Edit to add, here's what I tried after your suggestion:
<script type="text/javascript">
$(document).ready(function () {
bindMyButtons();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
bindMyButtons();
});
function bindMyButtons() {
$('CloseNoticeButton').click(function () {
'CloseNoticeButton_Click()'
});
$('#InBtn').click(function () {
'InBtn_Click'
});
$('#OutBtn').click(function () {
'OutBtn_Click'
});
$('.MyClass').each(function () {
//do stuff to the MyClass class
});
}
SOLVED! The suggestion to run it in F12 gave me the answer! I had to add:
EnableEventValidation="false" to my page. Not entirely sure why but... it seems to work.
You need to rebind the listeners as the DOM is changed due to Partial PostBack. So make sure you rebind controls after a Partial PostBack.
<script type="text/javascript">
$(document).ready(function () {
bindMyButtons();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
bindMyButtons();
});
function bindMyButtons() {
$('#myButton').click(function () {
//hanldle button click
});
$('.MyClass').each(function () {
//do stuff to the MyClass class
});
}
</script>
Running it in F12 gave me the answer... many thanks to #VDWWD! I had to add "EnableEventValidation="false" to may page. Not sure why but it solved the problem... knock on wood!
Related
I have a page containing a jQuery ui tab control. That is working just fine.
The issue I have is saving the selected tab between PostBacks occuring from a DropDownList, without (offcourse) disabling those PostBacks.
I have following code on my aspx page and I receive no Javascript errors whatsoever:
<script>
var selected_tab = 1;
$(document).ready(function () {
var tabs = $("#rapportentabs").tabs({
activate: function (e, i) {
selected_tab = i.index;
}
});
selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
tabs.tabs("option", "active", selected_tab);
$("form").submit(function () {
$("[id$=selected_tab]").val(selected_tab);
});
});
</script>
<div id="rapportentabs">//containing the tabs itself</Div>
<asp:HiddenField ID="selected_tab" runat="server" />
I have following in my code behind:
protected void Page_Load(object sender, EventArgs e)
{
selected_tab.Value = Request.Form[selected_tab.UniqueID];
}
I've finally found a solution which seems to work perfectly
Just change the javascript part using direct reference to objects and use i.newTab.index() instead of i.index
The correct script should read as:
<script>
var selected_tab = 1;
$(document).ready(function () {
var tabs = $("#rapportentabs").tabs({
activate: function (e, i) {
selected_tab = i.newTab.index();
$("#selected_tab").val(selected_tab);
}
});
selected_tab = $("#selected_tab").val() != "" ? parseInt($("#selected_tab").val()) : 0;
tabs.tabs("option", "active", selected_tab);
$("form").submit(function () {
$("#selected_tab").val(selected_tab);
});
});
</script>
One option is to save the selected_tab in a localstorage and then restore it when the page loads - this will have a side affect of saving the selected tab not only when you post but also when you close the tab and reopen it.
Another option, much better IMHO, is to post the form with Ajax and this way you will not get a page refreshed at all - but this will mean you have to update whatever page changes, which may be lots of work if you have lots of server side rendering code.
I have this script on a page
<script type="text/javascript">
$(document).ready(function () {
var btnApplyVoucher = document.getElementById('LbtnApplyVoucher');
var voucher = document.getElementById('TxtVoucher');
$("input.voucherCode").bind('keyup paste', function () {
btnApplyVoucher.setAttribute("class", "displayBlack");
});
$("input.voucherCode").bind('blur', function () {
if (voucher.value == '') {
btnApplyVoucher.removeAttribute("class", "displayBlack");
}
});
});
</script>
and I have this textbox which is being manipulated by the above jquery
<asp:UpdatePanel ID="UpdBasket" runat="server">
...
<asp:TextBox ID="TxtVoucher" Text="" runat="server" CssClass="voucherCode" ClientIDMode="Static"/>
...
<asp:LinkButton ID="LbtnUpdateBasket" runat="server" Text="Update Basket" OnClick="LbtnUpdateBasket_Click"/></div>
...
</asp:UpdatePanel>
My problem is when LbtnUpdateBasket is clicked and the update panel updates my jquery stops functioning?! I am not sure what I can do here and nothing I can find on the web is really that helpful to me? I believe my problem is something to do with the .ready() which is running when the page loads but ofcourse this wont run on the update as the whole page doest load, what can i do here?
You need to also fire the jQuery when the update panel updates, as well as when the page loads.
For Example:
<script type="text/javascript">
//Get page request manager
var prm = Sys.WebForms.PageRequestManager.getInstance();
//Add handler for end request (update panel, end update)
prm.add_endRequest(configurePage);
$(document).ready(configurePage);
function configurePage() {
var btnApplyVoucher = document.getElementById('LbtnApplyVoucher');
var voucher = document.getElementById('TxtVoucher');
$("input.voucherCode").bind('keyup paste', function () {
btnApplyVoucher.setAttribute("class", "displayBlack");
});
$("input.voucherCode").bind('blur', function () {
if (voucher.value == '') {
btnApplyVoucher.removeAttribute("class", "displayBlack");
}
});
}
</script>
When you click a button the AJAX request is sent, and then the entire HTML content of the UpdatePanel is re-created based on the results of that request. All of the changes that your JQuery code made will then need to be re-applied. You'll need to ensure that the appropriate code to re-apply those JQuery bindings is run within whatever your link button's click handler is fired.
Currenly i am working on asp.net c# project.
I use select2 in update panel.
My button Click is not working after Postback.
I use this Code to rebind this JQuery Plugin in update panel.
<script type="text/javascript">
var frm = document.getElementById("aspnetForm");
if (frm) {
frm.onsubmit = function () { return false; };
}
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined) {
bind();
}
}
function bind() {
$(document).ready(function () {
$(".chzn-select").select2();
$(".option-listing").select2();
});
}
</script>
After postback button click is not working only in IE9. No Console Error..
In other browser work properly.
If i Comment this Bind() function my button is work properly.
You can check here if your jquery framework is compatible with ie9
http://msdn.microsoft.com/en-us/library/ie/hh180175%28v=vs.85%29.aspx
I have a FB login button and want to bind it to a function but I can't seem to get it work:
<div class="fb-login-button" id="auth-loginlink"></div>
This is the line that I am trying to bind it to my fb-login-button
$("#auth-loginlink").click(function () { grantPermission(); });
<script type="text/javascript">
function grantPermission() {
window.FB.login(function (response) {
// ... login stuffs
}
</script>
It will work if I use a normal hyper link like:
Login
Please kindly advice what am I doing wrong. Thanks.
If it's really a button might as well use the button tag:
<button class="fb-login-button" id="auth-loginlink">Login</button>
Put your javascript inside the script tag, and return false in the handler:
<script type="text/javascript">
$("#auth-loginlink").click(function () { grantPermission(); return false; });
function grantPermission() {
window.FB.login(function (response) {
// ... login stuffs
}
</script>
... also might be a good idea to do $("#auth-loginlink").button() but not totally necessary.
Note: If your html is actually below your javascript code the above will not always work.
I am using updatepanel in asp.net web form with .net framework 4.0. In between, I implemented jquery form validation. It's working well with the form validation but the problem occurred with the update panel cannot do partial postback but fully postback. Appreciate for any reply.
I have something like this, do validation on form and do show some image when update panel initialize request.
<script type="text/javascript">
$(document).ready(function () {
$(".logForm").validate();
$('#main_UpdatePanelAccount').initializeRequest(function (options) {
$("#flashAcc").show();
$("#flashAcc").fadeIn(400).html('<img src="/image/load.gif" align="absmiddle">');
});
});
</script>
After this, I have this 2 blocks of code (one with commented and another with uncommented) to determine whether postback or not. However this 2 blocks of code also end with the update panel fully postback.
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(instance_initializeRequest);
function instance_initializeRequest(sender, args) {
if (!Validator()) {
args.set_cancel(true);
}
}
// $(function () {
// Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
// //Re-initialize jquery after an auto post back.
// function EndRequestHandler(sender, args) {
// //Do work after update panel fires.
// var prm = Sys.WebForms.PageRequestManager.getInstance();
// if (!Validate()) {
// prm.abortPostBack();
// args.set_cancel(true);
// }
// else {
// prm.add_beginRequest();
// args.set_cancel(false);
// }
// }
// });
</script>
Firstly if your code is inside the updatepanel, it's going to get wiped out on postback. Unrelated to your question but just a side note. Secondly unless you set updatepanel to updatemode="conditional", it will also update all content in other update panels as well. If you are still getting a full page refresh, I would try doing it this way instead:
<script type="text/javascript">
<!--
function Post() {
__doPostBack('<%= UpdatePanel1.ClientID %>', '');
}
-->
</script>