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.
Related
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!
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 would like to show the modal window (executed in the JavaScript function below) on page load:
<script type="text/javascript">
$(function () {
$('.popup-wrapper').modalPopLite({
openButton: '.clicker',
closeButton: '#close-btn',
isModal: true
});
});
</script>
<asp:HyperLink ID="clic" Text="ck" runat="server" CssClass="clicker" NavigateUrl="#">
</asp:HyperLink>
<asp:Panel ID="cli" runat="server" CssClass="popup-wrapper" Width="500" Height="500" >
Close
</asp:Panel>
How do I do this in asp.net?
If you want it to show up on every page load, you can use JQuery .ready() function on the document object, which will execute this script when the DOM fully loads. Otherwise, what might be happening is you're executing the function before $('.popup-wrapper').modalPopLite() or whatever is initialized and getting a JavaScript error.
So you'd do this instead:
$(document).ready(function () {
$('.popup-wrapper').modalPopLite({
openButton: '.clicker',
closeButton: '#close-btn',
isModal: true
});
});
Now, if you want to only display this on the first page load, and not on any further postbacks, you'll need to tap into C# codebehind:
public partial class SomePage : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// The # character denotes a string literal; just makes it easy to
// use multiple lines in this case and keep the inline javascript
// code looking nicely formatted within C#
ClientScript.RegisterStartupScript(this.GetType(), "PopModal", #"
$(document).ready(function () {
$('.popup-wrapper').modalPopLite({
openButton: '.clicker',
closeButton: '#close-btn',
isModal: true
});
});"
);
}
}
}
I have the following textbox
<asp:TextBox ID="typeSearch" runat="server"/>
Also, I have the following javascript code within my head
<script type="text/javascript">
$(document).ready(function () {
$("#<%=typeSearch.ClientID%>").autocomplete('Handler1.ashx');
});
</script>
In Handler1.ashx, I have the code to retrieve from a database all the related values depending on what the user writes within the TextBox "typeSearch".
What I want to achieve is when the user clicks within the textbox to view all the values. How can I achieve that combined with my handler ?
Hope this code help you!
$("#<%=typeSearch.ClientID%>").keyup(function() {
var textValue = $(this).val();
Search(textValue);
});
function Search(keyword){
//call ajax for result search here
.....
}
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>