We Keep Coding

Send selectedText from AutocompleteTextView Automatically - Jquery / Asp.net

I searched a lot.
So I created an autocomplete jquery for cityTextBox and get the selectedItem from this autocomplete textbox. I split selectedItem with "|" and assign to string[] lines after user select it from autocomplete view. On my code I assign lines like below( lines[0] to cityTextBox and lines[1] to postCodeTextBox);
$('#postCodeTextBox').text = $("#<%=postCodeTextBox.ClientID%>").val(lines[1].trim());
$('#cityTextBox').text = $("#<%=cityTextBox.ClientID%>").val(lines[0].trim());
});
This all works fine after my select when I click to somewhere or focus ect(events that i define in $("#cityTextBox").bind()). this happens. But I just want to send the lines[0] and lines[1] to the text boxes automatically when I select from the autocomplete list without click etc. You can see my java script code below:
$(function () {
$("#cityTextBox").autocomplete({
source: function (request, response) {
var param = { cityName: $('#cityTextBox').val() };
$.ajax({
url: "Default.aspx/GetCities",
data: JSON.stringify(param),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item
}
}))
},
//error: function (XMLHttpRequest, textStatus, errorThrown) {
// alert(textStatus);
//}
});
},
select: function (event, ui) {
if (ui.item) {
var parameter = { selectedItem: ui.item.value }
function process() {
entered = $('#cityTextBox').val();
lines = entered.split("|");
$(function getLines () {
$('#postCodeTextBox').text = $("#<%=postCodeTextBox.ClientID%>").val(lines[1].trim());
$('#cityTextBox').text = $("#<%=cityTextBox.ClientID%>").val(lines[0].trim());
});
}
}
$(document).ready(function () {
//$("#cityTextBox").bind('mouseout', process);
$("#cityTextBox").bind('blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup errorscroll errorkeydown ', process);
});
},
minLength: 3
});
});
I get the data from ESD table in database. And the query work properly. Here is the html code part :
<table style="margin:50px; padding:10px">
<tr>
<td colspan="2">
<asp:Label ID="countryLabel" runat="server" Text="Ülke : "></asp:Label>
</td>
<td colspan="2">
<div>
<asp:DropDownList ID="countryDropDownList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="countryDropDownList_SelectedIndexChanged" TabIndex="-1">
</asp:DropDownList>
</div>
</td>
</tr>
<tr>
<td colspan="3" >
<asp:Label ID="postCodeLabel" runat="server" Text="Posta Kodu :"></asp:Label></td>
<td colspan="3">
<asp:TextBox ID="postCodeTextBox" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Label ID="cityLabel" runat="server" Text="Şehir : "></asp:Label>
</td>
<td colspan="3">
<asp:TextBox ID="cityTextBox" runat="server"></asp:TextBox>
</td>
</tr>
</table>

ASP.NET textbox doesn't lose focus

I have a asp.net web application. In my .aspx page I have a small jQuery dialog with two textboxes for which I am using a datepicker. How can I remove the focus of them when the dialog pops up. I've tried so many solutions posted on the internet and still they continue to be focused, therefore the datepicker shows and hides my whole dialog.
Here is the code I have for popping the dialog:
<script type="text/javascript">
var dialogOpts = {
resizable: false,
bgiframe: true,
maxWidth: 330,
maxHeight: 315,
width: 330,
height: 315,
autoOpen: false
};
$('#borrow_dialog_form').dialog(dialogOpts).parent().appendTo($("#form1"));;
$(function () {
$("#borrow_dialog_form").dialog({
});
$("#Button1").click(function () {
$("#borrow_dialog_form").dialog("open");
return false;
});
});
</script>
And here is the aspx:
<div id="borrow_dialog_form" title="Borrow" style="display: none;">
<asp:Label CssClass="labelStyle" ID="Label10" runat="server" Text="From"></asp:Label>
<asp:TextBox ID="datepicker2" runat="server"></asp:TextBox>
<asp:Label CssClass="labelStyle" ID="Label11" runat="server" Text="To"></asp:Label>
<asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
<br />
<br />
<asp:Button Style="margin-left: 90px;" ID="borrow_item_button" runat="server" Text="Borrow item" OnClick="borrow_item_Click" />
</div>
Can someone please help me with that?

