I have an asp.net kendo grid and inside i have an element with a class. I want to replace this class with another by clicking on a link that i put on right side.
So i used jquery to do it but it's not seem to be working.. and inside the console of chrome i don't get any error. I've tried to put alert but it's not triggering.
If someone could help here is my jquery
function changetoOK() {
grid.tbody.find("td").onclick(function (index) {
if ($("a").hasClass('changeToOk'))
{
$(this).removeClass('customClassVerif');
$(this).addClass('customClassOK');
}
});
}
also i add to create a fake link with an html helper to put it inside my grid so i have this in the grid :
columns.Template(#<text></text>).ClientTemplate(#Html.EmptyLink("Passer à OK").ToHtmlString());
and this in a class
public static class MyHtmlExtensions
{
public static MvcHtmlString EmptyLink(this HtmlHelper helper, string linkText)
{
var tag = new TagBuilder("a");
tag.MergeAttribute("class", "changeToOK");
tag.MergeAttribute("href", "javascript:void(0);");
tag.SetInnerText(linkText);
return MvcHtmlString.Create(tag.ToString());
}
}
[EDIT]
I think it could be good to know. I've made some change inside my code first and here is some explenation.
I have an element inside the grid with a class and i want that class to change to another when i click my link.
I think the problem is because you try use 'onclick' method that doesn't work in jQuery.
Try use .on('click', function(index) ...
.onclick isn't a jquery method, try .click instead, like so:
function changetoOK() {
grid.tbody.find("td").click(function (index) {
if ($("a").hasClass('changeToOk'))
{
$(this).removeClass('changeToOk');
$(this).addClass('customClassOK');
}
});
}
This will bind the click event to the td elements, although bear in mind all the function you've provided will do is find all a elements and see if any of them has the class changeToOk. The only reason I mention this is because you're giving the click function an index that is then never used.
This will work as expected :
function changetoOK() {
grid.tbody.find("td").on('click', function (event) {
if ($("a").hasClass('changeToOk'))
{
$(this).removeClass('changeToOk');
$(this).addClass('customClassOK');
}
});
}
So for everyone that want to do the same as me, finaly find out how.
All you have to do is this :
$(document).on('click', '.changeToOK', function () {
$(this).parent().parent().find('.verifyCell').removeClass('customClassVerif').addClass('customClassOK');
})
I added a second class to my first element and it works !
Thanks to everyone who tried to help me.
Related
I'm working on a WordPress website.
All I want to do, add the attribute onclick="off() to an existing div class via javascript (so that the div always has this attribute when the site is loaded). the content plugin I use creates div's automatically, so instead of editing the source code each time, this seems like a nice and fast solution.
right now I'm trying this, but it doesn't work (i know almost nothing about js):
function myfunction() {
document.getElementById("#content_al").setAttribute("onclick","off")
}
I read many threads but didn't get it to work, can anyone help me :)?
off in setAttribute should be off()
Do not pass # in document.getElementById("#content_al"), instead pass plain id i.e. content_al
function myfunction() {
document.getElementById("content_al").setAttribute("onclick", "off()")
}
function off() {
console.log("clicked on off!");
}
myfunction();
<div id="content_al"> Some Content </div>
try jquery. it's easy
jQuery("#content_al").click(function(){
//do action
});
this code defines a click event for your element and you can write your action to run after event fired.
For adding an event handler you should use addEventListener. Below is how you can do it with vanilla javascript.
function myfunction() {
document.getElementById("content_al").addEventListener("click",off)
}
where off is a function
Below is a working snippet. Hope this helps :)
function toggleDisplay() {
let display = document.getElementById("content_al").style.display;
document.getElementById("content_al").style.display = display == "none" ? "block" : "none";
}
function myfunction() {
document.getElementById("hide").addEventListener("click", toggleDisplay);
}
myfunction();
<div id="content_al"> Some Content </div>
<button id="hide">Hide/Show</button>
I am using the following coding for the script in external file
function DiableLink(elem){
console.log($(elem).attr('type'));
if($(elem).hasClass('disabled')) {
return false;
}
else {
$(elem).addClass('disabled');
}
}
Used as follow in the html
<a onClick="DiableLink(this);" class="hid" href="somelink.jsp"></a>
I used the same function using ID as follow
$(function(){
$('.hid').click(function(){
var link = $(this);
if(link.hasClass('disabled')) {
return false;
}
else {
link.addClass('disabled');
}
});
});
which is perfectly working (I got it from the stackoverflow).
But i don't know why calling in onclick event doesn't work. Please can anyone help? where i got wrong
You need to keep onclick="" atrribute empty if you are using a event handler instead of a function.
Demo
EDIT: Your solution actually works with JS Bin
I wrote:
I'd call the function inside href:
Click
But it wouldn't work if you want to pass the anchor tag element through href attribute. So this will NOT work:
Click
In this case you have to use the onclick event (inline or in a separate file, as I wrote before).
I need some help so I hope you could help me. I have a table which rows are added this way after click on a button.
var row = "<tr><td><input class='check_box' type='checkbox'></input>some text<td></tr>";
$('#pl_table').append(row);
I also have jquery function that adds a class to a row when checkbox is selected. So this class has a .css definition for background color.
$('input:checkbox').on('change', function() {
if(this.checked) {
$(this).closest('tr').addClass('selected');
}
else{
$(this).closest('tr').removeClass('selected');
}
}
The problem is on('change') event is not called for rows added. And it is called for rows that already exist when loading the page.
why does this happend? What is wrong on my code? Thank you for your help.
I have faced the same situation and the steps I followed to solve this are given below,
a. Put $('input:checkbox').on('change' inside a method as shown below,
function BindDynamicEvents()
{
$('input:checkbox').off('change').on('change', function() {
if(this.checked) {
$(this).closest('tr').addClass('selected');
}
else{
$(this).closest('tr').removeClass('selected');
}
}
}
b. Call this method after the $('#pl_table').append(row) as shown below,
$('#pl_table').append(row);
BindDynamicEvents();
This will solve the problem.
Note: please include .off('change') as shown in code to avoid the event being fired multiple times.
If you want to keep the current syntax try this:
$('#pl_table').on('change', 'input:checkbox', function () {
if (this.checked) {
$(this).closest('tr').addClass('selected');
}
else {
$(this).closest('tr').removeClass('selected');
};
This way you don't add event on each input, you only add it on the table and fire it when input is changed. I prefer this for dynamical generated elements.
Try this:
var row = "<tr><td><input class='check_box' type='checkbox' onchange="change(this);"></input>some text<td></tr>";
$('#pl_table').append(row);
function change(element)
{
if(element.checked) {
element.closest('tr').addClass('selected');
}
else{
element.closest('tr').removeClass('selected');
}
}
I'ts much better to use:
$(document).on('change','#elemnt',function(){
//do something here
});
So there's no need to call BindDynamicEvents(); every time a new row is added.
As of jQuery 1.4, .after() supports passing a function that returns the elements to insert.
Refer this link.
I am using livequery for applying jquery chosen plugin (for adding tags) on dynamically added elements. I tried :
$(".chz").livequery(function () {
$(this).chosen();
});
Through above code, choose plugin is not applying. But if i tried this :
$(".chz").livequery('click', function () {
$(this).chosen();
});
Than it works properly. But in my case i can`t use click event because until user click over the element the plugin is not applied. What i am doing working in first case ?
try something like this
$("body").on('click', '.chz'function () {
$(this).chosen();
});
when we use chosen plugin then we set class like this
class ="chzn-select"
then
$(function() {
$("chzn-select").chosen();
});
i think this will help you
i've got some JS library, thats on click to the html element changes its class. I would like to write function, that would check if class had been changed, and then add image to this element. Can you help me with this?
thanks!
If you're using jQuery try this:
$(document).ready(function() {
// get the class that's set on page load
var current = $('#element').attr('class');
$('#element').click(function(e) {
if ($(this).attr('class') != current) {
// class has been changed, do something
}
});
});
Here is an example at jsFiddle.net.
Disclaimer: Without more details about which elements have onclick event listeners that change which elements` class, I cannot give you real working code for you situation. Instead, I can only give you some logic which I just did.
$("#elemID").click(function() {
$("#div").removeClass('a');
$("#div").addClass('b');
if ($("#div").attr('class') == 'b') {
$("#div").append("<p>Hello</p>");
}
});
Or
$("#elemID").click(function() {
$("#div").removeClass('a');
$("#div").addClass('b');
if ($("#div").hasClass('b')) {
$("#div").append("<p>Hello</p>");
}
});
What you can proceed with Krystian is that everytine u click on an element, add a class "say classClicked" to it. Then with the the help of hasClass u can find out the class attached to that element. If is satisfies your condition, add image.
Or if the class changes on each click and you know the name of the changed class, just check using
if($(this).hasClass("b")){
do your action
}
Hope this helps.