Below given is my onclick event handler which is triggered to search images of the movie when I enter the movie name in the search bar, thus the input value here is a movie name. The function used to get the movie images is TopMovies() function through API.
const SearchButton =document.querySelector('#search');
const InputValue = document.querySelector('#input_value');
SearchButton.onclick = function(event){
event.preventDefault();
const value = InputValue.value;
console.log(value);
const newUrl =multi_search + '&query=' +value;
function TopMovies(searched_movies){
const sectionOfMovies = document.createElement('div');
sectionOfMovies.classList.add('search_movie_section');
sectionOfMovies.setAttribute('class','search_movie_section')
searched_movies.map((searched_movie)=>{
const img= document.createElement('img');
const a= document.createElement('a');
img.src= image_url + searched_movie.poster_path;
a.appendChild(img);
sectionOfMovies.appendChild(a);
});
return sectionOfMovies;
}
fetch(newUrl) // fetching the images through API
.then((res)=>res.json())
.then((movie_data)=>{
const searched_movies= movie_data.results;
const Poster_Block = TopMovies(searched_movies);
topMovies.append(Poster_Block)
console.log('movies',movie_data);
InputValue.value='';
})
.catch((error)=>{
console.log('err',error)
})
}
All the above code is dumped into this SearchButton.onclick = function(event)
Now the issue I am facing is that if I search for a movie by clicking on the search button 1st time, I am getting the images for that movie 1 time. if I click on the search button 2nd time. Similarly, if I click on the search button 3rd-time total images are fetched 3 for the same input value. In short, the images are fetched as many times I click on the search button for the same input value.
For eg:- If I search for the movie Lion king and click on the search button 2 times, the images are fetched 2 times. So how can I fetch the movie image one time even though I click on the search button 2 times or more with the same input value "Lion king"?.
How can I stop fetching images multiple times?
According to me the images are fetched multiple times for the same input value is because I have dumped all my code in SearchButton.onclick=function(event) thus images are fetched every time when I click on the search button.
Help would be appreciated!!
One simple solution is to disable the button, once you clicked and enable the button once its response status is 200 or something error. Note: clear the HTML for the div before you append, else it will append twice.
Disable the button onClick of it and re-enable it after getting a response.
Remember to clear the div element onClick of the 'search' button.
So that the element will only have new results.
Related
I am trying to run a script that automatically navigates from one website to another upon button click, enters text into a form field and clicks a button on the second website. However, the script is not working as intended and is not entering the text or clicking the button.
button.addEventListener("click", function() {
setTimeout(() => {
// Attempts to find the form element with the name attribute "url" and enters the text "Test"
var urlInput = document.getElementsByName("url")[0];
if(urlInput) {
urlInput.value = "Test";
}
// Attempts to find the element with the class "submit" and clicks it
var submitBtn = document.getElementsByClassName("submit")[0];
if(submitBtn) {
submitBtn.click();
}
}, 3000);
});
I have added a setTimeout of 3 seconds to ensure that the website has sufficient time to load before attempting to access the form elements.
Also, I have added a check to see if the form element and the button are found and trying to access them only if they are found.
I make verification page that have a button verify, when click that button will be show image "Yes/tick" mark on other page. Verification rules : when meet the condition which is if have selected 3 checkbox, the verification is accepted, user will click button verify, and image yes mark will be showing in other page (the main page)
I've tried to send image to main page but just only showing image in current page and showing all div main page, not only image that I need. The checkbox rules already working with some show alert function
This is for the verification rules checkbox :
function check(){
var checked=0;
$( "input:checkbox" ).each(function() {
if($(this).is(':checked')){
checked++;
}
});
if(checked>2){
alert('Ok!');
}
else{
alert('At least 3 checkboxes need to be selected!');
}
}
and the function for image that I'm trying :
function getImage(){
localStorage.setItem('/biz/eKYC/EK01.html','../../sampleData/dummyImages/verifOK.jpeg');
}
var image = "../../sampleData/dummyImages/verifOK.jpeg";
//location.href = '/biz/eKYC/EK01.html';
//var page = '/biz/eKYC/EK01.html';
function toggle_visibility(id) {
$(".verif").click(function(){
$(location).attr('href',image);
$("#image").show();
$("#custInfo").hide();
return getImage()
});
}
// // document.getElementById('imgVerifOK').src = icon.replace('30x30', '125x125');
// // document.getElementById('imgVerifOK').style.display='block';
I expect just image that showing but it shows all div in main page
It's a little difficult to tell exactly what you're asking, or even what the intended code is supposed to accomplish, but in looking at your toggle_visibility function this line seems suspect:
$(location).attr('href',image)
This will change the URL of the page to be the URL of your verification image, and you do it whenever a user clicks on any element with the class verif. If that's actually what you intended you need to explain better about the structure of the DOM of your page (is every one of these images in an iframe?) and maybe show how things are going wrong.
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.
I am trying to load a DIV from another page, based on the data attribute of the button clicked. Here is what I have so far:
$('#quick_shop_modal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget)
var product = button.data('product')
var modal = $(this)
modal.find('.modal-title').text('Quick Shop ' + product)
$('#quick_modal_body').load('product #prodDescMain')
});
So when the modal is opened, it should use the product data attribute of the button to load the #prodDescMain div of that page.
Data attribute example: Leather_Care_Kit.php
which means the last line should read:
$('#quick_modal_body').load('Leather_Care_Kit.php #prodDescMain')
However nothing shows up. If I hard code the filename it works though?
product is a variable, so you use string concatenation:
$('#quick_modal_body').load(product + ' #prodDescMain')
I am trying to click a button in HtmlUnit to login to a site (m.pge.com) but it is not working. The browser stays on same page. I had similar issue with another site. I tried searching but didn't get a definitive answer.
Any ideas what I might be doing wrong ?
Here is code..
Web_Client = new WebClient(BrowserVersion.CHROME);
Web_Client.getOptions().setCssEnabled(false);
Web_Client.getOptions().setThrowExceptionOnScriptError(false);
Web_Client.setJavaScriptTimeout(15000);
Web_Client.getOptions().setRedirectEnabled(true);
//Web_Client.setAjaxController(new NicelyResynchronizingAjaxController());
// load home page
HtmlPage page = Web_Client.getPage("https://m.pge.com/#login");
HtmlTextInput userName = loginForm.getFirstByXPath("//*[#id=\"usernameField\"]");
HtmlPasswordInput passWord = loginForm.getFirstByXPath("//*[#id=\"passwordField\"]");
userName.setValueAttribute(user);
passWord.setValueAttribute(password);
HtmlButton button = null;
DomNodeList<DomElement> buttonList = page.getElementsByTagName("button");
for (Iterator buttonIter = buttonList.iterator(); buttonIter.hasNext();) {
DomElement domElement = (DomElement) buttonIter.next();
if(domElement.asText().equals("SIGN IN")) {
button = (HtmlButton)domElement;
}
}
loginpage = button.click();
It is too tedious and unclear to type in comment so i type it as answer and will update with progress.
Part1: login
The first thing is that are you sure you target the button correctly and where did you initialize the HtmlPage loginpage. Normally, when you assign
loginpage = button.click();
It will get you the login page,but sometimes it is weird that it doesn't assign new page but rather change the current page. that is your
page
You may try to print it out before button click and after button click to see if this page changes? that is
System.out.println(page.asText());
button.click(); // no need to assign page, if the page changes itself
System.out.println(page.asText());
Part2: Search
When you have done input textbox and button click, you will have to target the changes element after search again and get its content, for example, if it is a element, you should probably target the element after button click and get the content you want afterwards. If you target it before button click, the content in that element won't changes itself, you need to get that again.