trigger/bind jquery event for textbox on page load - javascript

I have a zip code textbox in view1 when the user enters zip code and click next to add more details I am passing zip code from view1 to view2. In view2 I need to display state and city based on the zip code entered. I have used keyup to get city and state based on zip entered. It works fine when I change zip code in view2.But dones not work when i am coming from view1 to view2. I need to trigger event for zip code textbox on page load I mean when zip code is passed from view1 to view2. Right now when I come from view1 to view2 only zip code display in its respective textbox, and city and state field don't display anything. How do I trigger an event for zip code textbox or bind to the existing event on page load?
$(document).ready(function ()
{
$("#zip").keyup(function () {
var el = $(this);
if (el.val().length === 5) {
$.ajax({
type:'GET',
dataType: "json",
cache: true,
url: "../api/Getstatelist/" + el.val(),
success: function (html) {
$.each(html,function(key,value){
$('#state').append($('<option></option>').val(value.State).html(value.State));
});
$.each(html,function(key,value){
$('#city').append($('<option></option>').val(value.City).html(value.City));
});
}
});
}
});
});
<div>
<div class="city-wrap">
<select id="city">
<option value="">Select City first</option>
</select>
<label for="city">City</label>
</div>
<div class="state-wrap">
<select id="state">
<option value="">Select State </option>
</select>
<label for="state">State</label>
</div>
<div class="zip-wrap">
#Html.TextBoxFor(model => model.Zip, new { #class = "form-control", #id = "zip", #name = "zip" })
<label for="zip">Zip</label>
</div>
</div>

