Javascript/JQuery replace a div with content with a URL

Question

I'm using WordPress and trying to replace the content of a div using JQuery - that bit works. However the content has a URL in it and it isn't working and I cannot see why.

I'm generating a variable in PHP:

$query = new WP_Query( array( 'category_name' => 'news' ) );
if ( $query->have_posts() ) {
    // The Loop
    while ( $query->have_posts() ) {
        $query->the_post();
        $news_item = '<h2>' . get_the_title() . '</h2>';
        $news_item .= get_the_excerpt();    
        $news_item .= "<BR>";
        $news_item .= "<a href=";
        $news_item .= get_permalink();
        $news_item .= ">";      
        $news_item .= "Read More...</a>";
    }
    wp_reset_postdata();
}

That bit works.

I'm putting that into a jQuery variable:

<script type="text/javascript"> 
<?php  
    echo "var newsItem = '{$news_item}';";
?>

jQuery(document).ready(function() {
    jQuery('#soap-frontpagenews').fadeOut(500, function() {
        jQuery(this).replaceWith(newsItem).fadeIn(500);
    });
});
</script>

and that bit works. However the resultant HTML code is not right in the way it fails to produce the link correctly:

<h1>News</h1>
<h2>Taking Better Photos With Your Nikon</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum ac urna et auctor. at…
<br>
<a href="http://212.159.165.84/~soapwp/2013/09/29/taking-better-photos-with-your-nikon"></a>
Read More...

in that Read More... is OUTSIDE the link tags.

Where am I going wrong please?

Best Regards

Dave

I had tried the quotes but it was then failing completely - thanks for responding though ppasler. Javascript needs the ; mplungjan — demsley, Jan 05 '17 at 13:09
Look again. My quotes are backticks - you still need quotes but you will have trouble with wrapping single quotes in double quotes and vice versa. Hence the JSON encode was a better idea. Still backticks is also a solution — mplungjan, Jan 05 '17 at 13:31

Vasim Shaikh · Answer 1 · 2017-01-05T13:31:46.183

1

Problem :

Your string is breaking because missing a single quote.You need to wrap up url into a single quoted string.

So Your code is something like this:

$query = new WP_Query( array( 'category_name' => 'news' ) );
if ( $query->have_posts() ) {
    // The Loop
    while ( $query->have_posts() ) {
        $query->the_post();
        $news_item = '<h2>' . get_the_title() . '</h2>';
        $news_item .= get_the_excerpt();    
        $news_item .= "<BR>";
        $news_item .= "<a href='";
        $news_item .= get_permalink();
        $news_item .= "'>";      
        $news_item .= "Read More...</a>";
    }
    wp_reset_postdata();
}

Javascript Code (Updated Code)

<script type="text/javascript"> 
var newsItem = "<?php echo $news_item; ?>"; // Variable assignment 

jQuery(document).ready(function() {
    jQuery('#soap-frontpagenews').fadeOut(500, function() {
        jQuery(this).replaceWith(newsItem).fadeIn(500);
    });
});
</script>

Update :

variable should be quoted var newsItem = "<?php echo $news_item; ?>";

edited Jan 05 '17 at 13:31

answered Jan 05 '17 at 12:09

Vasim Shaikh

4,485
2
23
52

Already answered in the comment. Really not worth an answer, rather a close as typo – mplungjan Jan 05 '17 at 12:19
Just check it again,I have updated js code and php code both.comment add while typing answer – Vasim Shaikh Jan 05 '17 at 12:20
why??Its not valid? – Vasim Shaikh Jan 05 '17 at 12:32
Since when is an unquoted string valid JavaScript? – mplungjan Jan 05 '17 at 12:36
when we assign value to textbox.value= – Vasim Shaikh Jan 05 '17 at 12:43
textbox.value=
....
is not valid JS - if $a contains a quotes string it will work – mplungjan Jan 05 '17 at 13:20
@mplungjan thanks I am not aware about it.It break JS in google chrome – Vasim Shaikh Jan 05 '17 at 13:26
1

It breaks JS in all JavaScript implementations – mplungjan Jan 05 '17 at 13:26
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal – mplungjan Jan 05 '17 at 13:27
Your update will fail since your $news_item has single quotes too – mplungjan Jan 05 '17 at 13:30
Your update will fail if your $news_item has double quotes too - for example `$news_item .= "";` – mplungjan Jan 05 '17 at 13:32
that's reason I have used single qoute – Vasim Shaikh Jan 05 '17 at 13:35
You cannot rely on this.If get_the_excerpt() or get_the_title() has single or double quotes it will fail – mplungjan Jan 05 '17 at 13:40

Andy Tschiersch · Answer 2 · 2017-01-05T12:38:07.837

1

If you assign a PHP variable to a Javasript variable, it is better to use json_encode():

<script type="text/javascript"> 
<?php  
    echo "var newsItem = " . json_encode( $news_item ) . ";";
?>

But I would do it in another way: You can put all the news items directly from PHP in HTML div container with display: none and manage the news rotation with jQuery then.

edited Jan 05 '17 at 12:38

answered Jan 05 '17 at 12:21

Andy Tschiersch

3,716
1
17
24

there is nothing like a json – Vasim Shaikh Jan 05 '17 at 12:22
Its simple variable value – Vasim Shaikh Jan 05 '17 at 12:22
1

`$news_item` contains many unknown content, single quotes, double qoutes and maybe other special chars, that certainly is not valid. – Andy Tschiersch Jan 05 '17 at 12:26
I'm not sure if it must be quoted -> [look here](http://stackoverflow.com/questions/1808108/how-to-access-php-variables-in-javascript-or-jquery-rather-than-php-echo-vari#answer-1808161) – Andy Tschiersch Jan 05 '17 at 12:28
If it is JSON_Encoded it should not be quoted, but then you want to decode it before inserting it – mplungjan Jan 05 '17 at 12:28
Spot on Andy Tschiersch, many thanks. The json_encode worked. – demsley Jan 05 '17 at 13:10

Javascript/JQuery replace a div with content with a URL

2 Answers2

....