I'm working with some form validation.
I run the validation on a .blur event for each input.
During each validation, I create a validation summary at the top of the page, listing out all of the errors.This is currently working, with the exception that I can not clear errors from the list.
My question, how can I remove the errors list on each .blue event.
I've added a comment where I've tried to clear the error list.
My Code:
<script>
$(function () {
$("#EditPhone input").blur(function () {
var a = $(this).parent();
var b = a.find(".k-tooltip").text();
$(".validation-summary-errors ul").html(""); // This does not work
$(".k-tooltip").each(function () {
var c = $(this).text();
$(".validation-summary-errors").show();
$(".validation-summary-errors ul").append("<li>" + c + "</li>");
});
});
});
</script>
<div class="validation-summary-errors" style="display:none;">
<ul>
</ul>
</div>
You can try empty() method for example:
$(".validation-summary-errors ul").empty();
You can try remove() method for example:
$(".validation-summary-errors ul li").remove();
Related
I have a div with class item that I want to clone as many times as the user click on a div with add id
Here is my HTML
<div class="clone">clone me</div>
<div id="add">add</div>
And here is my JavaScript code
$(function(){
var request = $('.clone').clone();
$('.clone:last').addClass('test'); // i don't want my new div have the new added class test just clone
$('#add').click(function () {
console.log('clicked');
request.insertAfter($('.clone:last'));
// $('.item:last').after(request); // this doesn't work as well
});
});
it print to the console clicked as many times as I click on add
But doesn't clone the div more than once
i will be making changes to clone div that don't wanna be done to the new ones
As request refers to same element, move it inside the click handler. Also use :first selector to select the first element.
Use
$('#add').click(function() {
//Create then object the click handler
var request = $('.clone:first').clone();
request.insertAfter($('.clone:last'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clone">clone me</div>
<div id="add">add</div>
If you don't want changes to the original one to affected the new one. Create object as you have created originally. However create a clone() before using .insertAfter()
var request = $('.clone:first').clone();
$('#add').click(function() {
request.clone().insertAfter($('.clone:last'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clone">clone me</div>
<div id="add">add</div>
Put the request inside the function, so that it clones again and again. Right now the request contains only one element and if you are inserting it after (which it is already), there's no effect:
$(function(){
$('#add').click(function () {
var request = $('.clone').clone().removeClass("clone");
console.log('clicked');
request.insertAfter($('.clone:last'));
// $('.item:last').after(request); // this doesn't work as well
});
});
Or you can do same thing without clone.
$(function(){
var request = $('<div class="clone">clone me</div>');
$('#add').click(function () {
console.log('clicked');
request.insertAfter($('.clone:last'));
});
});
There're 2 issue:
You have to put var request = $('.clone:first').clone(); inside.
You need to clone only first div so use $('.clone:first').clone().
Here you go:
$('#add').click(function () {
var request = $('.clone:first').clone();
console.log('clicked');
request.insertAfter($('.clone:last'));
});
JS FIddle DEMO
I have a <div> element that does not appear on the page unless some function is activated. I want to remove this <div> after it appears on the page.
how do I run my JavaScript code when and only when this <div> element is added ?
I am new at this and would appreciate some help. Thanks.
ps. element is generated by jquery and only has classname.
Detailed explanation:
I implementing a excel export in an existing web application.
I am using a form surrounding filters for search and a ajaxgrid gridstate.
This form is submitted to a controller that has the corresponding viewmodels.
My code for submitting the form is this:
$(function () {
$('div.btn-group #export-citizen-list').on('click', function () {
var gridstate = $('#citizenIndexGrid').ajaxgrid('getState');
var form = $('#create-citizen-csv-file');
// add ajaxgrid state to post data
$.each(gridstate, function (k, v) {
form.addAjaxgridHidden(k, v);
});
// submit entire form, with ajaxgrid state
form.submit();
// remove all hiddenfields that belongs to ajaxgrid
form.find(":hidden.ajaxgrid").remove();
document.getElementById("filterSearch").className = "default ui-button ui-widget ui-state-default ui-corner-all";
$('#filterSearch').removeAttr('disabled');
// function that removes unwanted <div> ---->$('.ajaxWorkingNotification').slideUp();
})
jQuery.fn.addAjaxgridHidden = function (name, value) {
return this.each(function () {
var input = $('<input>').attr('type', 'hidden').attr('name', name).attr('class', 'ajaxgrid').val(value);
$(this).append($(input));
});
};
});
When I submit my form the excel is downloaded and the unwanted <div> is inserted in the DOM. The thing is that I don't know when the postback is returned in this case. And therefore I don't know when this <div> is inserted.
Hope this clarifies my issue.
You can do something like this.
// Assuming your element is created by this line ...
$(".your_elements_class_name").ready(function() {
// write code here
// this is executed after the element is created and added to DOM
})
You can do it by implement a listener on DOM node insertion event.
There was an explanation here on how to detect DOM node insertion & pure javascript code to demonstrate how it works
And if you like a jQuery version, then here is the sample code that I translated from above link.
HTML:
<input type="button" id="addme" value="Add"/>
<div id="container">
</div>
CSS:
#keyframes nodeInserted {
from { opacity: 0.99; }
to { opacity: 1; }
}
#container div#mydiv {
animation-duration: 0.001s;
animation-name: nodeInserted;
}
Javascript:
$(function () {
$('#addme').click(function () {
var div = $('<div/>').attr('id', 'mydiv').html("Hello");
$('#container').append(div);
});
var handler = function (e) {
if (e.originalEvent.animationName == "nodeInserted")
alert("An HTMLElement has been inserted to DOM tree !")
};
var eventSignature = 'MSAnimationStart';
if ($.browser.webkit) eventSignature = 'webkitAnimationStart';
if ($.browser.mozilla) eventSignature = 'animationstart';
$(document).on(eventSignature, handler);
});
JSFiddle Demo
I have more similar elements in HTML which are being added continously with PHP. my question is the following:
With jQuery, I would like to add a click event to each of these <div> elements. When any of them is being clicked it should display it's content. The problem is that I guess I need to use classes to specify which elements can be clickable. But in this case the application will not be able to decide which specific element is being clicked, right?
HTML:
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
jQuery try:
$("test").on("click", function()
{
var data = ???
alert(data);
});
UPDATE - QUESTION 2:
What happens if I'm placing <a> tags between those divs, and I want to get their href value when the DIV is being clicked?
I always get an error when I try that with this.
this refers to the element triggering the event. Note that it is a regular js element, so you'll need to convert it to a jQuery object before you can use jQuery functions: $(this)
$(".test").on("click", function()
{
var data = $(this).text();
alert(data);
});
Like this:
$(".test").on("click", function(event)
{
var data = $(event.target);
alert(data.text());
});
this variable contains the reference of current item
$(document).ready(function() {
$(".test").click(function(event) {
var data = $(this).text();
alert(data);
});
})
;
The class selector in jquery is $(".ClassName") and to access the value, use $(this) as such:
$(".test").on("click", function(){
var data = $(this).text();
alert(data);
});
You can use this inside the function which mean clicked div
DEMO
$(".test").on("click", function () {
alert($(this).html());
});
I have been trying to create a form which changes depending on the users entry. So far I have been successful in using a radio input to change which content is to be shown, but I am having trouble editing the JS to work with a drop down menu.
HTML
<div class="show-and-hide-content">
<select>
<option></option>
<option data-type="true">true</option>
<option data-type="false">false</option>
</select>
<div class="hidden content content-true">You have selected true.</div>
<div class="hidden content content-false">You have selected false.</div>
</div>
CSS
.hidden {
display:none;
}
Javascript
$(function () {
$('.show-and-hide-content').each(function (i) {
var $row = $(this);
var $selects = $row.find('select');
$selects.on('change', function () {
var type = $(this).attr('data-type');
$row
.find('.content').hide()
.filter('.content-' + type)
.show();
});
});
});
Working radio button JSFiddle
Non working drop down JSFiddle
I know that the JQuery is finding the right elements and is changing the display of them, but it never changes the display to make them visible. I think the problem may be that the JS isn't correctly getting the data-type variable from the option's.
I want the JQuery to work as intended and show the correct divs based on the users selection.
How can I amend the code to do this? Thanks for helping.
You now got:
var type = $(this).attr('data-type');
Since the function is called on the <select>, you select the data-type attribute of the <select> (which is defined), and not from the <option>.
So, you'll need to find the selected <option>:
var type = $(this).find('option:selected').attr('data-type');
Check the updated Fiddle.
[EDIT]
If you want to simplify your code, you could use this:
$(function () {
$('.show-and-hide-content select').on('change', function() {
$(this).parent().
find('.content').hide()
.filter('.content-' + $(this).find('option:selected').attr('data-type') ).show();
});
});
Demo.
Or change your select data-type to value and use
var type = $(this).val();
DEMO
Try this one
$(function () {
$('#select').on('change', function () {
var selctedval = $(this).val();
$('.content').hide();
$('.content-' + selctedval).show();
});
});
This will use whatever value you have in the "data-type" attribute and match it to the "content-" class that you have on the message. If there is no matching message then, no message will show.
$('.show-and-hide-content select').on('change', function(){
var selected = $(this).find('option:selected').data('type');
$('.content').addClass('hidden');
$('.content-' + selected).removeClass('hidden');
});
Here is a fiddle
I want to append the text in last column of the table (grid like structure). Like below
When Click on Add button i want to append some text in last column adjacent to Add button. I am getting repated text on click of Add as in picture above.
This is what i have tried so far (one step away):
$(document).ready(function(){
$('.new').on('click', function(){
var recId= $(this).parents("#myTable td:last-child");
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
});
});
Can someone help me rectify this, Sample JSFiddle
Edit for Clarity in question
Sometext added in last column is dynamic and click event on Add button should fire multiple times.
Try .one()
Attach a handler to an event for the elements. The handler is executed
at most once per element per event type.
$('.new').one('click', function () {
fiddle Demo
Updated after OP's comment.
fiddle Demo
$(document).ready(function () {
$('.new').on('click', function () {
var recId = $(this).parents("#myTable td:last-child");
if (recId.text().indexOf("Sometext") === -1) { //if it contains Sometext it will not append it again but if it's a new value it will append it
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
}
});
});
Better code
fiddle Demo
$(document).ready(function () {
$('.new').on('click', function () {
var recId = $(this).parent();
recId.find('b').remove();
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
});
});
Try:
$(document).ready(function(){
$('.new').on('click', function(){
var recId= $(this).parents("#myTable td:last-child");
recId.find('b').remove(); //remove text
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
});
});
DEMO here.
i did this to your JS.
$(document).ready(function(){
$('.new').on('click', function(){
var recId= $(this).parents("#myTable td:last-child");
if (!recId.hasClass("changed")) {
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
recId.addClass("changed");
}
});
});
checking if the td has the class "changed", if not: add text, change bgcolor and the add the class "changed" so the event can fire but won't do anything to the same td twice.