i cant get the issue in my code , every thing working proper but issue is that when user click or focus first time on textbox correct img show .. this is incorrect but i cant solved this problem when user typing then after completing wher user correct type then show otherwise not shown . can any one help me regarding this issue . my complete jquery and html or css code are available in this link pls check and solved my issue
my code link
i think error on this function but icant get the issue
$('#step1 #fName').focus(function(){
if($('#step1 #fName').hasClass('error_Aplha')==true)
{
$('#step1 #fntick').removeClass('block');
}
else {
$('#step1 #fntick').addClass('block');
}
}).blur(function(){
if($('#step1 #fName').hasClass('error_Aplha')==true)
{
$('#step1 .fname_error').fadeIn(100).delay(2000).fadeOut(1000);
$('#step1 #fntick').removeClass('block');
}
else {
$('#step1 .fname_error').removeClass('block');
$('#step1 #fntick').addClass('block');
}
});
thanks in advance
Wow, that's a lot of code for a simple task. Change it so the checks are only done in the .keyup() and .blur() events of the INPUT elements.
Not 100% sure what the intended behaviour is, but this will probably get you going:
$(document).ready(function(e) {
var errorAlpha = function() {
var reg = /^([A-Za-z]+)$/;
var check = $(this).val();
if (reg.test(check) == true && check.match(reg) != null) {
// VALID
$(this).removeClass('error_Aplha');
$(this).next('img').addClass('block');
$(this).prevAll('span.tooltip2').stop(true).delay(500).fadeOut(400);
} else {
// INVALID
$(this).addClass('error_Aplha');
$(this).next('img').removeClass('block');
$(this).prevAll('span.tooltip2').fadeIn(500).delay(2000).fadeOut(1000);
}
};
$('#step1 #fName, #step1 #lName').on('keyup blur', errorAlpha);
});
Demo: http://jsfiddle.net/gU3PU/6/
Related
I have a Select2 that fetches its data remotely, but I would also like to set its value programatically. When trying to change it programatically, it updates the value of the select, and Select2 notices the change, but it doesn't update its label.
https://jsfiddle.net/Glutnix/ut6xLnuq/
$('#set-email-manually').click(function(e) {
e.preventDefault();
// THIS DOESN'T WORK PROPERLY!?
$('#user-email-address') // Select2 select box
.empty()
.append('<option selected value="test#test.com">test#test.com</option>');
$('#user-email-address').trigger('change');
});
I've tried a lot of different things, but I can't get it going. I suspect it might be a bug, so have filed an issue on the project.
reading the docs I think maybe you are setting the options in the wrong way, you may use
data: {}
instead of
data, {}
and set the options included inside {} separated by "," like this:
{
option1: value1,
option2: value2
}
so I have changed this part of your code:
$('#user-email-address').select2('data', {
id: 'test#test.com',
label: 'test#test.com'
});
to:
$('#user-email-address').select2({'data': {
id: 'test#test.com',
label: 'test#test.com'
}
});
and the label is updating now.
updated fiddle
hope it helps.
Edit:
I correct myself, it seems like you can pass the data the way you were doing data,{}
the problem is with the data template..
reading the docs again it seems that the data template should be {id, text} while your ajax result is {id, email}, the set manual section does not work since it tries to return the email from an object of {id, text} with no email. so you either need to change your format selection function to return the text as well instead of email only or remap the ajax result.
I prefer remapping the ajax results and go the standard way since this will make your placeholder work as well which is not working at the moment because the placeholder template is {id,text} also it seems.
so I have changed this part of your code:
processResults: function(data, params) {
var payload = {
results: $.map(data, function(item) {
return { id: item.email, text: item.email };
})
};
return payload;
}
and removed these since they are not needed anymore:
templateResult: function(result) {
return result.email;
},
templateSelection: function(selection) {
return selection.email;
}
updated fiddle: updated fiddle
For me, without AJAX worked like this:
var select = $('.user-email-address');
var option = $('<option></option>').
attr('selected', true).
text(event.target.value).
val(event.target.id);
/* insert the option (which is already 'selected'!) into the select */
option.appendTo(select);
/* Let select2 do whatever it likes with this */
select.trigger('change');
Kevin-Brown on GitHub replied and said:
The issue is that your templating methods are not falling back to text if email is not specified. The data objects being passed in should have the text of the <option> tag in the text property.
It turns out the result parameter to these two methods have more data in them than just the AJAX response!
templateResult: function(result) {
console.log('templateResult', result);
return result.email || result.text;
},
templateSelection: function(selection) {
console.log('templateSelection', selection);
return selection.email || selection.id;
},
Here's the fully functional updated fiddle.
On the "+17 more" link, I want it to open a url of my chosing for that specific date. I'm not finding the documentation to have an example, and I know this must be really easy (because everything else has been!).
Found it...
eventLimitClick: function(cellInfo) {
if (cellInfo.date) {
var newdate = moment(cellInfo.date).format('YYYY-MM-DD');
window.open('url-i-am-calling?variables, "_blank");
return false;
}
},
I've issue with ASP.NET MVC validation not working with Bootstrap Select Picker, If I remove the selectpicker class from dropdown list the validation working fine and if I added it the validation not working , Any help please
The MVC Code :
#Html.DropDownListFor(m => m.SelectedLocationID, Model.lstOfLocations, "Select Delivery Location", new { #class = " selectpicker", #placeholder = "" })
#Html.ValidationMessageFor(m => m.SelectedLocationID)
The Jquery Code With Valida-min.js
$(".SearchForm").validate({
ignore: ':not(select:hidden, input:visible, textarea:visible)',
rules: {
SelectedLocationID: {
required: true
}
},
errorPlacement: function (error, element) {
if ($(element).is('Select Delivery Location')) {
element.next().after(error);
} else {
error.insertAfter(element);
}
}
})
Thanks
I stumbled upon this question while searching for fix for same issue.
The problem arises from fact, that Bootstrap hides original select element and creates it's own elements to handle UI for dropdown list. In the meantime, jQuery validation by default ignores invisible fields.
I fixed this with workaround which combines changing validation ignore list and finding parent form. Final code snippet in my case looks like this
if ($(".selectpicker")[0]) {
$(".selectpicker").selectpicker();
$('.selectpicker').parents('form:first').validate().settings.ignore = ':not(select:hidden, input:visible, textarea:visible)';
}
There still could be potential issues, but for my needs this solution works good enough.
The problem is caused by the display:none property given from bootstrap select skin to the original select (jQuery validate ignores hidden fields).
It could be avoided working only with CSS keeping back visible the original select but giving it some properties to avoid visibility
select.bs-select-hidden, select.selectpicker
{
display:block !important; opacity:0; height:1px; width:1px;
}
I guess, editing of bootstrap-select.js may solve this issue permanently.
I have tried something like this:
$(document)
.data('keycount', 0)
.on('keydown.bs.select', '.bootstrap-select [data-toggle=dropdown], .bootstrap-select [role="listbox"], .bs-searchbox input', Selectpicker.prototype.keydown)
.on('focusin.modal', '.bootstrap-select [data-toggle=dropdown], .bootstrap-select [role="listbox"], .bs-searchbox input', function (e) {
//Validation handler: Kartik
var $thisParent = $(this).parent(".bootstrap-select");
if ($thisParent.find("ul").find("li:first").hasClass("selected")) {
if ($thisParent.next("span").length > 0)
$thisParent.next("span").css("display", "block");
}
else {
if ($thisParent.next("span").length > 0)
$thisParent.next("span").css("display", "none");
}
e.stopPropagation();
});
Its working fine to me.
I'm beginner to TweetSharp and I'm using the ListTweetsOnHomeTimeline() method of TweetSharp , sometimes this method works fine and sometimes its return null.
Below is my code
IEnumerable<TwitterStatus> homeTweets = service.ListTweetsOnHomeTimeline(new ListTweetsOnHomeTimelineOptions());
if (homeTweets != null)
{
foreach (var item in tweets)
{
Console.WriteLine("{0} says '{1}'", item.User.ScreenName, item.Text);
}
}
Any help will be appreciated.
I had the same problem because I was passing SinceId=0 as option (=null works fine); As I suppose you have modified your actual code before posting, this might be your problem. Or another invalid option that the Twitter API doesn't like.
Here is the piece of code that works for me:
//Persist lastMessageIdProcessed accross calls to prevent
//processing the same messages again and again
long? lastMessageIdProcessed=null;
IEnumerable<TwitterStatus> tweets=service.ListTweetsOnHomeTimeline(new ListTweetsOnHomeTimelineOptions {
SinceId=lastMessageIdProcessed>0?lastMessageIdProcessed:null,
Count=100
});
if(tweets!=null) //Shouldn't happen
{
foreach(TwitterStatus tweet in tweets)
{
lastMessageIdProcessed=tweet.Id;
//Do your stuff here
}
}
I tried passing SinceId = null and it solved me the problem, like so:
IEnumerable<TwitterStatus> _tweets = _twitterService.ListTweetsOnHomeTimeline(new ListTweetsOnHomeTimelineOptions { SinceId = null });
But only for a little while. I noticed that this is recurring, every now and then the request returns null, but if I try later, it works. I'm guessing there is a request limit.
I've found this: https://dev.twitter.com/docs/rate-limiting/1.1
I have this code that triggers when a form is submitted:
$("form").submit(function (e) {
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("Address").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$("#LatitudeLongitude").val(results[0].geometry.location);
$("form").submit();
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
$('form').unbind('submit');
return false;
});
What it does: it calls google geocoding service to translate an address into latitude/longitude which is set into a hidden field of the form. If there is a result, then the form is submitted.
The problem is that if validation fails (for instance a required field has not been set) then the call to geocoding is still made. Moreover, if I click a second time on the submit button, even if the required field has not been set, the form is posted.
How can I call the geocoding service only if the unobtrusive validation has been successful?
Rather than attaching to the submit() event, you need to capture an earlier event, and exercise control over how to proceed.
First, let's assume your original button has an id of submit and you create a new submit button with an id of startSubmit. Then, hide the original submit button by setting the HTML attribute display="false". Next, bind to the click event of your new button, and add your code, as modified:
$("#startSubmit").live("click", function() {
// check if the form is valid
if ($("form").validate().form()) {
// valid, proceed with geocoding
var geocoder = new google.maps.Geocoder();
var address = $("#Address").val();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$("#LatitudeLongitude").val(results[0].geometry.location);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
// proceed to submit form
$("#submit").click();
}
}
return false;
});
This will invoke validation, so that geocoding will only occur if the form is valid, then, after geocoding has returned a response, it will submit the form by incoking the click event on the submit button.
I implemented something similar (with thanks to cousellorben), in my case I wanted to disable and change the text of the submit button but only on success. Here's my example:
$("#btnSubmit").live("click", function() {
if ($("form").validate().form()) {
$(this).val("Please Wait...").attr("disabled", "disabled");
$("form").submit();
return true;
} else {
return false;
}
});
The only difference is that my example uses a single button.
This answer may help you, it gives a quick example of how a function is called when the form is invalid, based on the use of JQuery Validate, which is what MVC uses.