I figured out the solution. Added on load function like below. I am not sure is this the right way to do. Any suggestions would be helpful.
$( window ).on( "load", function() {
var val = $('#zip').val();
if (val.length === 5) {
$.ajax({
type:'GET',
dataType: "json",
cache: true,
url: "../api/Getstatelist/" + val,
success: function (html) {
$.each(html,function(key,value){
$('#state').append($('<option></option>').val(value.State).html(value.State));
});
$.each(html,function(key,value){
$('#city').append($('<option></option>').val(value.City).html(value.City));
});
}
});
}
}

Related

Javascript - Changing tag-it source with select option

I have a select with two options. When changing the select ... I want to filter/autocomplete a different database. Without http://aehlke.github.io/tag-it/ it's working fine and the autocomplete is changing the source ... but not with it. It stays at source_01.php although I see in the console the change of Test Source 01 to Test Source 02. What might causes this?
HTML:
<select id="search_database" class="form-control">
<option value="1" selected="">Source 01</option>
<option value="2">Source 02</option>
</select>
Javascript:
$('#search_database').on('change', function () {
if ( $('#search_database').val() == 1 ) {
console.log('Test Source 01');
$("#input-newsearch").tagit({
...
autocomplete: ({
source: function( request, response ) {
...
$.ajax({
url: "/source_01.php",
...
});
},
...
})
});
} else if ( $('#search_database').val() == 2 ) {
console.log('Test Source 02');
$("#input-newsearch").tagit({
...
autocomplete: ({
source: function( request, response ) {
...
$.ajax({
url: "/source_02.php",
..
});
},
...
})
});
}
});
Your problem is the value not getting picked up by the script when you change the options if you want to pick the value of the changed option you've to do something similar to the below code.
HTML:
<label for="clientSelect" style="margin-left:14px;">Client:</label>
<select name="clientSelect" id="clientSelect" onChange="clientId(this.id)" style="width:180px;"></select>
<input type="text" id="clintId" size="1" hidden>
JavaScript:
function getClient(cId){
//Get the selected ID using this.is in client side HTML then breaks it up using this to get the ID only
var select = document.getElementById("catSelect"),
optionId = select.options[select.selectedIndex],
catId = optionId.id;
I use the hidden text filed to send the selected ID to my PHP then to the database.

Default selected value of dropdown menu using Jquery

I have 3 nested dropdown menus which are dynamically populated from a mysql database and I use Jquery. I want to set a selected value, depending on the entry in my database.
For example:
I have a table that contains many devices. Each device has its storage place (room, shelve, box). Notice: different rooms contain different shelves which contain different boxes, thats why I use a nested dropdown menu.
Next to each device is a button "change".
What I want is that the current storage place of the device is already selected in my dropdown menu.
This is part of my JS functions (got them from another site, I'm very new to JS):
function populateComp(xmlindata) {
var mySelect = $('#manufacturer');
$('#printertype').disabled = false;
$(xmlindata).find("Company").each(function()
{
optionValue=$(this).find("id").text();
optionText =$(this).find("name").text();
mySelect.append($('<option></option>').val(optionValue).html(optionText));
});
}
This is my html code:
Raum:</br></br><select name="manufacturer" id="manufacturer" >
<option value="">Auswahl:</option></select> </br></br>
Regal:</br></br> <select name="printertype" id="printertype" disabled="disabled" >
<option value="">Auswahl:</option></select> </br></br>
Kiste:</br></br><select name="printermodel" id="printermodel" disabled="disabled" >
<option value="">Auswahl:</option></select></br></br>
<div id="loading" style="display: none;"></div>
<div id="output" ></div>
Part of my ajax code:
jQuery().ready(function($){
$('#loading')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
// Ajax Called When Page is Load/Ready (Load Manufacturer)
jQuery.ajax({
url: 'man_list.php',
global: false,
type: "POST",
dataType: "xml",
async: false,
success: populateComp
});
Sorry for that much code, I hope anyone has a good solution for me, which I (the JS noob) can understand :)
You can check your server's response while populating dropdown options
function populateComp(xmlindata) {
var mySelect = $('#manufacturer');
$('#printertype').disabled = false;
$(xmlindata).find("Company").each(function()
{
optionValue=$(this).find("id").text();
optionText =$(this).find("name").text();
var $opt = $('<option> </option>').val(optionValue).html(optionText);
if(/* compare current data with your device here */) $opt.attr("selected", "selected");
mySelect.append($opt);
});
}

Retain filtering option when paginating

I'm trying to add a new feature to this pagination/filtering script but so far, without succes. I want that, when you change the page, the filter you picked from the top right corner select (that with "Ordonare dupa...) to remain picked instead of switching back to the first option.
This is my website - http://www.wheelsmarket.ro/cautare/jante/1
To paginate/filter i used this function:
$(document).ready(function()
{
$('.sortare').on('change', function(){
$.ajax({
url: '/filtrare-jante.php',
type: 'POST',
data: {'selected' : $(this).val(), 'pagina_id' : <?php echo $_GET['pagina'];?>},
success: function(data){
console.log(data); // do something with what is returned
$('#myTest').html(data);
$('#queryInitial').html('null');
}
});
});
All the querys are made inside a #myTest div, and the myTest div gets changed without reloading when you change that select. The problem is that the select box is out of #myTest div, so i doubt that i can make use of that function i have.
ex:
<select class="sortare select" >
<option value="1">cele mai noi</option>
<option value="2">cele mai ieftine</option>
<option value="3">cele mai scumpe</option>
</select>
<div id="myTest">
code
</div>
If i understood correctly you need something like :
1) Add id to your options:
<select class="sortare select" >
<option id="sel1" value="1">cele mai noi</option>
<option id="sel2" value="2">cele mai ieftine</option>
<option id="sel3" value="3">cele mai scumpe</option>
</select>
<div id="myTest">
code
</div>
AND change tha attr() to selected in jquery :
$(document).ready(function()
{
$('.sortare').on('change', function(){
selValue = $(this).val(); //---> Store this value in a variable.
$.ajax({
url: '/filtrare-jante.php',
type: 'POST',
data: {'selected' : $(this).val(), 'pagina_id' : <?php echo $_GET['pagina'];?>},
success: function(data){
console.log(data); // do something with what is returned
$('#myTest').html(data);
$('#queryInitial').html('null');
$('#sel'+selValue).attr("selected","selected"); //---> Use the variable we created to determine which option should be set to selected dynamically
}
});
});

Setting multiple id in option

Hello i am making option to choose among few ips and as its auto generated with php all option id="userip" is same. I face problem when i choose 2nd, 3rd or even 4th it auto take first ip which is 127.0.0.1 even if in option i choose ip 127.0.2.2 or any other.
I wanted to solve this so wanted to know best way to do it.
<div class="row"> Choose ip:
<select name="search">
<option id="userip">127.0.0.1</option>
<option id="userip">127.0.2.2</option>
<option id="userip">127.3.3.3</option>
<option id="userip">127.0.4.4</option>
</select>
<input class="adm" type="button" onclick="getuser()" value="Get Result">
</div>
Here is my js
function getuser() {
var e = $("#userip").val();
$("#showuser").html("")
$.ajax({
url: "adm.php",
type: "post",
data: "action=getuser&search="+e+"",
dataType: "json",
success: function (e) {
// do something
},
error: function () {}
})
}
ID must be unique at the page:
<div class="row"> Choose ip:
<select name="search" id="userip">
<option>127.0.0.1</option>
<option>127.0.2.2</option>
<option>127.3.3.3</option>
<option>127.0.4.4</option>
</select>
<input class="adm" type="button" onclick="getuser()" value="Get Result">
</div>
And for select option value, use child selector. See jquery official documentation
var e = $("#userip option:selected").text();
Or
var e = $("#userip").val();
just fetch the value of the search field. you can also use the callback onchange.
HTML code
<div class="row"> Choose ip:
<select name="search" id="search" onchange="getuser()">
<option id="userip">127.0.0.1</option>
<option id="userip">127.0.2.2</option>
<option id="userip">127.3.3.3</option>
<option id="userip">127.0.4.4</option>
</select>
</div>
JS code
function getuser() {
var e = $("#search").val();
$("#showuser").html("")
$.ajax({
url: "adm.php",
type: "post",
data: "action=getuser&search="+e+"",
dataType: "json",
success: function (e) {
// do something
},
error: function () {}
})
}

Ajax / Load Event

At present I have a small web-form that loads AJAXed data really nicely from a drop down menu:
<select name="showcode" id="showcode">
<option value="1"> First Name</option>
<option value="2"> Last Name</option>
</select>
What I would like to do is create the action from a text link such as:
First Name
Last Name
I don't know how to change the .change(function() { JS to correctly perform an action onclick event to make this happen. Below is the JS part. Any thoughts / help would be greatly appreciated.
$(document).ready(function(){
$("#showcode").change(function() {
var usr = $("#showcode").val();
$("#getassociatedprojects").html('Retrieving..');
$.ajax
({
type: "POST",
url: "/client-stories/data.php",
data: "showcode="+ usr,
success: function(msg)
{
$("#getassociatedprojects").ajaxComplete(function(event, request, settings)
{ $(this).html(msg); });
}
Worked it out.
Assigned a rel and class to the <a href>
First Name
Then changed the Javascript call in to:
$('a.topic').click(function() {
var usr = $(this).attr('rel');
Voila. It worked. :)

Categories

Resources