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 1 year ago.
Improve this question
I'm new tp Javascript and I'm trying to code a "simple" e-commerce.
The thing is, I have a cart that appears (slides from the side) whenever a new item is added, and inside of the cart, the item is represented with a container that looks like this:
Everything works perfectly EXCEPT ONE THING.
Since the elements are added to the cart by the user, they do not exist previously inside of it, and my code can't get the buttons before the cart appears, so they end up being "null".
In order for the cart buttons to work I have to reload the page, so that they would already be there (cause I'm using Local Storage and therefore the DOM reloads with the elements already there, and now it can find the buttons)
Is there any way to make my code wait for the elements to be added to the cart and appear in the DOM and only THEN retrieve them?
Since it's a to attach to this post, I leave you with the repository, so you can take a look (the only important things are in the folder "CATALOGO" > products.html // folder "assets/js" > "catalogo.js":
Github Code Repository
The code is a bit messy, since I've been back and forth patching and retrying a bunch of stuff to achieve that, but with no result.
(The EventListener DOMContentLoaded, also won't work since the dom is loaded, but the elements inside the cart still don't exist)
(I'm NOT looking for a solution such as setTimeOut)
I thought I could use Selenium, but I'd have to use node, and I wanted to do it only with JS.
I am on a phone and can't check your code, but based on the details you gave, you need to capture the input bubble (since it's not possible to target a dynamically created button directly)
To do so, put your event handler on an element that already exists without user input, such as an upper div... when the user clicks the button the event will bubble up to that div and you can capture it there.
You said you're new to Javascript, so if you're unfamiliar with the concept Google search for "Javascript event bubbling" and there are plenty of great articles.
EDIT: I created a very basic example of this in action if you want to see, just save this as an HTML file and open in your browser.
<html>
<body>
<div>
<button id="addBtn">Add New Button</button>
</div>
<div id="newBtnContainer"></div>
</body>
</html>
document.getElementById('addBtn').onclick = function() {
var btn = document.createElement('button');
var btnText = document.createTextNode("Dynamically Created Button");
btn.appendChild(btnText);
document.getElementById('newBtnContainer').appendChild(btn);
}
document.getElementById('newBtnContainer').onclick = function() {
alert('Found the button!');
}
Hope this helps your use case
Thanks
Why not just try to get those buttons once something is added in the cart?
Related
I have a table with 3 action buttons and a select element, the data in the table changes after selecting an option in this select (action buttons remain the same, with different attributes values, obviously), after I "clean" (with .html("")) the table and show the new data, action buttons stop working (they preserve the same class as in the table original state), I found a few solutions but I don't know how to implement in my project, because I'm using jquery.
For example, I want to try the answer in this question, but the example he gives is pure JS, not jQuery.
possible solution
Is it really the problem that buttons preserve the same class? If it is, how to remove the event listener from the original elements? I'm using jQuery to manage click events.
Just after I posted this question I went to try out the given solution in the link of "possible solution", I copied and pasted the code after the click event handler from jQuery (you know, $(document).on("click"), etc).
Maybe this question would be useful for people who has the same problem but doesn't know exactly what to search to get a solution. I had the same issue.
For study purposes i'm doing some tests with the web version of Whatsapp (https://web.whatsapp.com/). I found out that when i type an emoji shortcut in the text box, the app will automatically change it to the correspondent emoji. For instance, if i type
(y)
It will be replaced by
What i'm trying to learn to improve my JS skils is : how to find out what function is doing this and and how can i manually call the function.
I tried to find it on Devtools but could not suceed.
Any ideas ?
Thanks
I am answering your question about figuring out what might have caused a DOM change. I am not answering your derivative question about what is actually causing the change.
Leverage the browser's devtools. You have the ability to break on changes to a DOM element. You have tagged google-chrome-devtools so going with that example:
Navigate to the "Elements" panel
Right click on the element you want to monitor
Click "break on → subtree modifications"
Trigger the change
You will then be in the "Sources" panel with an active breakpoint on whatever code caused the modificiation
From there, navigate the call stack until you find the function at whatever level you are looking for
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I need some help here. I know there are some real smart people here.
how can i make two different links fire at the same time when somebody clicks on my link.
1. is the auto download and when that is happening at the same time they go to link 2 an explanation page or such.
i have no HTML code, nor do i know how to set it up..but I'm happy to re-compensate with a small donation.
I placed a drawing to exemplify:
Hopefully that will clear things a bit better.!
You could simply add a Javascript listener to the download link. Something along the lines of ...
$('#my-download-link').click(function() {
setTimeout(function() {
window.location.href='myotherpage.html';
}, 1000);
});
The setTimeout is useful here to ensure the download has been triggered before redirecting.
I am assuming you are working jQuery and you are at a novice level. First, you begin with a document ready function, as always. Inside that you put your click listener, in this case "#navigation a" is the selector. Now whatever actions you need can go sequentially inside of this function. For example, below I am removing a class and then adding another one. But you can fire multiple clicks, cascade functions, whatever you want to do:
$(document).ready(function(){
$("#navigation a").click(function(event){
$("#navigation a").removeClass("selected");
$(this).addClass("selected");
// you could put function calls here
});
Notice how when you refer to your selector object a second time or more, you can use (this) as a ref. However, if your code gets more complex than this, you will want to learn a framework so that multiple things can be updated at once automatically, rather than manually firing individual function calls. Hope this helps.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
There is one question about jQuery and good using I am asking myself for a while.
Is there a difference between setting an event handler through jQuery in $(documemt).ready() an setting it in HTML in the DOM event handler?
To make it a little bit clearer: I don't want longer loadtimes by adding many events to my site.
An example: I want to add an ajax dropdown to display the new messages in my forum instead of just redirect to the inbox. I got two ways to do this.
• the jQuery way => $(documemt).ready()
$(document).ready(function () {
$(".new_messages_link").click(function (e) {
e.preventDefault();
// Ajax query an showing the dropdown
});
});
Just bind the event handler in jQuery, after the site is loaded. Probleme here is, that the the click only works after the site is fully loaded. A problem with large images, that slows the site down.
• the html DOM way
New Messages
function show_new_messages(var element) {
// Ajax query an showing the dropdown
}
This is no strict programming, you need to change the html, if you change the method, but you don't need to wait for $(documemt).ready(). Also there is no load during showing the site, just if you click, am I right?
The Problem:
So my question is, what should I use? What is better, what is the real difference? And for information, it is not just one event handler I want to set, there are many, so loading time is important.
I am not sure, I have a bad feeling in putting too much code in $(documemt).ready() functions.
If you're going to use jQuery then you should use the $(document).ready(function(){}); method. This is called "Unobtrusive Javascript" and allows you to separate your business logic/behaviour from your presentation/markup.
(Just a note to say that by the $(document).ready(function(){}); method I'm actually more so referring to your event binding in your example)
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
Using inline scripting might be slightly faster but $(documemt).ready() approach is more reliable and it helps you to maintain the code by providing a separation layer between HTML & JS.
Note: Inline functions might still not be available on page load if related script has not been loaded yet. This might lead to unexpected behaviour or errors.
Also there is no load during showing the site, just if you click, am I right?
Clicking the link will only work once the show_new_messages script has loaded, so your user might see an error message if you use the onclick attribute and they click on it before the script loads. Setting up the event handler in $(documemt).ready() means that by the time the event handler is attached, all of the scripts will have loaded too, so clicking on it will work.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Background info:
I have a function that when called creates select list inside a form and populates it. After that the script runs through the options in the list and looks for a certain value. If the value is there, the script 'selects' that option.
Problem:
Because the list is dynamically created and is some times very large, it takes a while to load. When this happens, the second part of the script (the part that selects an option), does not do anything because the select list has not had time to load.
Idea for a solution:
What would be nice is to call the second part of the function (as a separate function) in an onload event for the select list. But select lists are not supposed to have an onload attribute. The other idea is to simply add a delay, but one day the delay may not be long enough.
How are you doing your AJAX call? Most AJAX libraries will provide the mechanism to do a callback on successful completion. For example in jQuery:
$("#myList").load("ajax.url", function(){
//your content has been loaded, so you can do your selection logic here
});
If you're handling the ajax response manually & building your list in javascript, then you're already have code that knows when the list is finished, so you can just do the selection part once that has finished rather than as a separate function (like as zyeming has suggested).
If that doesn't help you, it might be worth posting some code so people can give you a more specific answer.
Using a delay is not reliable. Whatever you're using to populate the select list should call the function directly when it is finished.
alternately:
Since there is no "onload" event for the select all you can really do it have a function that calls itself after a timeout. If the length of the items in the select list has changed from zero, you know something is currently adding items (the start-point). If the start-point has been reached and nothing has changed after the next timeout, you can assume items have stopped being added to the list, so you can then run the second function.
Why don't you make the function which selects option a callback function. It will be call at the end of the function which creates the list. E.g.
function createList(onComplete) {
// Create the list and maybe other tasks
onComplete();
}
Note: might not be like this but I think you've got the idea...
Ok, I have finally fixed the issue. The solution was completely different than what was discussed here. Basically, I was using 'new Option(value, text)' to add options to my list. I ended up throwing in a if statement and when a value equal what I needed is used new Option(value, text, true). and that solved the problem. All in a day's work.