Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
As the title says, I have some code that only fires the click event once. Can you guys take a look?
UPDATE:
I have edited the code to show the whole function. Im making a plugin for jQuery. Anyway, the point is that the code DOES WORK but the click function of a.click() ets fired only once, removing one filter only.
addFilterProcess: function ()
{
var $this = this;
var select_filters = this.select_filters;
var selected_filter = select_filters.val();
if (selected_filter != 0)
{
if (this.active_filters.length == 0)
{
this.active_filters.push(selected_filter);
this.used_filters.append(this.template_show_filter(this.options.available_filters[selected_filter], selected_filter));
var filter = this.used_filters.find('#filter-'+selected_filter);
var a = filter.find('a');
a.click(function () {
$this.removeFilter(a.attr('filter'));
});
this.btn_apply_filters.show();
this.btn_cancel_filters.show();
this.btn_apply_filters.on('click', function () {
$this.applyFilters();
});
this.btn_cancel_filters.on('click', function () {
$this.cancelFilters();
});
/*
Reset the select, to show the first option
*/
select_filters.val(0);
}
else
{
if (this.active_filters.indexOf(selected_filter) === -1)
{
this.active_filters.push(selected_filter);
this.used_filters.append(this.template_show_filter(this.options.available_filters[selected_filter], selected_filter));
/*
Reset the select, to show the first option
*/
select_filters.val(0);
}
}
}
},
Try
$(this).removeFilter(a.attr('filter'));
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to see if users on my site have logged on more than one time so they have to log back in. When I run my code, the h4 element has no text content inside of it. Also, the h4 does not have any text at first and it waits for the code to give its HTML. However, Chrome does tell me that there is localStorage. I think it is how that I am trying to get it is the problem. The other problem that the code looks correct for me. Does anyone know how to fix this?
Here is my code:
var login = 0;
window.onload = function() {
login++;
localStorage.setItem("save1", btoa(login));
CheckForOtherLogin();
};
function CheckForOtherLogin() {
window.localStorage.getItem("save1");
if (login === null) {
login = 0;
} else {
login = atob(login);
document.getElementById("test").innerHTML = login;
}
}
Edit: Looks like I made a little tiny mistake:
var login = 0;
window.onload = function() {
login++;
localStorage.setItem("save1", login);
CheckForOtherLogin();
};
function CheckForOtherLogin() {
window.localStorage.getItem("save1");
if (login === null) {
login = 0;
} else {
document.getElementById("test").innerHTML = login;
}
return login;
}
it seems that what your're passing to the localstorage is an object so the html won't read it, also in the "CheckForOtherLogin()" function you need to asign a value to the var "login" when you get the value from the localStorage just try this:
`var login = 0;
window.onload = function() {
login++;
localStorage.setItem("save1", login);
CheckForOtherLogin();
};
function CheckForOtherLogin() {
login = window.localStorage.getItem("save1");
if (login === null) {
login = 0;
} else {
document.getElementById("test").innerHTML = login;
}
}`
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I'm trying to get better at writing my code in JavaScript and not using jQuery. I've got an $.ajax request which i'm trying to rewrite as an XMLHttpRequest, but getting errors "POST http://localhost:3000/wp-admin/admin-ajax.php 400 (Bad Request)".
The jQuery version works fine, but the JS version doesn't. I get the same error from the jQuery version if I remove data: filter.serialize(), so I feel the issue lies here as there isn't an equivalent version in the JS request, but i'm unsure how to write/add this into it.
If anyone can point me in the right direction that would be great : )
/** Working jQuery filter */
jQuery(function($) {
$("#filter").change(function(e) {
e.preventDefault();
var filter = $(this);
$.ajax({
url: WP.ajax,
data: filter.serialize(),
type: "POST",
beforeSend: function(xhr) {
$("#response").append("Loading...");
},
success: function(data) {
$("#response").html(data);
}
});
return false;
});
});
/** NOT working JS filter */
var af = new XMLHttpRequest();
document.getElementById("filter").addEventListener("change", function(e) {
e.preventDefault();
document.getElementById("filter").value = this.value;
af.onload = function() {
if (af.status === 200) {
document.getElementById("response").innerHTML = af.responseText;
console.log(af.responseText);
}
};
af.open("POST", WP.ajax);
af.send();
});
I've worked it out and got the data sending. For reference the working code is below:
var articleFilter = new XMLHttpRequest();
var filter = document.getElementById("filter");
filter.addEventListener("change", function(e) {
e.preventDefault();
filter.value = this.value;
articleFilter.onload = function() {
if (articleFilter.status === 200) {
document.getElementById("response").innerHTML = articleFilter.responseText;
}
};
articleFilter.open("POST", WP.ajax, true);
var formData = new FormData(filter);
articleFilter.send(formData);
}); // END
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am working on a game with a play menu with collapsible columns. I want to use html5 to remember the state of the columns so that when page is refreshed user does not have to readjust their columns. I have tried several times to implement this with other codes on this site and I just cannot seem to get it to work. I am no good a javascript. I am thinking there should be an onload function to recall local storage variables but my brain is fried on how to implement this. I never had formal training on computers.
I am linking (i hope) my project on github. The page in question is called new.php.
Bear with me I am new at GitHub as well, but if you could link me a code I could copy/paste or download I would be eternally grateful! I will be studying manuals and fiddling with it while I wait on a response. Hopefully I will get this on my own but at this point its just not likely.
my github project
You mentioned using localStorage, so here's what you could do:
In these functions:
function openNav1() {
document.getElementById("myNav1").style.height = "100%";
}
function closeNav1() {
document.getElementById("myNav1").style.height = "0%";
}
function openNav2() {
document.getElementById("myNav2").style.height = "100%";
}
function closeNav2() {
document.getElementById("myNav2").style.height = "0%";
}
function openNav3() {
document.getElementById("myNav3").style.height = "100%";
}
function closeNav3() {
document.getElementById("myNav3").style.height = "0%";
}
Add a localStorage statement:
function openNav1() {
document.getElementById("myNav1").style.height = "100%";
localStorage.setItem("myNav1", "true");
}
function closeNav1() {
document.getElementById("myNav1").style.height = "0%";
localStorage.setItem("myNav1", "false");
}
function openNav2() {
document.getElementById("myNav2").style.height = "100%";
localStorage.setItem("myNav2", "true");
}
function closeNav2() {
document.getElementById("myNav2").style.height = "0%";
localStorage.setItem("myNav2", "false");
}
function openNav3() {
document.getElementById("myNav3").style.height = "100%";
localStorage.setItem("myNav3", "true");
}
function closeNav3() {
document.getElementById("myNav3").style.height = "0%";
localStorage.setItem("myNav3", "false");
}
Then, at the top of your JavaScript code, add a window.onload which reads from localStorage which items are open, and which are shut, then performs the relevant actions:
window.onload = function() {
var myNav1 = JSON.parse(localStorage.getItem("myNav1"));
var myNav2 = JSON.parse(localStorage.getItem("myNav2"));
var myNav3 = JSON.parse(localStorage.getItem("myNav3"));
if (myNav1) {
openNav1();
} else {
closeNav1();
}
if (myNav2) {
openNav2();
} else {
closeNav2();
}
if (myNav3) {
openNav3();
} else {
closeNav3();
}
}
The above looks a bit clunky and repetitive, but it works, and it doesn't use eval.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
anyone can tell me why this wont work? It does work when i dont use a if else statement so im a bit stunned atm, i am using a html5 player where the play/pause button toggles, it needs to include the ajax watching when playing and stop watching when paused. thnx
<script>
var test = 0;
if (test == 0) {
$("#play").click(function(){
$.ajax({
url: "start_watching.php",
success: function(result){
$("#fix").html(result);
}
});
)};
test = 1;
} else if (test == 1) {
$("#play").click(function(){
$.ajax({
url: "stop_watching.php",
success: function(result){
$("#fix").html(result);
}
});
)};
test = 2;
}
</script>
Here's a really verbose example of how to solve the logic, with the conditions inside the event handler
var test = 0,
url;
$("#play").click(function(){
if (test === 0) {
url = "start_watching.php";
test = 1;
} else {
url = "stop_watching.php";
test = 0;
}
$.ajax({
url : url,
success : function(result){
$("#fix").html(result);
}
});
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I cannot find the right solution how hide a certain content on new part of page generated from PHP. (I am new in javascript)
I have a page, which loads new content below the actual, if a visitor scrolling down (like on Facebook.)
Each time, when a new content will displayed, I want run a function, which will hide certain content on the page.
Here is the code which loads new content. This works great.
(function() {
var $loadMore = $('.load-more').first();
if (!$loadMore.get(0)) {
return;
}
var timeout;
var $loadMoreLink = $loadMore.children('a'),
$list = $loadMore.prev('ul');
$loadMoreLink.on('click', function(event) {
event.preventDefault();
getMore();
});
function checkForMore() {
if (($window.scrollTop() + $window.height()) > ($list.offset().top + $list.height())) {
getMore();
}
}
function getMore() {
if (!$loadMoreLink.is(':visible')) {
return;
}
$loadMoreLink.attr('hidden', true);
$.get($loadMoreLink.attr('href'), function(response) {
$list.append(response);
var moreUrl = $list.children().last().data('more-url');
if (moreUrl) {
$loadMoreLink.attr('href', moreUrl);
$loadMoreLink.removeAttr('hidden');
}
else {
$loadMore.attr('hidden', true);
}
console.log(moreUrl)
});
}
$window.on('scroll', function() {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(checkForMore, 50);
});
checkForMore();
})();
Here is my code, with help of which I want to hide certain content. That does not work :(. I have tried really much, and spent many days on that.
var hideUnity = document.getElementsByClassName("load-more");
for (var i = 0; i < hideUnity.length, i++) {
hideUnity[i].addEventListener("click", function() {
if (something && something) {
$(document).ready(function(){
$("li.unity").hide();
});
}
});
}
Link to loading file at page
<div class="load-more">
Load more
</div>
Can someone help me, please? :). Thanks.
I don't know if there is a reason to mix native js and jQuery, but you can do your function easily using the framework:
$(function(){
$(".load-more").on('click', function(){
// now $(this) represents clicked object while $('.load-more') still represents all elements with provided class
if( whateveryouwant ){
$("li.unity").hide();
}
});
});
Edit
If you need to use a delegated event, just replace
$(".load-more").on('click', function(){....
by
$(document).on('click', '.load-more', function(){....