Did you try that?
$("#Button1").click(function () {
$("#borrow_dialog_form").dialog("open");
$("#datepicker").blur();
$("#datepicker2").blur();
return false;
});
or that?
$("#Button1").click(function () {
$("#borrow_dialog_form").dialog("open");
$("#borrow_item_button").focus();
return false;
});

Load Jquery popup box when click on link tag and show the information from the ID?

I have listed some things from a database in a datalist with a link tag. Look like this on front page.
ID= 21 something click me
<HeaderTemplate>
<p class="overskrift_bestil">Ekstra varer</p>
</HeaderTemplate>
<ItemTemplate>
<td><asp:TextBox ID="TextBox_deli" runat="server" Width="15" Height="15"></asp:TextBox></td>
<td><p><%#Eval("deli_navn") %></p></td>
<td>
Show the Dialog
</td>
</ItemTemplate>
</asp:DataList>
When I click the click me link I want the popup box to show all the information on the product on ID=21. I know that I have to load some querystring when I click the html link, but I am stuck. This is what I have now:
$(document).ready(function () {
$('#contactFormContainer').hide();
$('#showdialog2').click(function () {
$("#contactFormContainer").load("bekraeft.aspx?deli_id=deli_id");
$("#contactFormContainer").fadeToggle('slow');
});
});
</script>
Hope someone could help me
/Tina

You need to do an ajax call.
<script>
$(document).ready(function () {
$('#contactFormContainer').hide();
$('#showdialog2').click(function () {
var deli_id = $('#deli_id').text(); //get deli_id from some container
$.ajax({
url: "bekraeft.aspx?deli_id=" + deli_id, //send id to aspx page
cache: false
})
.done(function(html) { //retrive html from aspx page once ajax call is completed
$("#contactFormContainer").html(html); //load html into container
$("#contactFormContainer").fadeIn('slow'); //fade container in
});
});
});
</script>

You need to change a litle bit your code:
Change showDialog2 id for a class (so you are going to attach click listener to all element with that class)
Add a data attribute to the link, storing the deli_id
aspx:
<HeaderTemplate>
<p class="overskrift_bestil">Ekstra varer</p>
</HeaderTemplate>
<ItemTemplate>
<td><asp:TextBox ID="TextBox_deli" runat="server" Width="15" Height="15"></asp:TextBox></td>
<td><p><%#Eval("deli_navn") %></p></td>
<td>
<a href="#" class="showdialog2" data-id='<%#Eval("deli_navn") %>'>Show the Dialog</a>
</td>
</ItemTemplate>
JS:
$(function () {
var clickedLink = $(this);
$('#contactFormContainer').hide();
$('.showdialog2').click(function () {
$("#contactFormContainer").load("bekraeft.aspx?deli_id=" + clickedLink.attr("data-id"));
$("#contactFormContainer").fadeToggle('slow');
});
});

Third asp.net button doesn't open a jQuery dialog

