I created a web page impartial from the theme and added the php and js recordsdata of the pageto the theme folder, the php file works however the js file doesn’t. Why may it’s?
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">
<fundamental id="main" class="site-main">
<div class="create-prediction">
<h2 class="headline headline--medium">Guess Now</h2>
<enter 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,
'writer' => get_current_user_id()
));
whereas($userPredictions->have_posts()) {
$userPredictions->the_post(); ?>
<li data-id="<?php the_ID(); ?>">
<enter class="prediction-title-field" worth="<?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>
</fundamental>
</div>
<?php
get_sidebar( 'proper' );
get_footer();
}
?>
Javascript File:
class prediction {
constructor() {
this.occasions()
}
occasions() {
$("#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.goal).dad and mom("li")
if (thisPrediction.information("state") == "editable") {
this.makeNoteReadOnly(thisPrediction)
} else {
this.makeNoteEditable(thisPrediction)
}
}
makeNoteEditable(thisPrediction) {
thisPrediction.discover(".edit-prediction").html('<i class="fa fa-times" aria-hidden="true"></i> Cancel')
thisPrediction.discover(".prediction-title-field, .prediction-body-field").removeAttr("readonly").addClass("prediction-active-field")
thisPrediction.discover(".update-prediction").addClass("update-prediction--visible")
thisPrediction.information("state", "editable")
}
makeNoteReadOnly(thisPrediction) {
thisPrediction.discover(".edit-prediction").html('<i class="fa fa-pencil" aria-hidden="true"></i> Edit')
thisPrediction.discover(".prediction-title-field, .prediction-body-field").attr("readonly", "readonly").removeClass("prediction-active-field")
thisPrediction.discover(".update-prediction").removeClass("update-prediction--visible")
thisPrediction.information("state", "cancel")
}
deletePrediction(e) {
var thisPrediction = $(e.goal).dad and mom("li")
$.ajax({
beforeSend: xhr => {
xhr.setRequestHeader("X-WP-Nonce", prediction.nonce)
},
url: "https://woouv.com/wp-json/wp/v2/prediction/" + thisPrediction.information("id"),
sort: "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.goal).dad and mom("li")
var ourUpdatedPost = {
"title": thisPrediction.discover(".prediction-title-field").val(),
"content": thisPrediction.discover(".prediction-body-field").val()
}
$.ajax({
beforeSend: xhr => {
xhr.setRequestHeader("X-WP-Nonce", prediction.nonce)
},
url: "https://woouv.com/wp-json/wp/v2/prediction/" + thisPrediction.information("id"),
sort: "POST",
information: 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/",
sort: "POST",
information: ourNewPost,
success: response => {
$(".new-prediction-title, .new-prediction-body").val("")
$(`<li data-id="${response.id}">
<enter class="prediction-title-field" worth="${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 material.uncooked}</textarea>
<span class="update-prediction btn--blue btn--small"><i class="fa fa-arrow-right"></i> Save</span>
</li>`).prependTo("prediction").conceal().slideDown()
console.log("Congrats")
console.log(response)
},
})
}
}
export default prediction
I added enqueue script in features.php file.
operate predictionjs() { wp_enqueue_script( 'prediction', get_template_directory_uri() . '/property/js/libs/prediction.js', array( 'jquery' ), '3.6.0', true ); } add_action( 'wp_enqueue_scripts', 'predictionjs');
Web page deal with: Prediction