make javascript code content dropdownlist dependant - javascript

I found this code on the internet, I'm using it to populate a textbox with autocomplete elements, the problem I have tho is that I also have a DropDownList that lets you choose between three languages, and I would like to change a parameter depending on the selected language. This is the code:
<script language="javascript" type="text/javascript">
$(function () {
$('#<%=txtCompanyName.ClientID%>').autocomplete({
source: function (request, response) {
$.ajax({
url: "Default.aspx/GetCompanyName",
data: "{ 'pre':'" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return { value: item }
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}
});
});
I would like to change the "url: Default.aspx/GetCompanyName" parameter everytime I switch the language on the DropDownList. I tried a lot of things, but I think the closest was this:
...
if(document.getElementById('DropDownListName').value == "Company")
url: "Default.aspx/GetCompanyName",
} else {
url: "Default.aspx/IgnoreInput",
}
...
Thanks in advance for the help!

lets assume your dropdown has static values like this, you can fire this each time the dropdown changes:
<select id="languages" onchange="OnLanguageChange(this)">
<option value="default.aspx/GetCompanyEN">English</option>
<option value="default.aspx/GetCompanyFR">Francais</option>
<option value="default.aspx/GetCompanyES">Espanol</option>
</select>
add your code to this function to meet your needs, so the el.value would be your url
function OnLanguageChange(el) {
alert(el.value)
}

Related

Jquery, send default value with ajax

I have a select box. The selected option is sent with ajax to a server side script. This works well.
the select box
<select id="main_select">
<option selected="selected">50</option>
<option value="40">40</option>
<option value="30">30</option>
<!-- other options -->
</select>
How can I extend the .change function that the default value <option selected="selected">50</option>is automatically send with the page load.
script:
$(document).ready(function () {
$('#main_select').change(function () {
$.ajax({
url: "itemscript.php",
type: "post",
data: {option: $(this).find("option:selected").val()},
success: function(data){
$("#details").html(data);
}
});
});
});
Just trigger the change event when the page is loaded.
$(document).ready(function() {
$('#main_select').change(function() {
$.ajax({
url: "itemscript.php",
type: "post",
data: {
option: $(this).val()
},
success: function(data) {
$("#details").html(data);
}
});
}).change();
});
Also, you can use $(this).val(), that gets the value of the selected option.
Why not extract the functionality to a seperate function? This helps to avoid hacks like triggering a change manually - if you had multiple listeners for such a change event, all would fire, and this might not be what you expect to happen ;)
function getData(select) {
$.ajax({
url: "itemscript.php",
type: "post",
data: { option: $(select).find("option:selected").val() },
success: function(data) {
$("#details").html(data);
}
});
}
$(document).ready(function () {
getData($('#main_select'));
$('#main_select').change(getData);
});

Autocomplete adding extra spaces

Image Example
Image Example Keyboard
My auto commplete is adding extra spaces when data is selected from web services, how do i fix this?
i've tried mostly everything but isnt getting any results
Code:
https://jsfiddle.net/jz1e4tr6/1/
$(document).ready(function () {
$("#<%=TextBox1.ClientID%>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("/Normal/WebServices/AutoComplete.asmx/GetSubject")%>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
attr: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
An alternative "tweak" but not the right solution... before clicking submit in the code behind... i get the value from the textbox and into a variable. And trim the variable.

MVC - nothing happens on click (Jquery in view)

I want my button to do something onClick(), it has the ID btnSend. But nothing happens when I click the button which is weird and I can't figure out why.
The script is in my view for now within script tags.
$("#btnSend").click(function () {
var messageInfo = {
"Body": $("#Message").val(),
};
$.ajax({
type: "POST",
url: '/Api/Posts',
data: JSON.stringify(messageInfo),
contentType: "application/json;charset=utf-8",
processData: true,
success: function (data, status, xhr) {
alert("The result is : " + status);
},
error: function (xhr) {
alert(xhr.responseText);
}
});
});
Are you sure your script is running after the page is loaded?
Put your script at the bottom of the page and give it a try.

Autocomplete in two input boxes? - javascript

Hi i am trying to find out how to use my javascript code for two input boxes. the data its grabing and the URL is using C# code but that should not matter. Please help me with my autocomplete..
Here is a test page of it in action
http://www.bivar.com/test.aspx
Here is the code i am using for the javascript.
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SearchText();
});
function SearchText() {
$(".autosuggest").autocomplete({
select:function(event, ui){
window.location.href = '/Products/ProductInfoCenter.aspx?partnum=' + ui.item.value;
},
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/test.aspx/GetAutoCompleteData",
data: "{'PartNumber':'" + document.getElementById('txtPartNum').value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert(err.message);
}
});
}
});
}
</script>
Here are the two input boxes
<input type="text" id="txtPartNum" class="autosuggest" />
<input type="text" id="txtPartNum2" class="autosuggest" />
Thank you and please help.
Here is your function updated. Tested and its working perfectly. Problem was that, it was passing value of first input box every time. I used $(this.element) to get current element on which autocomplete is requested. When dealing with classes we have to make use of (this) keyword to avoid conflicts.
function SearchText() {
$(".autosuggest").autocomplete({
select:function(event, ui){
window.location.href = '/Products/ProductInfoCenter.aspx?partnum=' + ui.item.value;
},
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/test.aspx/GetAutoCompleteData",
data: "{'PartNumber':'" + $(this.element).val() + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert(err.message);
}
});
}
});
}
The only problem I see is that both the inputs are sending same data as parameter. But that is what it supposed to do isn't it? Because you are using this -
data: "{'PartNumber':'" + document.getElementById('txtPartNum').value + "'}",
in your code. I think this is the error. But please make sure you ask properly what you are looking for. Your question is not completely understandable. A usual code should look like this -
data: "{'PartNumber':'" + request.term + "'}",
Let me know if this what you were looking for.

Jquery autocomplete runs after second key pressed?

I want to make autocomplete work on each textboxes using with an attribute "kolonadi"
When i press a key in textbox, the page alerts me "keydown enterance" but the autocomplete is not running. If I press one key more it works correctly.
How can i modify this code?
This is my dynamic input:
<input name="ctl00$MainContent$qtxt_UNVAN" type="text" id="MainContent_qtxt_UNVAN" class="textEntry2 ui-autocomplete-input" kolonadi="UNVAN" style="width:200px;" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
This is jquery autocomplete:
$('.textEntry2').keydown(function () {
alert("keydown enterance");
var kolonadi_ = $(this).attr("kolonadi");
$(this).autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/AutoCom.asmx/GetValues") %>',
data: "{ 'word': '" + request.term + "','KullaniciIndexInGlob':'<%=KullaniciIndexInGlob %>','BaslikId':'<% =BaslikId %>','columnName':'" + kolonadi_ + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=hfCustomerId.ClientID %>").val(i.item.val);
},
minLength: 1
});
});
I want to make autocomplate each textboxes using textbox attr "kolonadi"
Then you need to make a jQuery selector that matches that attribute:
$('input[type="text"][kolonadi!=""]').each(function() {
// ...
});
...when I press a key in textbox, page alert me "keydown enterance" but autocomp not running. If I press one key more it runs!
The problem is that the jQuery UI .autocomplete method doesn't immediately bring down the drop-down like you think it does. If you call it once, it converts the input field permanently into an auto-completing field.
So what your code does is check for a keypress, and if it finds it, it turns the text field into an autocomplete. Then the second time you enter a keypress, the auto-complete handler runs and your handler runs, and it gets converted into an autocomplete again.
So just call .autocomplete directly on page load, get rid of the keydown handler, and call it done. You don't need your own key-down handler because the .autocomplete method will insert its own key-down handler.
Something like this:
var textEntry2 = $('.textEntry2');
var kolonadi_ = textEntry2.attr("kolonadi");
textEntry2.autocomplete({
source: function(request, response) {
$.ajax({
url: '<%=ResolveUrl("~/AutoCom.asmx/GetValues") %>',
data: "{ 'word': '" + request.term + "','KullaniciIndexInGlob':'<%=KullaniciIndexInGlob %>','BaslikId':'<% =BaslikId %>','columnName':'" + kolonadi_ + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function(data) {
response($.map(data.d, function(item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function(response) {
alert(response.responseText);
},
failure: function(response) {
alert(response.responseText);
}
});
},
select: function(e, i) {
$("#<%=hfCustomerId.ClientID %>").val(i.item.val);
},
minLength: 1
});
Edit: the previous code doesn't work, it's necessary to iterate in all inputs from class textEntry2.
You must call the autocomplete in $(document).ready function, not in each keydown. Assuming that all inputs in which you want to use autocomplete are from class textEntry2, you'll need something like:
<script type="text/javascript">
$(document).ready(function(){
$('input.textEntry2').each(function() {
var kolonadi_ = $(this).attr("kolonadi");
$(this).autocomplete(/* do all stuff here */);
});
});
</script>

Categories

Resources