Onclick event using jQuery Autocomplete combined with a handler - c#

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
.....
}

Related

To update a text box on onother textbox keypress MVC 4

I am new to MVC and I have 2 text boxes,On 1 text box I need to type the numbers based on the number it should get the data from a lookup table(where MyAge is the lookup table) based on the number that I enter in one text box
#foreach (var pa in Model[i].MyAgeTable)
{
if (TextboxAge.trim() == pa.Trim())
{
....
}
}
You can use jQuery to do this. For using jQuery you need to add the following in your head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and then the following code will do what you want:
<script type="text/javascript" >
$(document).ready(function (){
$("#textBox1").keypress(updateTextBox2());
function updateTextBox2() {
// code to get update another textbox
}
});
</script>
Documentation for .keypress()
There are different ways of writing the code to get the data from look up table. For instance you can make an ajax request to the server.
Documentation for jQuery.ajax()

Update panel prevents jquery from working?

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.

How to set Textbox's Text as an querystring argument for LinkButton without having codebhind file?

I am having a user control file without its codebehind file in dotnentnuke.
In which i have put a form in which i have one textbox and one Linkbutton.
I want to pass that textbox's value when i press the button as querystring to access it in another page.
For that i have written following code but it does not work.
<asp:TextBox ID="txtemail" runat="server" class="txtbox" placeholder="Enter Email Here"></asp:TextBox>
<asp:LinkButton ID="LinkButton1" class="lbsubscrb" runat="server"
PostBackUrl="~/Portals/_default/Skins/Gravity/Dummy.aspx?add=<% txtemail.Text %>"
ForeColor="White">SUBSCRIBE</asp:LinkButton>
All answers are appreciated...
It sounds like you really just need your own custom module, instead of trying to take an existing module, without the source code, and make it do something completely different?
That being said, if you really want to take that existing module and make it do that, jQuery is likely going to be your method of choice.
Basically you wan to hijack the click event for the button and send it elsewhere, something along the lines of the following code. I actually wrote most of this last night for another module I was working on (newsletter subscriptions, by the way) but have removed some of my logic to make it simpler for what you are trying to do
EDIT: replaced the txtbox class below to match your textbox's class
<script language="javascript" type="text/javascript">
/*globals jQuery, window, Sys */
(function ($, Sys) {
$(document).ready(function () {
var originalHref = $('.lbsubscrb a').attr('href');
$('.lbsubscrb a').removeAttr("href");
$('.txtbox').focus(function () {
if($('.txtbox').val().indexOf('#')<1)
$('.txtbox').val('');
});
$('.txtbox').bind("keypress", function (e) {
if (e.keyCode == 13) {
$('.lbsubscrb a').click();
}
});
$('.lbsubscrb a').click(function () {
//check if they hit enter in the textbox and submit the form
if (validateEmail($('.txtbox').val())) {
//
//TODO: Add your jquery for the redirect call here.
//
//uncomment this line to actually use the original submit functionality
//eval(originalHref.replace('javascript:', ''));
//if postback is wanted uncomment next line
//$('.lbsubscrb a').removeAttr("href");
} else {
alert('something wrong with your email');
}
});
});
}(jQuery, window.Sys));
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
</script>

Calling a jquery function in telerik radgrid image button

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.

JQuery custom event in ASP.Net User Control

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");
});
});

Categories

Resources