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);
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 really stumped by this one. I have a template which contains data. I alert the variable containing this rendered template to prove it contains the data. I have tried using html() innerHTML() and others to then convert it before appending it. Using identical jquery syntax, I am able to append a div exactly as I desire, except with different contents.
success: function (data) {
if (data['success'] == 1) {
$.get('templates/PostReply.mustache', function(file){
var newPostArray={"reply_body":bodyText,
"replier_username": "<?php echo $sess_username; ?>",
"replier_profimg0": '<?php echo $sess_profimg0; ?>'
};
var html = Mustache.render(file, newPostArray);
$('#new-posts-container').append(html);
alert(html);
$(form).closest('#reply-divy').nextAll('#new-posts-container').append('<div>hello</div>');
//this works
$(form).closest('#reply-divy').nextAll('#new-posts-container').append(html);
// this does not work
e.preventDefault();
});
// You could also use the data['message'] that got sent back here.
}
},
So for some reason, the contents are unable to append. I am not receiving any errors.
This is what html looks like in an alert:
<div class="reply-div">
<div class="pull-left feed-entity-side-img">
<a href="profilepage.php?username=cb_snn">
<img src="photos/user_photos/public/2015/02/12/04/1ded2487680.jpg" alt="User" class="media-object no-padding reply-side-img"/>
</a>
</div>
<div class="media-body" style="padding-bottom:5px;">
<span class="pull-right" style=""> </span>
<span ><b>co_byrne</b></span>
<p> dgsadgasdgasdgasdgasdgasdgs
</p>
</div>
</div>
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.
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
I'm new to jQuery and am having trouble figuring out the right way to loop a set of code for a basic carousel/banner rotator. I've tried a few versions of "for" statements and .each(), but I can't get it to work on my own so I'm reaching out for help.
Here's my code so far:
$('.next-1').click(function () {
$('.featured-1').fadeOut(500,function(){
$('.featured-2').fadeIn(500,function(){
$('.featured-2').toggleClass("hide");
});
});
});
$('.next-2').click(function () {
$('.featured-2').fadeOut(500,function(){
$('.featured-3').fadeIn(500,function(){
$('.featured-3').toggleClass("hide");
});
});
});
And then a similar code block for going back within the slider:
$('.prev-2').click(function () {
$('.featured-2').fadeOut(500,function(){
$('.featured-1').fadeIn(500,function(){
$('.featured-2').toggleClass("hide");
});
});
});
$('.prev-3').click(function () {
$('.featured-3').fadeOut(500,function(){
$('.featured-2').fadeIn(500,function(){
$('.featured-3').toggleClass("hide");
});
});
});
This code does work right now, I just don't want to have to output so many unnecessary lines of code when I know I could loop it. I'd like to be able to loop until there are no more "featured-n" divs to cycle through (being able to cycle around to the beginning would be great too!)
Here's the PHP/HTML I'm using to generate each "featured-n" div block:
function home_slider_loop() {
$count = 0;
query_posts ('tag=slider');
if (have_posts()) : while (have_posts()) : the_post();
$count++;
?>
<div class="featured-post featured-<?php echo $count; if ($count>1) { echo ' hide';}?>">
<div class="featured-header">
<h1 class="featured-title"><?php the_title(); ?></h1>
<p class="author">Written by Evan Luzi</p>
</div>
<div class="image-wrap">
<?php the_post_thumbnail('full', array('class' => 'slider-image')); ?>
<div class="slider-nav">
<div class="featured-prev prev-<?php echo $count; ?>"></div>
<div class="featured-next next-<?php echo $count; ?>"></div>
</div><!--End Navigation-->
</div><!--End Image <?php echo $count; ?>-->
<div class="featured-footer">
<?php the_excerpt(); ?>
<a class="more-link" href="<?php the_permalink(); ?>" alt="<?php the_title(); ?>" >Read more</a>
</div>
</div><!--End Featured <?php echo $count; ?>-->
<?php
endwhile;
endif;
}
Here's a sample of one of the static HTML outputs (just imagine this iterated several times with the "featured-n" classes incrementing:
<div class="featured-1">
<div class="featured-header">
<h1 class="featured-title">5 Useful Cinematography Apps for iOS You Should Download Today</h1>
<p class="author">Written by Evan Luzi</p>
</div>
<div class="image-wrap">
<img width="1018" height="416" src="http://www.tbabdev.com/wp-content/uploads/2013/07/cinematography-apps-8-hero.jpg" class="slider-image wp-post-image" alt="cinematography-apps-8-hero" />
<div class="slider-nav">
<div class="featured-prev prev-1"></div>
<div class="featured-next next-1"></div>
</div><!--End Navigation-->
</div><!--End Image 1-->
<div class="featured-footer">
<p>The devices we have in our pockets, the ones that can run these apps, these are the new leathermans. They have everything we need. They eliminate the need to carry paper manuals and enable us to do complex timelapse calculations in a fraction of the time as a paper and pen.</p>
<a class="more-link" href="http://www.tbabdev.com/?p=27" alt="5 Useful Cinematography Apps for iOS You Should Download Today" >Read more</a>
</div>
</div><!--End Featured 1-->
You can see the code in action at http://www.tbabdev.com/
Thank you in advance for your help and please be kind to a n00b :)
Use something like this :
$('.nav .prev').click(function(){
activeBlock = $('.featured.active');
prevBlock = activeBlock.prev('.featured');
activeBlock.fadeOut('slow',function(){
prevBlock.fadeIn().addClass('active');
}).removeClass('active');
});
$('.nav .next').click(function(){
activeBlock = $('.featured.active');
nextBlock = activeBlock.next('.featured');
activeBlock.fadeOut('slow',function(){
nextBlock.fadeIn().addClass('active');
}).removeClass('active');
});
Html
<div class="nav">
<div class="prev"> </div>
<div class="next"> </div>
</div>
<div class="featured-post featured <?php if($count>1) echo 'hide' ?>">
<div class="featured-header">
<h1 class="featured-title"><?php the_title(); ?></h1>
<p class="author">Written by Evan Luzi</p>
</div>
<div class="image-wrap">
<?php the_post_thumbnail('full', array('class' => 'slider-image')); ?>
</div>
<!--End Image <?php echo $count; ?>-->
<div class="featured-footer">
<?php the_excerpt(); ?>
<a class="more-link" href="<?php the_permalink(); ?>" alt="<?php the_title(); ?>" >Read more</a>
</div>
</div>
You could do it this way :
$('.featured-next, .featured-prev').click(function () {
//find out if the clicked element is a prev or next element, extract the last part, will be useful later
var direction = $(this).hasClass("featured-next") ? "next" : "prev";
//select the ".featured-n" block which is the super-parent of clicked element
var $fullBlock = $(this).closest('div[class^="featured-"]'); //or add a class here to make your life easier
//fade out full block
$fullBlock.fadeOut(500, function () {
//search for the next element and show it
//note that $fullBlock.next() => $fullBlock["next"]() => $fullBlock[direction]()
$fullBlock[direction]().fadeIn(500, function () {
//toggle the class "hide" of the element next to fullBlock
$(this).toggleClass("hide");
});
});
});
Explanation:
You can join up both prev and next events together.
Then, you have to check if its a next or a prev element. Set that to a variable called direction. We'll be using this to find out if we have to use prev() or next() when we're trying to fadeIn featured-n divs.
Find the parent with the class set to featured-n (in your case its the superparent). It might be better if you give a common class to all these elements so that we can stop using 'div[class^="featured-"]' selector, which is slightly inefficient.
Fade out the superparent.
In the callback, based on the direction variable, we'll have to decide if the carousel is gonna go to prev block or next block, something like this :
if(direction === "prev")
{
$fullBlock.prev().fadeIn(//your code)
}
else
{
$fullBlock.next().fadeIn(//your code)
}
You must also know that, in an object like this :
var data = {"name" : "Blah Blah"}
To get the "Blah Blah" out, we can say
data.name
or we could say :
data["name"]
So based on this, in our situation, instead of
$fullBlock.prev()
Or we could say
$fullBlock["prev"]()
Which is what direction variable contains. So finally, we could do this to select the next/prev element based on what was clicked :
$fullBlockdirection
Show the prev/next element.
Add/remove "hide" class.
Hope this helped!