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.
Related
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 12 days ago.
Improve this question
im new to react and I came into a problem I cannot seem to fix,
Im trying to reacreate the iPhones notes app and theres this issue that when I first hit + to add a new note it doesnt get added into the state array, whats weird is that it works normally the second time I click it and so on
My 2nd issue is that theres this "activeObj" state variable which stores the clicked notes object but also normally works on the 3rd try, the first and second clicks look like this (check screenshots)
I tried changing the syntax and the structure of the functions but my skills are still limited since its my first week of doing react
When you call the setState method, it updates the state behind the scenes, and then schedules a re-render of your component with the state variable (e.g. arrayOfNotes) set to the new value. Because you've got your console.log inside the function that's calling the setState method, you're logging the old value, because it hasn't done the re-render yet.
Next render cycle it'll be fine, in fact you could move your console.log into the body of the component and see it'll behave as you're expecting.
When you're updating a state and the new state value depends on the previous one, I'd also recommend using the function version of setState precisely for this reason, e.g.
setArrayOfNotes((prev) => [newNoteObject, ...prev])
This is because prev will take into account other sets done this render cycle, but the way you're doing it currently won't. Doing it this way will certainly save you from other bugs later on.
The cycle order also is what's causing your second issue. You're setting the active note, but because the set won't apply until the next re-render, activeNote will still be the old value in the line below, when you're expecting it to already have been updated. You can just pass id in there instead in this case.
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?
I am using <cfselect>'s bind attribute to bind load a list of states. That bind is associated with another <cfselect> which loads associated cities. Those two work fine.
Now I need to add a third select list. When the first cfselect is changed, I want to pass the value of both cfselect's to jQuery, to load a third list. The third list is a plain html <select>. This is basically a old inherited code so I know mix of both things is a bad idea.
So here is what is happening. The first calls go fine. It passes the correct cityid. The next time I change the state, its state changes through cfselect, but it passes the old cityid rather than new one. This creates an issue for the third drop-down, which does not load the results.
So basically the structure is like this:
First cfselect bind loads states
Second cfselect bind loads the cities based on the stateid passed
Third select gets the state and city values from the first two cfselect's to load zip codes
Now the jQuery code:
$(document).on('change',function() {
var a = $("#cfselect1").val();
/*
The next line seems to be a problem area. It always fetches
the old cityid. Maybe due to the ext js bind is loading
later than jquery being first
*/
var b = $("#cfselect2").val();
$ajax({ajax code here})
});
I hope I made a question clear.
As you've already au fait with jQuery and can use it, rip the <cfselect> out completely and do the whole lot with a vanilla <select> and jQuery's .ajax() method. This way you remove the clashing.
You have basically run up against the fundamental flaw of using ColdFusion's UI wizards: they are poorly written and do not inter-op with other requirements at all well. <cfselect> is not designed to be implemented in conjunction with other JS technologies. It's basically an evolutionary dead end (and the dead end occurred about ten years ago).
Here is some guidance for ripping out <cfselect> out: "CFSELECT-CHAINED"
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.