Question 165949 in Wordpress Question posted in
The official Wordpress documentation can be found here.

“How do I declare the jQuery variable in PHP using WordPress?”

I am using the below script on my WordPress page to display the read more and less.

<p class="countcontent">'.$the_content.'</p>

The above p tag is in for condition

$data.='<script type="text/javascript">
  
jQuery(document).ready(function(){
var maxLength = 390;
var moretxt = "...Read More";
var lesstxt = "Read Less";
  jQuery(".countcontent").each(function() {

    var myStr = jQuery(this).text();
    if (jQuery.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, jQuery.trim(myStr).length);
      jQuery(this).empty().html(newStr);
      jQuery(this).append("<span class="more-text">+ removedStr + </span>");
      jQuery(this).append("<a href="javascript:void(0);" class="read-more more">+ moretxt + </a>");
    }
  });

  jQuery(".read-more").click(function() {
    if(jQuery(this).hasClass("more")){
        jQuery(this).removeClass("more");
        jQuery(this).text(lesstxt);
        jQuery(this).siblings(".more-text").show();
    }
    else {
        jQuery(this).addClass("more");
        jQuery(this).text(moretxt);
        jQuery(this).siblings(".more-text").hide();
    }

  });
});
</script>';

I am getting the issue in this line

 jQuery(this).append("<span class="more-text">+ removedStr + </span>");
 jQuery(this).append("<a href="javascript:void(0);" class="read-more more">+ moretxt + </a>");

and in the console Uncaught SyntaxError: expected expression, got '<'

I have added variables like this + removedStr + and + moretxt + .Is this the correct way to declare the jquery variable in PHP?

The below code is the screenshot.

enter image description here

Tags:

3

Answers


  1. 0

    You have a syntax error with your double-quotes in some of your jQuery. It sees the double quotes, ends the item to append and the next character, > , is unexpected. See this example from the PHP docs on handling strings and quotes: https://www.php.net/manual/en/language.types.string.php

    // Outputs: Arnold once said: "I'll be back"
    echo 'Arnold once said: "I'll be back"';

    Your entire $data variable is wrapped in a pair of single quotes. You need to do this in your $data wherever quotes need to be escaped as you alternate their use, for example:

    $data .= '<script type="text/javascript">
  ...
    jQuery(this).append('<span class="more-text">+ removedStr + </span>');
  ...

    Quick Edit: The variables you are trying to use look correct, I just noticed your syntax issues is probably what you are hung up on.

    Login or Signup to reply.
  2. 0

    You are using double quotes in your span tags, which is closing the append() method too early, since it is using those same quotes. You must either use double quotes ("") or single quotes (”) in the jQuery method and use the opposite for any HTML code you’re appending that contains quotes.

    You also forget to end and begin the content with quotes, before and after the JS variable, which will cause the issue of not being able to display the variable contents to the page (it’ll be rendered as plain text). Below is what the valid JavaScript should instead look like in your case.

    jQuery(this).append('<span class="more-text">' + removedStr + '</span>');

jQuery(this).append('<a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>');

    In the above example, the double quotes have been replaced with single quotes to allow you to use double quotes in the HTML content. The HTML content is surrounded by single quotes to allow for the JavaScript variables to output as they should.

    Heads up, remember to escape the single quotes in the jQuery, as in your case, it’ll interfere with your PHP tags.

    Login or Signup to reply.
  3. 0

    When using jQuery in WordPress, consider the following.

    jQuery(function($){
  var maxLength = 390;
  var moretxt = "...Read More";
  var lesstxt = "Read Less";
  $(".countcontent").each(function() {
    var myStr = $.trim($(this).text());
    if (myStr.length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, myStr.length);
      $(this).empty().html(newStr);
      $(this).append("<span class='more-text'>" + removedStr + "</span>");
      $(this).append("<a href='javascript:void(0);' class='read-more more'>" + moretxt + "</a>");
    }
  });

  $(".read-more").click(function() {
    if($(this).hasClass("more")){
      $(this).removeClass("more");
      $(this).text(lesstxt);
      $(this).siblings(".more-text").show();
    } else {
      $(this).addClass("more");
      $(this).text(moretxt);
      $(this).siblings(".more-text").hide();
    }
  });
});

    As you can see, when using Double Quotes ("), you will need to use Single Quotes (') to be included in the String. There were two points where this was an issue in your SPAN and your A strings. Also you were using the + operator without closing the String wrappers.

    When you use jQuery(function(){});, this is shorthand for jQuery(document).ready(function(){});. See More: https://learn.jquery.com/using-jquery-core/document-ready/

    If you want to use a shorthand and ensure it does not conflict with other libraries, take a look here: https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search