child theme – Javascript File Does Not Work

Question

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("https://wordpress.stackexchange.com/")));
    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:

var script = document.createElement('script');
script.src = "https://code.jquery.com/jquery-3.4.1.min.js";
script.type="text/javascript";
document.getElementsByTagName('head')[0].appendChild(script);

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("")
        $(`<li data-id="${response.id}">
            <input class="prediction-title-field" value="${response.title.raw}">
            <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">${response.content.raw}</textarea>
            <span class="update-prediction btn--blue btn--small"><i class="fa fa-arrow-right"></i> Save</span>
          </li>`).prependTo("prediction").hide().slideDown()
        console.log("Congrats")
        console.log(response)
      },
    })
  }
}

export default prediction

Page address: Prediction

0
abdullahyanik 1 month 2021-10-28T10:59:00-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse