So I have a couple of problems. The first one... I have 2 pages, a products.html page and a search.html page. The products.html page runs some Ajax in the .onPageAfterAnimation(); to get the products from the database and display them. The returned HTML contains a part where the user can increase and decrease a number value inside a textbox.
The button to increase or decrease the value by 1 initially works when I open the products.html page, however, when I go into the search.html and go back to the products.html page using my Android's back button (I have pushState = true) and press the increase/decrease button it increases/decreases by 2. If I try to do the same thing again it increases/decreases by 3 and so on…
This is my increase/decrease code in my products.html page:
myApp.onPageAfterAnimation('catalogs', function (page) {
//Increse/decrease product quantity
$(“.promo-screen-content”).on(“click”, “.addToCartBtn”, function(){
var productid = $(this).attr(“data-productId”),
currentvalue = parseInt($('#txtQuantity' + productid).val());
$('#txtQuantity' + productid).val((currentvalue + 1).toString());
});
$(“.promo-screen-content”).on(“click”, “.removeFromCartBtn”, function(){
var productid = $(this).attr(“data-productId”),
currentvalue = parseInt($('#txtQuantity' + productid).val());
if(currentvalue > 1){
$('#txtQuantity' + productid).val((current_value – 1).toString());
}
});
});
Anyone know why this is happening and how to fix it?
My second problem is a little bit different. When ever I click a button it takes that click and performs the process 3 or 4 times. So, for example, if I show a notification when it is clicked it shows that notification 3 or 4 times.
I don't know if these are common or know issues that people have came across. Any help is greatly appreciated!
I was putting my code inside the wrong page callback. I had to put it inside the .onPageInit(); callback.
Related
I work in a Call center (ticket based Support) and for me to get a ticket I need to click on 2 Buttons. the one that opens the tickets section, and the one that actually gets me a ticket. After i click on the Get_ticket class, the ticket box closes. So i need to start again to click on the "Tickets" Button, and then on Get_Ticket. Tickets button -> Get_ticket. And repeat and repeat. I want to tell Google console to help me with this. I found a way but it's not very friendly. I tried with the button.click function at a different interval but it's not working...If i put the function separately, it's working, but when I put the functions at the same time in Console, it's not working. Can you please give me an advice ? Those are the functions:
1.(click on TICKETS)
var button = document.getElementsByClassName("_1f8o8ru7")[0];
setInterval(function(){button.click();},2000);
2.(Click on GET TICKET)
var button2 = document.getElementsByClassName("_sl2x43m")[0];
setInterval(function(){button2.click();},2500);
The second interval should be added inside the first interval. I also recommend to use setTimeout, instead of setInterval.
setInterval(function(){
var button = document.getElementsByClassName("_1f8o8ru7")[0];
button.click();
setInterval(
function(){
var button2 = document.getElementsByClassName("_sl2x43m")[0];
button2.click();
},2500);
},2000);
After you figure it out, you can save your code in a js file: my_script.js and use Chrome extension JS Injector to automatically inject it in your page, without needing to use Chrome DEV Tools.
you need to call first button click on click of first button call another method on given timeout
so first time 1 button is clicked after on click of first button call another button method with 500 timeouts will be ok no need to do 2000 or 2500 timeout
2º EDIT:
thought it was solved but it isn't. when a page is loaded i want to add a class to some elements(on this case is to buttons) and for now my code is:
$("button").each(function(index){
// add the class
setTimeout(function(){
$(this).addClass("varrimento");
}.bind(this),index*5000);
// remove the class
setTimeout(function(){
$(this).removeClass("varrimento");
}.bind(this),(index+1)*5000);
});
This code add the class "varrimento" for 5 secs to each button one by one but it has 2 problems.
When i change page and return to the initial page it's like the
setTimeout of the first visit on the page it's still running, so on
the second visit the code of "varrimento" it's added to the buttons
again and they are not one by one like the first visit.
In some pages, don't know why, it takes too long to adding the class
to the elements. ex: on page "index" right after i visit page, the
class is added immediately to the first button but changing to second
page (code is the same, the only thing that differs is the amount of
buttons) it takes like 15secs to the first button have the class.
Second day in a row trying to solve this problem but can't figure it out. any help guys?
Save your timeout variable in localStorage and then remove it -
var timeout = setTimeout(auto_reload, 90000);
localStorage.setItem("timeout", timeout);
var timeout = localStorage.getItem("timeout");
clearTimeout(timeout);
I have a problem brought about by a specific client requirement in nopCommerce.
I have a page - lets say page1 - which shows a block image which you then have to click through to get to the main part of the page (no matter how much I try to dissuade them from the extra click they are adamant - basically it's a 'glamour shot' before going to the main product grid/category page).
I have this JavaScript for the page load:
switch(window.location.pathname) {
case "/store/page1":
$(".category-page").hide();
break;
etc. (there are other functions for other things)
Followed by:
$(".landing_click").click(function () {
$(".landing_page").hide();
$(".category-page").show();
});
This all works great and displays the product grid (category page) as it should after clicking through the main image. However after viewing an individual product from the grid (going through to product details) clicking the back button on the browser takes you back to the first stage of the page1, so you have to click through the splash image/glamour shot again to get to the product grid.
To me this is logical and it is working as it should, but I need to find a way so that when the user is clicking the back button out of a product, it goes back to the product grid. Like this:
Is this possible with JavaScript? It needs to use the browser back button rather than a specific other button, although I could add one of those in addition as well.
If it were a straightforward website it would be relatively easy, but I am confined by the limitations of nopCommerce and the way the Category pages function, hence why I am looking for a JavaScript answer if possible so I can simply adapt what I already have.
Thanks
I would use location.hash to do it like this:
switch(window.location.pathname) {
case "/store/page1":
if(window.location.hash == "#landing") {
$(".landing_page").show();
$(".category-page").hide();
}
else {
$(".landing_page").hide();
$(".category-page").show();
}
break;
//The rest here
}
Followed by:
$(".landing_click").click(function () {
window.location.hash = "#category";
$(".landing_page").hide();
$(".category-page").show();
});
Now when you are in the product details page, a click on the back button will move you to /store/page1#category loading the category page directly.
So I have a button that I want to control a process. The process can be run/pause/stop.
<div>
<button class="buttonAction" id="run" onclick = "sendData()" >Run</button>
<button class="buttonAction" id="pause" onclick = "sendData1()" >Pause</button>
</div>
So the buttons are in the same position and what I want is when the the run button is clicked the pause button appears and visa versa.
function sendData(){
//some values
window.location.href = '${createLink(controller:'run', action:'run')}' + '?dbvalue=' + db + '&fsvalue=' + fs;
document.getElementById("run").style.visibility="hidden";
document.getElementById("pause").style.visibility="visible";
}
Whats happens is it appears for a second but then reverts back to run because of the page reload window.location.href which I am using to send values back to my controller.
Dos anyone know a way to fix this or a better way of implementing it.
Thanks in advance
Reloading the page is like erasing a whiteboard and starting over again. The next page is not going to remember the state of the JavaScript you run after it. Setting of the buttons needs to take place on the next page load. Ideally your serverside code should be setting the state of the buttons.
Try below code:
function sendData(){
//your implementation
$("#run").css("visibility","hidden");
$("#pause").css("visibility","visible");
}
function sendData1(){
//your implementation
$("#pause").css("visibility","hidden");
$("#run").css("visibility","visible");
}
You will need to use cookies or sessions to keep the changes after a page reload.
By clicking on run, sendData function will be called in that run will be displayed and pause will not displayed, as I kept style.display="none" in the same way if we click on pause, run button will not display as we are using style.display="none"
function sendData(){
document.getElementById("run").style.display="block";
document.getElementById("pause").style.display="none";
}
function sendData1(){
document.getElementById("run").style.display="none";
document.getElementById("pause").style.display="block";
}
So i solved the problem. A few of the answers didnt take into account that the page reloaded.
When the user clicked run I send this back to the controller
window.location.href = '${createLink(controller:'run', action:'run')}' + '?dbvalue=' + db+ '&buttonValue=' + "hideRun"
Then in the controller I took the hideRun and send it back to the page
String button = params.buttonValue
render view:'run.gsp', model:[button:button]
Then I had a a function that gets called on each page load
window.onload = function()
Which checked the value of
"${button}"
Then if it ssaid "hideRun" it would hide the urn button which would display the pause button.
And visa versa...
I have a piece of code in jQuery that I use to get the contents of an iFrame after you click a link and once the content is completed loading. It works, but I have a problem with it repeating - at least I think that is what it is doing, but I can't figure out why or how.
jQuery JS:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
$("#fileuploadframe").load(function(){
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{action:"savePage",html:response, id: theID},
function(data){
alert(data);
});
});
});
HTML Links ( one of many ):
<a href="templates/1000/files/index.php?pg=0&preview=false"
target="fileuploadframe" class="pageSaveButton" rel="0">Home</a>
So when you click the link, the page that is linked to is opened into the iframe, then the JS fires and waits for the content to finish loading and then grabs the iframe's content and sends it to a PHP script to save to a file. I have a problem where when you click multiple links in a row to save multiple files, the content of all the previous files are overwritten with the current file you have clicked on. I have checked my PHP and am pretty positive the fault is with the JS.
I have noticed that - since I have the PHP's return value alerted - that I get multiple alert boxes. If it is the first link you have clicked on since the main page loaded - then it is fine, but when you click on a second link you get the alert for each of the previous pages you clicked on in addition to the expected alert for the current page.
I hope I have explained well, please let me know if I need to explain better - I really need help resolving this. :) (and if you think the php script is relevant, I can post it - but it only prints out the $_POST variables to let me know what page info is being sent for debugging purposes.)
Thanks ahead of time,
Key
From jQuery .load() documentation I think you need to change your script to:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
var lnk = $(this).attr("href");//LINK TO LOAD
$("#fileuploadframe").load(lnk,
function(){
//EXECUTE AFTER LOAD IS COMPLETE
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{
action:"savePage",
html:response,
id: theID
},
function(data){alert(data);}
);
});
});
As for the multiple responses, you can use something like blockui to disable any further clicks till the .post call returns.
This is because the line
$("#fileuploadframe").load(function(){
Gets executed every time you press a link. Only add the loadhandler to the iframe on document.ready.
If a user has the ability via your UI to click multiple links that trigger this function, then you are going to run into this problem no matter what since you use the single iframe. I would suggest creating an iframe per save process, that why the rendering of one will not affect the other.