I'm in the middle of a problem here.
I have a Ajax script that returns this "Rua Américo Vezzani#Park Aliança#Matão#SP", then I split this result and match with the options of a select tag
function (retorno)
{
var array_retorno = retorno.split('#');
$(".endereco_load").val(array_retorno[0]);
$(".bairro_load").val(array_retorno[1]);
$(".cidade_load").val(array_retorno[2]);
var estado = array_retorno[3].toString() ;
$(".estado_load ").find('option').each(function() {
if( $(this).val().match(estado) ) {
$(this).attr({ selected : "selected" });
}
});
// $(".estado_load option[value='" + estado + "']").attr({ selected : "selected" });
},
the problem is that the code above doesnt work.
when i set my variable estado like this for instance
var estado = 'SP';
it works
can anyone help me?
You didn't name your function and .toString isn't necessary.
See Fiddle: http://jsfiddle.net/13s58xjj/
function splitString(retorno)
{
var array_retorno = retorno.split('#');
$(".endereco_load").val(array_retorno[0]);
$(".bairro_load").val(array_retorno[1]);
$(".cidade_load").val(array_retorno[2]);
var estado = array_retorno[3];
alert(estado);
$(".estado_load ").find('option').each(function() {
if( $(this).val().match(estado) ) {
$(this).attr({ selected : "selected" });
}
});
You can remove the alert, I left it in for debugging
Change:
$(".estado_load ").find('option').each(function() {
if( $(this).val().match(estado) ) {
$(this).attr({ selected : "selected" });
}
});
To:
$(".estado_load option").filter(function() {
return this.value.trim() == estado.trim();
})
.attr('selected','selected');
You should try to trim like this:
if( $(this).val().trim().match(estado.trim())) {
// all stuff here
}
Working Fiddle.
Related
I dont know very well jquery/javascript and I am having problems with the code below.
After the form validation steps, the button is disabled but the form is not submited. Where is wrong?
$(function() {
$('.form_error').hide();
$("#submit_button").click(function() {
var tempo_show = 400
$('.form_error').hide();
var card_name = $("input#card_name").val();
if (card_name == "") {
$("span#validation_card_name").fadeIn(tempo_show);
//alert("Informe o Nome do titula do cartão");
$("input#card_name").focus();
return false;
}
var owner_birthdate = $("input#owner_birthdate").val();
if (owner_birthdate.length < 8) {
$("span#validation_owner_birthdate").fadeIn(tempo_show);
//alert("Informe o Nome do titula do cartão");
$("input#owner_birthdate").focus();
return false;
}
// here is where I can't make work
$(this).html('Processando...');
$(this).attr('disabled', true);
});
});
I think this $("input#card_name").val(); should be this $("#card_name").val();. The reason is you don't need to specify the element type when you want to get them by ID. Make similar changes to the rest of the code as well. Try adding $("#YOURFORMID").submit() at the end.
Try this:
$(function() {
$('.form_error').hide();
$("#submit_button").click(function() {
var tempo_show = 400
$('.form_error').hide();
var card_name = $("#card_name").val();
if (card_name == "") {
$("#validation_card_name").fadeIn(tempo_show);
//alert("Informe o Nome do titula do cartão");
$("#card_name").focus();
return false;
}
var owner_birthdate = $("#owner_birthdate").val();
if (owner_birthdate.length < 8) {
$("#validation_owner_birthdate").fadeIn(tempo_show);
//alert("Informe o Nome do titula do cartão");
$("#owner_birthdate").focus();
return false;
}
// here is where I can't make work
$(this).html('Processando...');
$(this).attr('disabled', true);
$("#YOURFORMID").submit();
});
});
Im using bootstrap datatables, and im having a search input and whatever I do it won't remove Search text and add placeholder. I've seen examples here on stack and google but that didnt helped.
I believe this is the js for the search input:
function _fnFeatureHtmlFilter ( settings )
{
var classes = settings.oClasses;
var tableId = settings.sTableId;
var language = settings.oLanguage;
var previousSearch = settings.oPreviousSearch;
var features = settings.aanFeatures;
var input = '<input type="search" class="'+classes.sFilterInput+'"/>';
var str = language.sSearch;
str = str.match(/_INPUT_/) ?
str.replace('_INPUT_', input) :
str+input;
var filter = $('<div/>', {
'id': ! features.f ? tableId+'_filter' : null,
'class': classes.sFilter
} )
.append( $('<label/>' ).append( str ) );
var searchFn = function() {
/* Update all other filter input elements for the new display */
var n = features.f;
var val = !this.value ? "" : this.value; // mental IE8 fix :-(
/* Now do the filter */
if ( val != previousSearch.sSearch ) {
_fnFilterComplete( settings, {
"sSearch": val,
"bRegex": previousSearch.bRegex,
"bSmart": previousSearch.bSmart ,
"bCaseInsensitive": previousSearch.bCaseInsensitive
} );
// Need to redraw, without resorting
settings._iDisplayStart = 0;
_fnDraw( settings );
}
};
var jqFilter = $('input', filter)
.val( previousSearch.sSearch )
.attr( 'placeholder', language.sSearchPlaceholder )
.bind(
'keyup.DT search.DT input.DT paste.DT cut.DT',
_fnDataSource( settings ) === 'ssp' ?
_fnThrottle( searchFn, 400 ):
searchFn
)
.bind( 'keypress.DT', function(e) {
/* Prevent form submission */
if ( e.keyCode == 13 ) {
return false;
}
} )
.attr('aria-controls', tableId);
// Update the input elements whenever the table is filtered
$(settings.nTable).on( 'search.dt.DT', function ( ev, s ) {
if ( settings === s ) {
// IE9 throws an 'unknown error' if document.activeElement is used
// inside an iframe or frame...
try {
if ( jqFilter[0] !== document.activeElement ) {
jqFilter.val( previousSearch.sSearch );
}
}
catch ( e ) {}
}
} );
return filter[0];
}
As you know it datatables doesn't show in HTML, so its js.
How it looks, look at the search input
How I want it to look
you can use following code
oLanguage: {
"sSearch": ""
},
for Placeholder put the following code
$('.dataTables_filter input').attr("placeholder", "search...");
I am using the multiselect jQuery plugin in my ci app
<div class="controls"><select name="delivery_method_' + cloneCntr + '[]" multiple="multiple" class="dm_list_data">' + delivery_method_options + '</select></div>';
$(function () {
$('.dm_list_data').multiselect({
includeSelectAllOption: true,
buttonWidth: '170px',
nonSelectedText: 'Select Delivery Method',
});
});
I have created a function on change. In the function I am not getting unchecked values, it's showing only checked values:
$('.dm_list_data').on('change', function() {
var ischecked= $(this).is(':checked');
if(!ischecked){
alert('uncheckd ' + $(this).val());
} else {
alert("checked");
}
});
Hope this will help you :
see the working example : https://jsfiddle.net/3b4dqhfc/5/
Use jquery's not to get the desired result like this
$(document).ready(function(){
$('.dm_list_data').on('change', function() {
/* use this for unselected value*/
$('.dm_list_data option').not(':selected').each(function(k,v){
console.log(k,v.text, v.value);
});
/* use this for selected value*/
$('.dm_list_data :selected').each(function(k,v){
console.log(k,v.text, v.value);
});
});
});
On every change setup some attribute to unselected and add them in the array.
$('.dm_list_data').on('change', function() {
var $sel = $(this);
val = $(this).val();
$opts = $sel.children();
prevUnselected = $sel.data('unselected');
var currUnselected = $opts.not(':selected').map(function() {
if($("#new-input-"+this.value).length > 0){
$("#new-input-"+this.value).remove();
}
return this.value
}).get();
var currSelected = $('.dm_list_data').val();
$.each(currSelected, function(index, item) {
if($("#new-input-"+item).length == 0){
$("#new-options").append("<input type='text' id='new-input-"+item+"' value='"+item+"'>");
}
});
});
Updated as needed
Add one new div <div id="new-options"></div>
I have some holidays days:
var holidayDays = ['24/12/2012', '2/1/2013', '14/2/2013'];
and code:
if( parseInt($("#date").val()) == holidayDays ) {
var freeday_value = ('holiday');
$('#holiday_day').val(freeday_value);
}
Who didn't work.
What I want to achieve: if in datepicker someone pick the date from above table, then on input field (#holiday_day) will be displayed word: holiday. What am I doing wrong?
Thanks for any help.
You could do like this :
if( $.inArray($("#date").val(), holidayDays) ) {
var freeday_value = 'holiday'; // Just removed () from your code
$('#holiday_day').val(freeday_value);
}
And Use .inArray to Compare in if () condition
You should check with jQuery.inArray function.
like
if( $.inArray($("#date").val(), holidayDays)>=0) {
var freeday_value = 'holiday';
$('#holiday_day').val(freeday_value);
}
You should try this
var holidayDays = ['24/12/2012', '2/1/2013', '14/2/2013'];
$("#date").datepicker({"dateFormat":"dd/mm/yy", "onSelect":CheckForHoliday});
function CheckForHoliday(dateStr){
if( $.inArray(dateStr, holidayDays)>=0) {
var freeday_value = 'holiday';
$('#holiday_day').val(freeday_value);
}else{
$('#holiday_day').val('');
}
}
Check This DEMO
if( $.inArray($("#date").val(), holidayDays) ) {
$('#holiday_day').val('holiday');
}
else{
$('#holiday_day').val('');
}
I have a list of checkboxes. Upon clicking on each of the checkboxes i am adding the value to the hidden variable. But the question is if I want to remove the value from the list upon unchecking the checkbox . How this piece cab be done
here is the hidden form variable
<input name="IDList[]" type="hidden" id="IDList" value="" />
and the jquery
$(".myCheckboxClass").change(function() {
var output = 0;
$(".myCheckboxClass").change(function() {
if ($(this).is(":checked")) {
output += ", " + $(this).val();
} else {
output = $.grep(output, function(value) {
return value != $(this).val();
});
}
$("#IDList").val(output);
});
});
Something like this: (demo) http://jsfiddle.net/wesbos/5N2kb/1/
we use an object called vals to store the info. ADding and removing as we check/uncheck.
var vals = {};
$('input[type=checkbox]').click(function() {
var that = $(this);
if (that.is(':checked')) {
console.log(this.name);
vals[this.name] = "In your Object";
}
else {
delete vals[this.name];
}
console.log(vals);
});
Following your logic, you could do this:
$('#IDList').data('value', []);
$(".myCheckboxClass").change(function() {
var list = $('#IDList').data('value');
if ($(this).is(":checked")) {
list.push($(this).val());
} else {
var indexToRemove = list.indexOf($(this).val());
list.splice(indexToRemove, 1);
}
$('#IDList').val(list);
});
But if you only care about the value of #IDList upon data submission or other actions, you probably want to consider an alternative approach: collating the checked values when you need them.
$('#form').submit(function() {
var list = $('input.myCheckboxClass:checked', this).map(function() {
return $(this).val();
}).get();
$('#IDList').val(list);
});
See both of the above in action: http://jsfiddle.net/william/F6gVg/1/.