Passing jQuery this.id in class selector - javascript

I have two different input fields, it uses typeahead.
In first field we enter Country and in other we should select City, depending on Country.
So I'm making a javascript/jQuery function, to pass field ID, to know, which of 3 pairs of Country+City pair am I selecting.
i'm using
$('.demoTypeAhead').typeahead({
source: getCityForCountry($(this).id)
});
in function getCityForCountry, I would like to pass a field specific id, but neither $(this), or this works, since it returns whole DOM object.

A jQuery object does not have an .id property. You either want
this.id // or
$(this).prop("id") // or even
$(this).attr("id")

$(this) on this scope does not return input as an object, but whole page as an object...
Just made jsfiddle for it:
Jsfiddle http://jsfiddle.net/s1d8nmqr/3/
I would like to reload data source of typeahead for second input, when I select first one (2 level select)

Related

Delete Dropdown values using jquery

I have a situation here,
Using JQuery I'm appending some values in drop down list.. Even it is one or two value that appended in drop down list..
For Add,
tableui+='<option value="">'+resourceadd+'</option>';
$('#resourcess').append(tableui);
When the page reloads automatically the value stored in db.
For example 4 values added in dropdown list (Values are not stored in db), I want to delete last value. I'm using,
$("#resourcess :last-child").remove();
The same condition, I want to delete middle of two values, How to do it??
Assuming you know the value of the option you want to remove, you could use filter:
$('#resources option').filter(function() {
return this.value == 'foo'; // insert your value here.
}).remove();
Or an attribute selector:
$('#resources option[value="foo"]').remove();
If you don't know the value, but do know the position of the option within the select, you could remove it by index using eq():
$('#resources option').eq(1).remove(); // remove the 2nd option

How to insert selected element from multiple selection into an input?

hi everyone i have a problem.
i have a multiple selection and i want to select something and put it into an input through a button i hope i have been clear :
i manage to get the select item with this jquery code :
var chosen= $('#droite option:selected').val();
droite is an id for the multiple selection
and i want to put it into the input wich has an id : chosen item here is my jquery code:
$("#chosenitem").prepend(chosen);
and it won't work do you have any idea why .?
You need to call val() on the select itself, not the options it contains:
var chosen = $('#droite').val();
Similarly, to set the value of the #chosenitem input, use val() with a parameter:
$("#chosenitem").val(chosen);
Note that if multiple options are selected in the #droite element, the value returned will be a comma delimited string, eg. foo,bar,baz.
You should call val() to set the value of #chosenitem
$("#chosenitem").val(chosen);

jQuery attr('id') returns undefined

I have a list of items and when a user clicks on one of them, it gets assigned a class called 'active-child'. Just one item could be selected at the moment, and when the user clicks on another item, this item is cleaned of 'active-child' class and then this class gets assigned to the newly selected item. Just like any other non-multiple list.
Here is the selected element's HTML:
<div id="5" class="new-child-item new-child-item-active active-child"> Software </div>
When I want to submit the selected item's "id" to a php script to process it further, the jquery does not retrieve the id value of the element and says it is undefined. My approach to getting the selected item's id attribute is as follows:
$('.active-child').attr('id');
I also have tested this, but still returns undefined:
$('.active-child:first-child').attr('id');
The strange thing is that I first check to see if the user has selected anything at all, and if yes, then do the ajax, at this moment, the jquery returns 1, means the user has selected one item. Here is the code block which checks to see the selection and then send it through ajax:
if($('.active-child').length > 0)
{
$('.new-item-cats-list-holder').empty();
$('.new-item-cats-list-holder').hide()
$('.big-loader').show();
console.log("This is the id: " + $('.new-child-item-active:first-child').attr('id'));
$.ajax({
url : base_path('ajax/set_credentials/step_2'),
type: "POST",
data : ({'set_sess':true, 'category' : $('.active-child').attr('id')}),
success : function(msg){
if(msg!=0)
{
//window.location.href = base_path('panel/add/step/ads/3');
}
},
});
}// end of length if
The empty() and hide() functions before the ID retrieval destroys and DOM and does not allow it to exist and then to be fetched of its id value.
I have an inkling that you are using numerical values as IDs, or at least have ID that starts with a number. My suspicion comes from the fact that your console log returns 1, and you have specified in your question that you are logging the active child's ID.
This is invalid — classes and IDs have to start with an alphabet or an underscore or a dash, and then followed by any alphanumeric, underscore or dash characters and a combination thereof.
See here: Which characters are valid in CSS class names/selectors? and http://www.w3.org/TR/CSS21/syndata.html#characters
This is unless you are using HTML5, but you need to declare the doctype correctly: <!DOCTYPE html>
Also, have you checked that your IDs are unique?

assigning initial value of input text field with jquery

I am trying to assign an initial value to a text box with using jquery. This is the text field
<input type="text" class="info"/>
This creates more than one text fields and I need to populate the text fields with initial values which come from database. I am having problem since I am trying to it with jquery adapter.
Any clue on this?
Thanks in advance.
Here is the detailed code:
I include index.html
<?php include "index.html"?>;
which puts some text fields to record.php:
...
...
After including index.html I am using this code to assign intial value to the text boxes which have a class name "info":
$('.info').each(function() {
$('.info').val('yourvalue');
});
Instead of assigning a constant value (here it is "yourvalue") I am going to assing some database records to each input fields.
$('.info').val('yourvalue');
replace yourvalue with the value you want to set..
Set this value in the success callback of your ajax request..
$('.info').val('value-to-be-set');
.val( value ) - Set the value of each element in the set of matched
elements
Above code will set the value of the input fields where the class name if 'info'
Read More here
$('.aciklama').each(function() { $('.aciklama').val('yourvalue'); });
you know $('.aciklama') is an array , and when you iterator you array get the object, you still get the $('.aciklama') array and set the array value, as I see It is not correct.
You should write like this:
$('.aciklama').each(function(index, item) { $(item).val('yourvalue'); });

Replace hidden value in a form with javascript variable

I'm working with Google Checkout and am creating a simple Buy Now button. The button will be on many pages and have many values for the form.
What I'm looking to do is to use Javascript, to get a value on a text_field, and replace a hidden field value.
To get the value, I have this code:
$('#payment_quantity input').keyup(function() {
var quantity = $('#payment_quantity input').val();
return false;
});
Then, in the form from google, I have this:
<input type="hidden" name="item_quantity_1" value="1"/>
What I need to be able to do, is replace the value on this hidden input, with my quantity variable. I know this is probably really easy, but I'm amazingly confused at how to do this. I should have to select the hidden field, but I don't know how to update the value?
Here ya go:
$('input[name="item_quantity_1"]').val(quantity);
You just have to construct a jQuery selector to get that field and then use the .val(xxx) method to set its value.
jQuery loves to overload the same method for different behaviors based on what you pass as arguments. In the case of .val(), if you pass no arguments, it retrieves the field value. If you pass an argument like .val(quantity), it sets that value into the field like this:
$('#payment_quantity input').keyup(function() {
var quantity = $('#payment_quantity input').val();
$("input[name='item_quantity_1']").val(quantity);
return false;
});

Categories

Resources