I've looked for the solution to this but nothing seems to be working.
I have an SKU within a span with a class of "sku". Some of the SKUs have periods before the SKU to allow for adding more than one product with the same SKU.
I'd like to hide the periods when the SKU is displayed though.
This is my code:
<span class="sku">..THESKU</span>
And this is the jQuery I am using:
<script>
$('span.sku').html($('span.sku').html().replace('.',''));
</script>
Is the right, or am I missing something? Thanks.
Your code will only replace one dot '.'. You can use regex to remove all the dots instead:
const skus = $('span.sku');
$('span.sku').each(function() {
const text = $(this).html();
const cleaned = text.replace(/\./g,'');
$(this).html(cleaned);
})
Hope this helps!
EDIT: Updated as suggested by #Taplar
I just wanted to give an update with this. I still couldn't get the periods to hide, but I found a way to have duplicate SKUs so there was no longer a need for this. Thanks for all your help.
If anyone has a similar issue, the code I used is below which I added to the themes functions file.
add_filter( 'wc_product_has_unique_sku', '__return_false', PHP_INT_MAX );
Related
I am a total beginner. I have a form in HTML and am trying to calculate a specific value using jQuery. I want this value to be displayed in paragraph <p id="final"></p> under the submit button, but am actually not sure, why my code isn't working.
jQuery(document).on("ready", function() {
jQuery("final").hide();
jQuery("#form").submit(function(e){
e.preventDefault();
const data = jQuery(this).serializeArray();
/*
some calculations
*/
$('#final').html($('#final').html().replace('','result + " text"'));
jQuery("#final").show();
}
}
Do you have any idea, what could I be doing wrong??
You've got a several issues here.
Firstly, don't mix jQuery and $. If you're using the former, it's normally to avoid jQuery's alias, $, from conflicting with other code that might use $.
Secondly, you don't actually do any calculation (from what I can see in your code), so I'm not sure what you're wanting to output. I'll assume you're going to fill that in later.
Thirdly, jQuery('final').hide() is missing the # denoting you're targeting by element ID.
Fourthly, the line
$('#final').html($('#final').html().replace('','result + " text"'));
...doesn't quite do what you think it does. For one thing, it makes no reference to your data variable. And running replace() on an empty string doesn't make much sense.
All in all I'm guessing you want something like (note also how I cache the #final element - that's better for perforamnce):
jQuery(function() { //<-- another way to write a document-ready handler
let el = jQuery('#final');
el.hide();
jQuery("#form").submit(function(e){
e.preventDefault();
const data = jQuery(this).serializeArray();
let calc = 5+2; //<-- do what you need to here
el.html(calc).show();
}
}
Guessing result is your variable and your above code is your current status, you should fix the html replacement to something like (depending on your acutal usecase):
$('#final').html(result + " text"));
How to remove anchor tag '' in java script?
When I inspected the page, below is the screenshot of what I got
Here is my code:
<div class="dropdownm1-content">
<b>SHOP ALL</b>
<b>SHOP BY CATEGORY</b>
<p class="mn_category">
Just get the Element by using the ID of it and then remove it with the remove() function. Like so:
var removeanchor = getElementById('YOURANCHORTAGID');
removeanchor.remove();
or without creating a variable:
getElementById('YOURANCHORTAGID').remove();
(replace YOURANCHORTAGID with the id of your anchortag). If you want to trigger this after an action just create a function and trigger it with the action you want :).
for further information check the mdn docs:
https://developer.mozilla.org/de/docs/Web/API/ChildNode/remove
You may should add some more information to your question for a more precise answer. However, for the time being this may helps you out.
If you try to use it, pay attention to the fact, that I only adressed the first Element with the class 'text_main' and only the first of its children with 'a' Tag. You may need to change this, according to your code.
// Removing a specified element without having to specify its parent node
container = document.getElementByClass("text_main")[0];
var node = document.getElementsByTagName("a")[0];
if (node.parentNode) {
node.parentNode.removeChild(node);
}
Further information:
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
For that specific link you showed:
document.querySelector('.dropdownm1-content .text-main a:first-child').remove()
Though I'd highly recommend curing the sickness, not the symptom.
i have a word file with 100 different hyperlinks.
Eg:
http://word1.com
http://word2.com
upto http://wordn.com
I have to create a html file with these n links.
like word1 which has a hyperlink to word1.com, word2 which has a hyperlink to word2.com etc
Any easy way to do this? rather than copy pasting the link and writing the code?
You could use a JavaScript loop to do this. Such as the for loop:
for (var i=0;i<100;i++)
{
document.write('Word' + i + '');
}
like so...
I don't know if this is what you're looking for, but i hope I helped!
You can use a simple loop and create an anchor in each run. Use the .setAttribute("href", "word"+count+".com") where count keeps incrementing, using Javascript. See fiddle
i think the title is pretty self explanatory.
I have many divs generated from php code that take products from database.
the problem is when i drag them between two containers(also divs) i cant return all of them back to the first container because the products div id is same and it takes it as repeat from container 1 --> 2 and not backwards from contaner 2 --> 1.(2 containers have and all product divs have same id).
i can solve this by adding +1 to the divs id of the products(so they have different id) but that way i cant use the id from the css. Any solution?
here is the js code
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
if (ev.target.id == "container"){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}}
</script>
thanks in advance
ID must be unique for the HTML to be valid. When you duplicate IDs, strange things happen. Even if you manage to get it working in one browser, others may handle things differently. You could try using classes instead.
You can't have two divs with the same id. Try using classes.
Your drop() function should be something like this:
function drop(ev){
if ( ev.hasClass('container') ) {
// do some stuff
}
}
You can add classes dynamically with jQuery .addclass() method.
i have solved this by using incremented id for the div generated by php. how ever tha was not one of the solutions i wanted.
thanks for trying to help
The reason I want to use the together is that I want to hide the content like display: none does, without leaving any whitespace as visibility: hidden does.
At the same time I want the hidden content not to be copied when the user copies the entire table from the webpage, not because it is sensitive information but because the user hid the field and therefore doesn't want it copied. visibility: hidden doesn't copy but display: none does, so I have quite a dilemma.
Anyone know a solution?
Edit:
What I ended up doing was just what was suggested, save the information as Javascript (as it is not sensitive information anyways) and create/remove dynamically with Javascript.
I do not think giving the element visibility: hidden prevents the user copying the information in the table, although this may be browser specific behavior. Have a look at the test I've set up: http://jsfiddle.net/a9JhV/
The results from Firefox 3.6.8 on Windows 7 is
Copy ME! Don't copy me :( Copy ME! Copy ME!
Copy ME! Don't copy me :( Copy ME! Copy ME!
Which doesn't work as expected.
I've cooked up some code, it took the quite a bit work of cook up... have a look here: http://jsfiddle.net/a9JhV/7/
It uses jQuery to hide and show the table columns - actually removes them from the DOM, not just play around with their visibility and whatnot. Whee!
Why not remove the node from the page? You could accomplish this by using:
<script type = 'text/javascript' language = 'JavaScript'>
document.getElementById('yourDivId').innerHTML = '';
//OR
document.removeChild(getElementById('yourDivId')); //(I think this is right...document might need to be replaced by the div's parent)
</script>
You should remove the "hidden" DOM object using javascript and then recreate it again if user wants it back. Data from deleted records can be stored in session storage or hidden inputs for example.
If you want elements HIDDEN from the source, place them in a separate text file and load it using an ajax-like call... this will prevent the html from being in the source.
If you place a clear image OVER the content they also will not be able to highlight it easily (and by using javascript you can likely disable their ability to do a ctrl+a)
hope that helps!
It's a good idea to create an object to represent the table:
var myTable = function(tableName){
// If you want to assign columns dynamically you could create this.addColumn();
this.Columns = new Array(
new Array("row1","row2","row3","row4"),
new Array("row1","row2","row3","row4")
);
this.reBuild = function(){
for (col in this.Columns){
for(row in this.Columns[col]){
// put the cell in the table
}
}
};
};
I didn't test this code, it should just illustrate the gist of storing and building a table.