0

I created a page independent from the theme and added the php and js files of the pageto the theme folder, the php file works but the js file does not. Why could it be?

PHP File:

<?php
  if (!is_user_logged_in()) {
    wp_redirect(esc_url(site_url('/')));
    exit;
  } else{ 
  get_header();
  get_sidebar( 'left' );
?>
   <div id="primary" class="content-area region__col region__col--2">
    <main id="main" class="site-main">
        
      <div class="create-prediction">
        <h2 class="headline headline--medium">Guess Now</h2>
        <input class="new-prediction-title" placeholder="Title">
        <textarea class="new-prediction-body" placeholder="Your guess here..."></textarea>
        <span class="submit-prediction">Guess</span>
      </div>
      <ul class="min-list link-list" id="prediction">
          
<?php 
          $userPredictions = new WP_Query(array(
            'post_type' => 'prediction',
            'posts_per_page' => -1,
            'author' => get_current_user_id()
          ));
          while($userPredictions->have_posts()) {
            $userPredictions->the_post(); ?>
            <li data-id="<?php the_ID(); ?>">
              <input class="prediction-title-field" value="<?php echo esc_attr(get_the_title()); ?>">
              <span class="edit-prediction"><i class="fa fa-pencil" ></i> Edit</span>
              <span class="delete-prediction"><i class="fa fa-trash-o" ></i> Delete</span>
              <textarea class="prediction-body-field"><?php echo esc_html(get_the_content()); ?></textarea>
              <span class="update-prediction btn--blue btn--small"><i class="fa fa-arrow-right"></i> Save</span>
            </li>
<?php  
        }
?>
      </ul> 
    </main>
   </div>
    
<?php 
  get_sidebar( 'right' );
  get_footer();
  }
?>

Javascript File:

class prediction {
  constructor() {
    this.events()
  }

  events() {
    $("#prediction").on("click", ".delete-prediction", this.deletePrediction)
    $("#prediction").on("click", ".edit-prediction", this.editPrediction.bind(this))
    $("#prediction").on("click", ".update-prediction", this.updatePrediction.bind(this))
    $(".submit-prediction").on("click", this.createPrediction.bind(this))
  }

  editPrediction(e) {
    var thisPrediction = $(e.target).parents("li")
    if (thisPrediction.data("state") == "editable") {
      this.makeNoteReadOnly(thisPrediction)
    } else {
      this.makeNoteEditable(thisPrediction)
    }
  }

  makeNoteEditable(thisPrediction) {
    thisPrediction.find(".edit-prediction").html('<i class="fa fa-times" aria-hidden="true"></i> Cancel')
    thisPrediction.find(".prediction-title-field, .prediction-body-field").removeAttr("readonly").addClass("prediction-active-field")
    thisPrediction.find(".update-prediction").addClass("update-prediction--visible")
    thisPrediction.data("state", "editable")
  }

  makeNoteReadOnly(thisPrediction) {
    thisPrediction.find(".edit-prediction").html('<i class="fa fa-pencil" aria-hidden="true"></i> Edit')
    thisPrediction.find(".prediction-title-field, .prediction-body-field").attr("readonly", "readonly").removeClass("prediction-active-field")
    thisPrediction.find(".update-prediction").removeClass("update-prediction--visible")
    thisPrediction.data("state", "cancel")
  }

  deletePrediction(e) {
    var thisPrediction = $(e.target).parents("li")

    $.ajax({
      beforeSend: xhr => {
        xhr.setRequestHeader("X-WP-Nonce", prediction.nonce)
      },
      url: "https://woouv.com/wp-json/wp/v2/prediction/" + thisPrediction.data("id"),
      type: "DELETE",
      success: response => {
        thisNote.slideUp()
        console.log("Congrats")
        console.log(response)
        if (response.userNoteCount < 5) {
          $(".prediction-limit-message").removeClass("active")
        }
      },
      error: response => {    
        console.log("Sorry")
        console.log(response)
      }
    })
  }

  updatePrediction(e) {
    var thisPrediction = $(e.target).parents("li")

    var ourUpdatedPost = {
      "title": thisPrediction.find(".prediction-title-field").val(),
      "content": thisPrediction.find(".prediction-body-field").val()
    }

    $.ajax({
      beforeSend: xhr => {
        xhr.setRequestHeader("X-WP-Nonce", prediction.nonce)
      },
      url: "https://woouv.com/wp-json/wp/v2/prediction/" + thisPrediction.data("id"),
      type: "POST",
      data: ourUpdatedPost,
      success: response => {
        this.makeNoteReadOnly(thisPrediction)
        console.log("Congrats")
        console.log(response)
      },
      error: response => {
        console.log("Sorry")
        console.log(response)
      }
    })
  }

  createPrediction(e) {
    var ourNewPost = {
      "title": $(".new-prediction-title").val(),
      "content": $(".new-prediction-body").val(),
      "status": "publish"
    }

    $.ajax({
      beforeSend: xhr => {
        xhr.setRequestHeader("X-WP-Nonce", prediction.nonce)
      },
      url: "https://woouv.com/wp-json/wp/v2/prediction/",
      type: "POST",
      data: ourNewPost,
      success: response => {
        $(".new-prediction-title, .new-prediction-body").val("")
        console.log("Congrats")
        console.log(response)
      },
      error: response => {
        if (response.responseText == "You have reached your prediction limit.") {
          $(".prediction-limit-message").addClass("active")
        }
        console.log("Sorry")
        console.log(response)
      }
    })
  }
}

exports = {prediction}

I added enqueue script in functions.php file.

function predictionjs() { wp_enqueue_script( 'prediction', get_template_directory_uri() . '/assets/js/libs/prediction.js', array( 'jquery' ), '3.6.0', true ); } add_action( 'wp_enqueue_scripts', 'predictionjs'); 
3
  • 2
    WP needs to be told to load the script, e.g. via wp_enqueue_script(). Also, WP ships with its own jQuery version, no need to manually load it.
    – kero
    Oct 28 '21 at 16:00
  • Please edit your question with updated information rather than posting it in the comments. Code snippets are especially hard to read here in the comments.
    – Pat J
    Oct 28 '21 at 16:05
  • 1
    Thank you. I edited. Oct 28 '21 at 16:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.