I have a very basic testing asp.net web application. There is one <asp:Button> that pops a jQuery dialog. In this dialog there is another <asp:Button> that makes a <div> tag visible, and in this <div> tag there is a third <asp:Button>. So far everything is okay.
Now according to my code the third button should pop a second jQuery dialog, but this never happens. Where am I mistaking?
Here is my aspx code:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:Button ID="btn" runat="server" Text="btn" />
<div id="div1">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Button ID="btn1" runat="server" Text="btn1" OnClick="btn1_Click" />
</td>
<td>
<div id="div2" runat="server" visible="false">
<asp:Button ID="btn2" runat="server" Text="btn2" />
</div>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="div3" style="display:none">
<h1>test</h1>
</div>
And here is the code for the jQuery:
<script type="text/javascript">
var dialogOpts = {
resizable: false,
bgiframe: true,
autoOpen: false,
width: "710px"
};
$('#div3').dialog(dialogOpts).parent().appendTo($("#form1"));;
$(function () {
$("#div3").dialog({
maxWidth: 1050,
maxHeight: 534,
width: 1050,
height: 534,
resizable: false,
autoOpen: false,
buttons: {
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#btn2").click(function () {
$("#div3").dialog("open");
return false
});
});
</script>
<script type="text/javascript">
var dialogOpts = {
resizable: false,
bgiframe: true,
autoOpen: false,
width: "710px"
};
$('#div1').dialog(dialogOpts).parent().appendTo($("#form1"));;
$(function () {
$("#div1").dialog({
maxWidth: 1050,
maxHeight: 534,
width: 1050,
height: 534,
resizable: false,
autoOpen: false,
buttons: {
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#btn").click(function () {
$("#div1").dialog("open");
return false
});
});
</script>
It is placed in the body and so far only the first jQuery pops up.
And this is my c# function that makes the second <div> tag visible:
protected void btn1_Click(object sender, EventArgs e)
{
div2.Visible = true;
}

visible = false
essentially prevents element from rendering. If you register the onclick event for the unrendered (UNRENDERED, not display:none nor visibility:hidden, your button does not physically reside in the page), the onclick event does not register to anything at all. After you show your button in the update panel, there is nothing to be run on click, because no click handling has been set (the button did not exist in the time of
$("#btn2").click(function () {
$("#div3").dialog("open");
return false
});
)

disable/hide all link button using jquery in repeater

I have a repeater which will have a link button per row here is the code:
<asp:Repeater ID="rpt_OutstandingBCsForClient" runat="server">
<ItemTemplate>
<div class="pay">
<table>
<tr>
<td>
<div style="width: 230px;">
<asp:Label ID="lbl_Len" runat="server" ></asp:Label>
</div>
</td>
<td align="left">
<div style="width: 80px;">
<asp:LinkButton ID="lnkbtn_Remove" runat="server">Remove</asp:LinkButton>
</div>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
I want to disable or hide all Linkbuttons with id 'lnkbtn_Remove' on button click, so i have done this but still it doesn't work, if put an alert after var linkButton1 I get an object, but it doesn't disable or hide the link button:
$("input[id$='btnP']").click(function (e) {
var linkButton1 = $('[id*="lnkbtn_Remove"]');
$.ajax({
type: "POST",
url: "MyPage.aspx/Take",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.d.indexOf('https://') > -1) {
$('#lnkbtn_Remove').attr("disabled", true);
}
else {
}
}
});
e.preventDefault();
});

Because your LinkButtons are server-side controls, their client-side IDs will not be lnkbtn_Remove but somethingsomethingsomethinglnkbtn_Remove.
Thus, try $('[id$="lnkbtn_Remove"]') instead of $('#lnkbtn_Remove'). id$= means "ID ends with".
As well as the selector issue, you also apparently can't disable a LinkButton, so you need to .remove() or .hide() it.

OnbuttonClick If you want to disable this button then you can use...
$('[id*=lnkbtn_Remove]').attr("disabled", true);
or if you want to hide this then simply you can use
$("#lnkbtn_Remove").hide();

Your id will be changed by asp.net for each link button. Use wild cards.
Change
$('#lnkbtn_Remove').attr("disabled", true);
To
$('[id*=lnkbtn_Remove]').attr("disabled", true);

Try to set CSS class for your buttons like "linkButtonRemove", so all link buttons from your repeater will have the same class. I think it's better way than using IDs here...
And then in jquery try to hide found elements:
$('.linkButtonRemove').hide();
or through adding css style
$('.linkButtonRemove').css('display', 'none');

$('#lnkbtn_Remove').click(function(){return false;})