What I'm trying to do is get the selected x-combo-list-item, Partner from the x-combo-list.
How would I do so? Please help. Thank you.
Please refer to my jsfiddle for code reference. --> JSFiddle
----------------New Question------------------
Does .each() automatically run when if "Partner" is selected?
http://jsfiddle.net/littlefyr/H6yeJ/
JQuery allows you to select based on the content of the element. So you simply use selectors to do what you want:
$('.x-combo-list-item:contains("Partner")').click(function() {
var $this = $(this);
alert('You have selected Partner!');
commonFunction($this);
});
$('.x-combo-list-item:not(:contains("Partner"))').click(function() {
var $this = $(this);
alert('You have not selected Partner!');
commonFunction($this);
});
function commonFunction(item){
// do Ajaxy stuff
};
This fails when you start changing the text (like when you have to translate the text). In this case you simply add a constant value to the tags and use attribute selectors:
$('.x-combo-list-item[data-val=pnr]').click(function() {
var $this = $(this);
alert('You have selected Partner attribute wise!');
commonFunction($this);
});
$('.x-combo-list-item[data-val!=pnr]').click(function() {
var $this = $(this);
alert('You have not selected Partner attribute wise!');
commonFunction($this);
});
$('.x-combo-list-item:not([data-val=pnr])').click(function() {
var $this = $(this);
alert('You have not selected Partner alternative attribute wise!');
commonFunction($this);
});
You also can combine those with .x-combo-selected and :not(.x-combo-selected) in order to handle selected items differently.
If you're adding items via code (or even as a matter of principle) you should delegate the events to a relevant ancestor:
$('.x-combo-list-inner')
.on('click', '.x-combo-list-item:contains("Partner")',function() {
var $this = $(this);
alert('You have selected Partner! Again');
commonFunction($this);
}).on('click', '.x-combo-list-item:not(:contains("Partner"))', function() {
var $this = $(this);
alert('You have not selected Partner! again');
commonFunction($this);
})
If I understand correctly, you want to alert when the user clicks on the div which contains the text partner?
$('.x-combo-list-item').click(function() {
if ($(this).text() === "Partner") {
alert('You have selected Partner!');
// Fire your ajax call here
/*
$.post('handler.php', {data: data : {even: 'more data'}}, function(data), 'json');
*/
}
});
You had a call to retrieve data-item which doesn't exist, so I'm not entirely sure.
Try This:
$('#ext-1111 div').each(function() {
if (jQuery(this).html() == "Partner") {
alert("This is Partner")
}
});
Regards
$('id if box').val('Partner') ;
This will do.
Related
I am trying to show the values based on Checkbox check and uncheck
I have got two checkboxes MNC and Worth (Only the Top Ones), i am trying to show or hide the values based on it (pesent under class pack-panel div)
This is my code
$(document).on('change', '.filtermnc', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.mnccheckbox').prop('checked')
$(this).toggle(visible);
});
});
$(document).on('change', '.filterworth', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.worthcheckbox').prop('checked')
$(this).toggle(visible);
});
});
When i tried with this code , it is not working and also it is checking all the correspondng checkboxes
Could you please let me know how to achieve this .
http://jsfiddle.net/F8Vk2/121/
I made for one, but it's just a mater of changing the other one likewise:
$(document).on('change', '.filterworth, .filtermnc', function() {
var $this = $(this),
isChecked = $this.is(':checked'),
$packPanel = $('.pack-panel');
isChecked ? $packPanel.show() : $packPanel.hide()
});
You could use this to get the target of the event and verify if it's checked by .is(':checked'). Also, you don't need to iterate over $('.pack-panel') in order to apply your changes. .toggle() will change the visibility by it's previous one, so I think you should hard code to hide or show the panels.
Change your js to
$(document).on('change', '.filtermnc', function() {
var visible = $(this).prop('checked')
if(visible)
$('.mnccheckbox').closest("li").show();
else
$('.mnccheckbox').closest("li").hide();
});
$(document).on('change', '.filterworth', function() {
var visible = $(this).prop('checked')
if(visible)
$('.worthcheckbox').closest("li").show();
else
$('.worthcheckbox').closest("li").hide();
});
http://jsfiddle.net/F8Vk2/123/
You could try ->
$(document).on('change', '.filtermnc', function() {
$('.mnccheckbox').
closest("li").
toggle($(this).prop('checked'));
});
This is basically finding all with .mccheckbox class, and then toggling based on the property of the checkbox you assigned the event too.
I would like to open two templates based on the data attribute, if brand is SIM then open template1, if Samsung open the other.
Here is my code:
$('.item .show-detail').click(function(){
if($(this).find('[data-brand="SIM"]')) {
var myLink1 = $(this);
alert('hey');
$('.content .row').fadeOut({complete: function(){detailTemplate1('Voice',$(myLink1).parent().data('brand'), $(myLink1).parent().data('model'), $(myLink1).parent().data('subcat')); $('.content .row').fadeIn(400)}});
}else
($(this).find('[data-brand="Samsung"]'))
var myLink = $(this);
alert('link All');
$('.content .row').fadeOut({complete: function(){detailTemplate('Voice',$(myLink).parent().data('brand'), $(myLink).parent().data('model'), $(myLink).parent().data('subcat')); $('.content .row').fadeIn(400)}});
})
You have a lot of problems in your code.
You can't specify a condition for else, you have to say else if
Wrap else if block in figure brackets.
Use length to find if element exists.
This is assuming that data-brands exist inside item element you're clicking on:
$(document).ready(function(){
$('.item').click(function(){
if( $(this).find('[data-brand="SIM"]').length ) {
var myLink1 = $(this);
alert('SIM');
}
else if ( $(this).find('[data-brand="Samsung"]').length ) {
var myLink = $(this);
alert('Samsung');
}
});
});
http://jsfiddle.net/f32epg16/
jquery objects will always be truthy, you need to check the length.
if($(this).find('[data-brand="SIM"]').length)
Second else does not have a clause. You need to either drop it or use else if.
Try this
$(document).ready(function(){
$('.item .show-detail').click(function(){
if($(this).attr("data-brand")=="SIM")
alert("SIM");
else if($(this).attr("data-brand")=="Samsung")
alert("Samsung");
});
});
Use jquery attr method to find its value and do the relevant work
I am facing issue such as below.
I have used 6 dropdown list in my page with similar values.
Now I want that if one option is selected from dropdown lits then it should be removed from other dropdown list, and vice versa.
working code is as below :
var $selects = $('select');
$('select').change(function () {
$('option:hidden', $selects).each(function () {
var self = this,
toShow = true;
$selects.not($(this).parent()).each(function () {
if (self.value == this.value) toShow = false;
})
if (toShow) $(this).show();
});
if (this.value != 0) //to keep default option available
$selects.not(this).children('option[value=' + this.value + ']').hide();
});
But above code works fine in case we change dropdown item by mouse click however when we use aero keys the issue still persist.
Please Do like Below
var textValue = $("#yourdropdownid option:selected").val();
$("#dropdownElement").find('option[value="'+textValue+'" ]').remove();
This will helps you.
Is this what you want?
http://jsfiddle.net/b5ahtbr5/1/
Here is what you do-
$('.dropdown').on('change',function(){
var selectedValue=$('option:selected',this).val();
$('.dropdown ').not(this).find('option[value='+selectedValue+']').remove();
});
I've got the following code in my web page, where I need to click on the input field and add values using the number pad provided! I use a script to clear the default values from the input when the focus comes to it, but I'm unable to add the values by clicking on the number pad since when I click on an element the focus comes from the input to the clicked number element. How can I resolve this issue. I tried the following code, but it doesn't show the number in the input.
var lastFocus;
$("#test").click(function(e) {
// do whatever you want here
e.preventDefault();
e.stopPropagation();
$("#results").append(e.html());
if (lastFocus) {
$("#results").append("setting focus back<br>");
setTimeout(function() {lastFocus.focus()}, 1);
}
return(false);
});
$("textarea").blur(function() {
lastFocus = this;
$("#results").append("textarea lost focus<br>");
});
Thank you.
The first thing I notice is your selector for the number buttons is wrong
$('num-button').click(function(e){
Your buttons have a class of num-button so you need a dot before the class name in the selector:
$('.num-button').click(function(e){
Secondly, your fiddle was never setting lastFocus so be sure to add this:
$('input').focus(function() {
lastFocus = this;
...
Thirdly, you add/remove the watermark when entering the field, but ot when trying to add numbers to it (that would result in "Watermark-text123" if you clicked 1, then 2 then 3).
So, encalpsulate your functionality in a function:
function addOrRemoveWatermark(elem)
{
if($(elem).val() == $(elem).data('default_val') || !$(elem).data('default_val')) {
$(elem).data('default_val', $(elem).val());
$(elem).val('');
}
}
And call that both when entering the cell, and when clicking the numbers:
$('input').focus(function() {
lastFocus = this;
addOrRemoveWatermark(this);
});
and:
$('.num-button').click(function(e){
e.preventDefault();
e.stopPropagation();
addOrRemoveWatermark(lastFocus);
$(lastFocus).val($(lastFocus).val() + $(this).children('span').html());
});
You'll see another change above - you dont want to use append when appends an element, you want to just concatenate the string with the value of the button clicked.
Here's a working branch of your code: http://jsfiddle.net/Zrhze/
This should work:
var default_val = '';
$('input').focus(function() {
lastFocus = $(this);
if($(this).val() == $(this).data('default_val') || !$(this).data('default_val')) {
$(this).data('default_val', $(this).val());
$(this).val('');
}
});
$('input').blur(function() {
if ($(this).val() == '') $(this).val($(this).data('default_val'));
});
var lastFocus;
$('.num-button').click(function(e){
e.preventDefault();
e.stopPropagation();
var text = $(e.target).text();
if (!isNaN(parseInt(text))) {
lastFocus.val(lastFocus.val() + text);
}
});
Live demo
Add the following function:
$('.num-button').live( 'click', 'span', function() {
$currObj.focus();
$currObj.val( $currObj.val() + $(this).text().trim() );
});
Also, add the following variable to global scope:
$currObj = '';
Here is the working link: http://jsfiddle.net/pN3eT/7/
EDIT
Based on comment, you wouldn't be needing the var lastFocus and subsequent code.
The updated fiddle lies here http://jsfiddle.net/pN3eT/28/
I have two select tags in my website. When I try to get the text of selected item in one select tag, I see that it returns the two texts of the two select tags, even if I specify which select to retrive data from via a class attribute.
My code is
$('select.select').change(function(e) {
e.preventDefault();
var val1 = $(' option:selected').text();
alert(val1);
});
$('select.select2').change(function(e) {
e.preventDefault();
var val2 = $(' option:selected').text();
alert(val2);
});
The alerts are always containing the text of the two select tags concatenated.
Your usual help is appreciated.
Perhaps update the selector to specify the context of the selection:
$('select.select').change(function(e) {
e.preventDefault();
var val1 = $('option:selected', this).text();
alert(val1);
return false;
});
The selector $('option:selected', this) will return values found within the context of the changed element.
It is because of this $('option:selected').text(); you have two selected option in your page so it returns two values.
You need to do this:
// Call the change event for the select
$('select.select').change(function (e) {
e.preventDefault();
// Get the selected option for the select in current scope
var text = $(this).find('option:selected').text();
alert(text );
//return false; No need of this, as we already called the preventDefault() method
});
you need to specify the class when you retrieve the value:
var val1 = $('.select option:selected').text();
and
var val2 = $('.select2 option:selected').text();