How to change woocommerce class using javascript - javascript

I have a category with "woocommerce columns-3" class and I want to change it to "woocommerce columns-4". How can I do it using javascript?
I've tried this code without sucess:
<script type="text/javascript">
document.getElementById("main").classList.add('woocommerce columns-4');
document.getElementById("main").classList.remove('woocommerce columns-3');
</script>
HTML

You must target the correct element to make it work. In your code you are trying to target an element with the id main.
I would recommend using document.querySelector()
So your code would be:
<script type="text/javascript">
// select element
var ourElement=document.querySelector(".elementor-widget-container .woocommerce.columns-3");
ourElement.classList.remove('columns-3');
ourElement.classList.add('columns-4');
</script>

Related

How jquery get dynamic element id

I have jsp element id that is dynamically setup.
It looks like
id=<%= config.getName()%>
How can I get the id of those when I click them?
How to pass the element id to the function like:
$('****').click(function(){
}
Add c class name on your button.
<input type='button' class='myButtonClass' id=<%= config.getName()%> />
You can now use the class as selector.. You have, i guess 3 ways to get the id attribute.
$('.myButtonClass').click(function(){
// first option
console.log(this.id); // use this only, not $(this), .id will not work on jquery object
// second option
console.log($(this).prop('id'));
// third option
console.log($(this).attr('id'));
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$(".common").click(function()
{
alert(this.className);
alert(this.id);
// here u can get class name id value and pass to any function u want
// functinname(this.className);
});
});
</script>
<div id="vik" class="common">vik div</div>
<div id="cha" class="common">cha div</div>
you can use class to get dynamic id as:
$(".any").click(function(){
alert($(this).attr("id"));
});
Isn't there another unique attribute? for example, class name, tag name,...
if nothing, there is another way that create unique attribute value in the tag.
<div id=<%=config.getName()%> dynamicId="true"></div>

Override existing HTML Element attribute and property with Javascript

I was wondering if its possible to override existing HTML Element attribute and property accessors (getters and setters) with Javascript so that when html is rendered by browser all the assignments to certain attributes in the html code are preprocessed with custom functionality.
Here is an example :
<html>
<head>
<script>
// JS code would go here which would override default behavior
// for example if I wanted to reformat id="name" so its actually
// registered as id="pre_name" once browser renders the html
</script>
</head>
<body>
<!-- here we are assigning the 'name' to id , but behind the scene we really want it to be 'pre_name' -->
<div id="name"></div>
<script>
// when we try to access the id it would actually match the overwritten one
console.log(document.body.children[0].id) // would output pre_name
</script>
</body>
</html>
Is something like that possible and how?
I know that I can traverse the dom after it's rendered and change all of the ids, but I am wondering if its possible to intercept the assignment of properties and attributes and do it at that level before browser even renders the html.
Example I presented is just made up one to present the problem and make is simple to understand.
Thanks
Unfortunately this is not possible, you can only modify the name element after it is loaded.
So it would be something like this:
<body>
<!-- here we are assigning the 'name' to id , but behind the scene we really want it to be 'pre_name' -->
<div id="name"></div>
<script>
// right after
document.getElementById('name').id = 'pre_name';
</script>
<script>
// when we try to access the id it would actually match the overwritten one
console.log(document.body.children[0].id) // would output pre_name
</script>
</body>
or even
<body>
<!-- here we are assigning the 'name' to id , but behind the scene we really want it to be 'pre_name' -->
<div id="name"></div>
<script>
// or here
document.getElementById('name').id = 'pre_name';
// when we try to access the id it would actually match the overwritten one
console.log(document.body.children[0].id) // would output pre_name
</script>
</body>
You can use html data-* attributes for second value like;
<div id="name" data-second="pre_name"></div>
And then you can use,
var div = document.getElementById('name');
div.getAttribute("data-second");

Role of data-role attribute in html markup

I am new to Kendo UI library. When going through the tutorial i found the following declaration
<input id="JoiningDate" data-role="datepicker"/>
could you please explain ,what is the role of data-role attribute?
It is called declarative initialization.
Inside this attribute ,You are specifying the type of Widget you want to use (in this case it is a datepicker widget).
You can either use regular markup
<input id="JoiningDate" />
<script type="text/javascript">
$(document).ready(function ()
{
$("#JoiningDate").KendoDatePicker();
});
</script>
(or)
<input id="JoiningDate" data-role="datepicker"/>
<script type="text/javascript">
$(document).ready(function ()
{
kendo.init($("#JoiningDate"));
});
</script>
In summary:
"The value of the role data attribute is the name of the widget in lower case e.g. "autocomplete", "dropdownlist" etc."
You can find info here:
http://docs.kendoui.com/getting-started/data-attribute-initialization#example---initialize-a-kendo-ui-widget-using-a-data-attributes

Issue with Rails, haml + javascript on blur for a field objects

I'm trying to do a fairly straightforward select on blur for a particular field box. I'm not certain why (for my example) I can't simply get the box to change background color on a blur action.
Here is my code:
in the haml html
:javascript
$("person_email").blur(function(){
$("person_email").css("background-color","#D6D6FF");
});
<input id="person_email" name="person[email]" size="30" type="text" class="MB_focusable">
in the html
<script>
//<![CDATA[
$("person_email").blur(function(){
$("person_email").css("background-color","#D6D6FF");
});
//]]>
</script>
jQuery selector is not correct.
If selector is an id of the element, put # before its name and if it is a class, put . before its name in the jquery: $('#person_name').(property)
You Should add # to selector $("person_email") => $("#person_email")

How can I use CSS to show and hide multiple elements at once?

I found this article that looked like exactly what I wanted, but I can't seem to get it to work at all. Since it is well over a year old, I thought perhaps something may have changed, or that there might be a simpler way to do it by now.
That is to say, I cannot get the method I linked above to work. I copied and pasted exactly, and used <body onLoad="javascript_needed()"> because I wasn't sure where $(document).ready(function ()... was supposed to go. I am, sadly, quite unfamiliar with Javascript.
Use something like this;
<script>
$(document).ready(function(){
//Code goes in here.
});
</script>
Don't forget to load the jQuery library at the same time from http://jquery.com/
Also, you are going to want to read up on selectors.
Using $("#myElement") will select elements that have an id of "myElement".
Using $(".myElement") will select elements that have a class of "myElement".
So;
<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="doNotHideMe">Content</div>
<input type="button" class="ClickMe" value="click me"/>
<script>
$(function(){
$(".ClickMe").click(function(){
$(".hideMe").hide(250);
});
});
</script>
edit
If you want to link to the jquery library online then use;
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
If you download the library and insert the js file into your project then use;
<script src="/yourPathToTheLibrary/jquery-1.6.1.min.js" type="text/javascript"></script>
The $ syntax is all part of jQuery. If you wish to use jQuery then somewhere in your code, use a script tag as in your post:
<script>
$(function() {
$('.selector').hide(250);
});
</script>
If you want pure JavaScript, then there is a little more overhead. Not including the document ready stuff (which can be a lot of extra code to do it right...See example: here).
<script>
elements = document.querySelectorAll('.selector');
for(int i=0,len=elements.length;i<len;++i) {
elements[i].style.display = 'none';
}
</script>
You can put that in a function if you would like. To show the elements set the display attribute to ''.

Categories

Resources