When I call this javascript function, I get an error saying "Uncaught SyntaxError: Unexpected token }".
function completed(num, title)
{
if(localStorage.getItem(num + "done" + title) === 'true')
{
document.getElementById("completedclick" + title).style.color="#004600";
document.getElementById("completed" + title).style.background="-webkit-linear-gradient(left, red, white)";
colored = false;
localStorage.setItem(num + "done" + title, false);
}
else
{
document.getElementById("completedclick" + title).style.color="#8B1A1A";
document.getElementById("completed" + title).style.background="-webkit-linear-gradient(left, green, white)";
colored = true;
localStorage.setItem(num + "done" + title, true);
}
}
The function is called by this section of code:
<div class='completed".$done."' id='completed".$passer."'>
<a href='#!' id='completedclick".$passer."' onclick='completed('{class1}', ".$passer.")'>
Completed
</a>
</div>
{class1} gets replaced by the appropriate class when the template is filled out, and $passer is a variable gotten from a database.
Please help, I have tried everything, but can't seem to find the problem.
<div class='completed".$done."' id='completed".$passer."'>
<a href='#!' id='completedclick".$passer."' onclick='completed('{class1}', ".$passer.")'>
Completed
</a>
</div>
Should be:
<?php
echo "<div class='completed".$done."' id='completed".$passer."'><a href='#' id='completedclick".$passer."' onclick='completed('".$class1."', ".$passer.")'> Completed </a></div>";
?>
From what I can tell anyway. It may need some tweaks, but the general idea is that you're missing all <?php ?> tags and trying to use php variables here.
Cheers!
Edit
May need some ' or " fixes
Looks like you are having a mixup with single and double quotes. Try fixing line 2 of this block:
<div class='completed".$done."' id='completed".$passer."'>
<a href='#!' id='completedclick".$passer."' onclick='completed('{class1}', ".$passer.")'>
Completed
</a>
</div>
to be
<div class='completed".$done."' id='completed".$passer."'>
<a href='#!' id='completedclick".$passer."' onclick='completed("{class1}", ".$passer.")'>
Completed
</a>
</div>
Ok, change this
<div class='completed".$done."' id='completed".$passer."'>
<a href='#!' id='completedclick".$passer."' onclick='completed('{class1}', ".$passer.")'>
Completed
</a>
</div>
To
<div class="completed<?php echo $done;?>" id="completed<?php echo $passer;?>">
<a href="#!" id="completedclick<?php echo $passer;?>" onclick="completed('{class1}', '<?php echo $passer;?>')">
Completed
</a>
</div>
Mind the quotes as well. I would also recommend using a - between the html and php parts of the classes such as this.
class="completed-<?php echo $done;?>"
It just reads better that way is all.
Related
Here is the problem which I am facing.
echo "<script type='text/javascript'>window.insertCartInHeader({$cart});</script>";
$cart variable is holding HTML block of code.
I get Uncaught SyntaxError: Unexpected token <
Solution?
window.insertCartInHeader = function(cart){
console.log(cart)
var list = $("#top-links").append('<ul id="cart-header"></ul>').find('#cart-header');
list.append('<li>'+cart+'</li>');
}
Here is the string which I am passing
'<div id="cart">
<button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="heading dropdown-toggle">
<div class="pull-left flip"><h4></h4></div><span id="cart-total">0 item(s) - £0.00</span></button>
<ul class="dropdown-menu">
<li>
<p class="text-center">Your shopping cart is empty!</p>
</li>
</ul>
</div>
' (length=402)
You need to add quotes ("), to let javascript know it's a string, and you should use addslashes, since you may have classes or attributes in that html.
echo "<script type='text/javascript'>window.insertCartInHeader(\"". addslashes($cart) . "\");</script>";
Without addslashes something like this, won't work:
$html = '<h1 class="hi">It works</h1>';
For multiline html, this should work.
str_replace("\n", "\\", addslashes($cart));
You can improve that replace, but you get the idea.
I am getting this error! missing ) even through there seems nothing wrong in my jquery line.
$('.product_area').append('
<div class="product">
<a href="/index.php?store='+$store_username+'&view=single&product='+json[i].product_id'"><div class="product-image">
<img src="<?php echo image_check('+json[i].product_image1+'); ?>" />
</div>
</a>
<div class="product_details"><div class="product-name">
<a class="name" href="/index.php?store='+$store_username+'&view=single&product='+json[i].product_id'">
<span><?php echo substr('+json[i].product_name+',0,23); ?></span>
</a>
</div>
<div class="product-price">
<span class="price"># Rs. <?php echo number_format('+json[i].product_price+',2); ?></span>/-</div>
<div class="product-discount">
<span class="discount">Discount:
<span class="color-text"><?php echo '+json[i].product_discount+' ?></span>%</span>
</div>
</div>
</div>').animate({width:'toggle'},150);
I have tried to write it as clean as possible. Can anyone check! It's irritating a lot
This looks like a problem with splitting up a string over multiple lines. (Also you have a typo, as others have commented. If this is an error in your code you'll need to fix it, but if it's just a typo here on SO here's the other problem you're facing)
There are a couple of ways you could go about solving this.
1) If you can use ES6, consider using string templates with `` (backticks). This solution might look like this:
let html = `<div class="product">
<a href="/index.php?store=${store_username}&view=single&product...`
Notice that you don't need to use + in this solution, you can just use ${var_name} and get the value of your variable. You can also split over multiple lines and be OK. I think you could also just replace the entire string in your append() method with a string template and be good.
2) Prepackage your HTML into a variable before appending it, using the += operator. Here it might look something like this:
var html = '<div class="product">';
html += '<a href="/index.php?store=';
html += $store_username;
html += '&view=single&product=';
And so on, and then you would
.append(html);
3) Finally, you can split lines with the \
... .append('<div class="product"> \
<a href="/index.php?store= \
'+$store_username+'&view=single&product=' ... );
change this line
<a href="/index.php?store='+$store_username+'&view=single&product='+json[i].product_id'"><div class="product-image">
to
<a href="/index.php?store='+$store_username+'&view=single&product='+json[i].product_id+'"><div class="product-image">
How about this?
$('.product_area').append('<div class="product">\
<a href="/index.php?store=\'+$store_username+\'&view=single&product=\'+json[i].product_id\'"><div class="product-image">\
<img src="<?php echo image_check(\'+json[i].product_image1+\'); ?>" />\
</div>\
</a>\
<div class="product_details"><div class="product-name">\
<a class="name" href="/index.php?store=\'+$store_username+\'&view=single&product=\'+json[i].product_id\'">\
<span><?php echo substr(\'+json[i].product_name+\',0,23); ?></span>\
</a>\
</div>\
<div class="product-price">\
<span class="price"># Rs. <?php echo number_format(\'+json[i].product_price+\',2); ?></span>/-</div>\
<div class="product-discount">\
<span class="discount">Discount: \
<span class="color-text"><?php echo \'+json[i].product_discount+\' ?> </span>%</span>\
</div>\
</div>\
</div>').animate({width:'toggle'},150);
<a href='#' class='lorem'>
foo <div class='ipsum'>bar</div>
</a>
In this code excerpt, I want to get only foo. But if I call $('.lorem').text(), I get div.ipsum also. (which I don't want it)
jQuery or Javascript, both are OK for me.
You are trying to get the text of the first child of the anchor so
var text = $('.lorem').contents().first().text();
snippet.log('text: ' + text)
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' class='lorem'>
foo <div class='ipsum'>bar</div>
</a>
Use a span?
<a href='#' class='lorem'>
<span>foo</span> <div class='ipsum'>bar</div>
</a>
And then:
$('.lorem span').text()
This is my Current Code in my wordpress:
<div class="entry-content">
<a href="<?php
echo $currenturl.'?material=&type='.$get_type;
?>">All Materials</a>
<?php
$materials = get_field('materials',$valueid);
foreach($materials as $id):?>
<a href="<?php
$matterm = get_term($id,'materials');
$matslug = $matterm->slug;
$mattitle = $matterm->name;
echo $currenturl."?material=".$matslug.'&type='.$get_type;
?>"><?php
echo $mattitle;
?>
</a>
<?php endforeach; ?>
</div>
This is the Current Output:
<div class="entry-content">
<a href="#>Material 1</a>
<a href="#>Material 1</a>
</div>
And I want the output of the code will be:
<div class="entry-content">
<a class="current" href="#>Material 1</a>
<a href="#>Material 1</a>
</div>
and I have this Script on my header but it will not function:
<script type="text/javascript">
window.onload = function() {
document.getElementById('entry').className = 'current';
};
</script>
You're mixing up class and id (or just left off the id). If you do console.log(getElementById("entry")), I bet you get back null.
I think you have to replace this.
window.onload = function() {
var parentDiv = document.getElementsByClassName('entry-content');
parentDiv.childNodes[0].className = 'current';
};
In your code:
document.getElementById('entry').className = 'current';
getElementById(ID) it's a javascript method and used for getting the element with the specific ID
And your HTML is not correct, you forgot the end " of href.
You should write your HTML like -
<div class="entry-content">
<a id="entry" href="#">Material 1</a>
Material 1
</div>
After make above changes, your code works perfectly. See Demo
Hi im doing a PHP loop where I set a class, this loop make a list of items, and each one of them will have a "share" button that will open a window, (div display:none) the javascript open this div, and it works perfect..
My problem is that in this moment I have inserted the <script> code inside the loop so each item has its own <script></script> code...
Is there any way to do just one and take that code out of the php loop, so I can improve the code.
<script>
$('a.sharebtnc').click(
function(event) {
event.stopPropagation();
$('div.redescompartir').fadeToggle(300);
}
);
</script>
In the Loop well I just add to the class the id like this (id :32 )
<script>
$('a.sharebtnc32').click(
function(event) {
event.stopPropagation();
$('div.redescompartir32').fadeToggle(300);
}
);
</script>
How can I make this script works for all elements no matter the id number, I have no idea, but I know this is the correct way of doing this , right?
The HTML is very simple, its the same for each item... I mean each item has its own div with for <a href="" > </a> elements
<a href="#" class="sharebtnc(id)">
<div class="redescompartir(id)">
<a href="" >Twitter </a>
<a href="" >Facebook </a>
<a href="" >Google </a>
<a href="" >Foursquare </a>
</div>
Add a new class and attribute to the input element like
instead of
<a class="sharebtnc32" />
use
<a class="sharebtnc sharebtnc32" data-id="32"/>
then
jQuery(function ($) {
$('.sharebtnctl').click(function (event) {
event.stopPropagation();
$('.redesopenclose' + $(this).data('id')).fadeToggle(300);
});
})
My preferred method: PHP to generate link between the two elements, then a small snippet of JS to grab which particular one was clicked.
PHP:
$num = 100;
for ($x = 0; $x < $numItems; $x++) {
echo "
<a href='#' class='sharebtn' target='$x'>Share</a>
<div class='redescompartir' id='$x'>
<a href=''>Twitter</a>
<a href=''>Facebook</a>
<a href=''>Google</a>
<a href=''>Foursquare</a>
</div>
";
}
HTML output:
<a href="#" class="sharebtn" target='32'>Share</a>
<div class="redescompartir" id='32'>
<a href="" >Twitter </a>
<a href="" >Facebook </a>
<a href="" >Google </a>
<a href="" >Foursquare </a>
</div>
JS:
$('a.sharebtn').on('click', function(e) {
e.stopPropagation();
var target = $(e.currentTarget).attr('target');
$('#'+target).fadeToggle(300);
});
This way you only need a single <script></script> tag, which your user's broswers will thank you for. :)