I have one problem with RadGrid and Jquery.
I have a Telerik RadGrid which contains 2 imagebuttons. When I click on imagebuttons, these buttons should call the jquery functions. I'm not getting how to implement this.
This is my jQuery function:
$(function () {
$("#Link1").click(function(evt) {
evt.preventDefault();
$('#panelText').slideToggle('slow');
});
});
You'll have to do something like
$(function () {
$("#" + <%= Link1.ClientID %>).click(function(evt) {
evt.preventDefault();
$('#' + <%= panelText.ClientID %>).slideToggle('slow');
});
});
Once the controls are rendered on the page, they get assigned unique ClientID's which you don't have direct access to in your JS -- but you can use this method to inject the correct ClientID by grabbing it from the server.
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 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 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.
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>
I have an ASP.Net user control that contains some checkboxes, and I want to use JQuery to raise an event from the user control when one of the checkboxes is clicked. Here is the JQuery code in the user control where I'm trying to raise the event:
$(document).ready(function() {
$(':checkbox').click(function(){
$('#hfRemainingInstalls').trigger('CheckBoxClicked');
});
});
and here is the JQuery code in the containing aspx page where I'm trying to subscribe to the event:
$(document).ready(function() {
$("p").bind('CheckBoxClicked', function(e) {
alert("checkbox clicked");
});
});
I'm never seeing my alert when I click on one of the checkboxes. Anyone know what might be the problem here?
I am sure you have an ID problem. ASP.NET controls that reside inside of container elements such as UserControls and MasterPages, when rendered, have some junk prefixed to the id attribute to ensure uniqueness. It is usually something like "ctl01_01_YourID" That said, you should probably be using the jQuery endsWith selector...
$('input[id$=hfRemainingInstalls]').trigger('CheckBoxClicked');
The following will alert "true" if the element is found...
alert($('#hfRemainingInstalls').length > 0);
so is there a relationship between the Id tags P and Id hfRemainingInstalls
1: Solution
$(':checkbox').click(function(){
$("p").trigger('CheckBoxClicked');
});
$(document).ready(function() {
$("p").bind('CheckBoxClicked', function(e) {
alert("checkbox clicked");
});
});
2: Solution
$(':checkbox').click(function(){
$("#hfRemainingInstalls").trigger('CheckBoxClicked');
});
$(document).ready(function() {
$("#hfRemainingInstalls").bind('CheckBoxClicked', function(e) {
alert("checkbox clicked");
});
});