|
Quote:
<tr>
<td class="heading">JGServices</td>
<td class="numeric-amount">
<input type="text" size=10 value="99.00" onfocus="this.blur()">
</td>
<tr>
<tr>
... Your HTML has no closing </tr> tags; instead, it has two opening <tr> tags.
The browser will do its best to cope with this invalid HTML; a new opening <tr> tag will automatically terminate the previous row and start a new one.
But since you have two of them in a row, you end up with a blank row every time you have <tr><tr> .
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard Deeming wrote: <tr><tr>. Reminds me of the policemen's song in The Pirates of Penzance.
|
|
|
|
|
Making a fetch call and getting html back, like so:
<tr>
<td class="heading">JGServices</td>
<td class="numeric-amount">
<input type="text" size=10 value="99.00" onfocus="this.blur()">
</td>
<tr>
<tr>
<td class="heading">ShippingHandling</td>
<td class="numeric-amount">
<input type="text" size=10 value="25.00" onfocus="this.blur()">
</td>
<tr>
<tr>
<td class="heading">District</td>
<td class="numeric-amount">
<input type="text" size=10 value="123.00" onfocus="this.blur()">
</td>
<tr>
<tr>
<td class="heading">Penalty</td>
<td class="numeric-amount">
<input type="text" size=10 value="250.00" onfocus="this.blur()">
</td>
<tr>
...then using javascript to append it to the TBODY tag of the relevant table. I've tried two ways:
let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
let ih = t.innerHTML;
ih += data;
t.innerHTML = ih;
...and...
let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
t.insertAdjacentHTML('beforeend', data);
And in both cases, the browser renders it like this:
<tr>
<td class="heading">JGServices</td>
<td class="numeric-amount">
<input type="text" size="10" value="99.00" onfocus="this.blur()">
</td>
</tr>
<tr></tr>
<tr>
<td class="heading">ShippingHandling</td>
<td class="numeric-amount">
<input type="text" size="10" value="25.00" onfocus="this.blur()">
</td>
</tr>
<tr></tr>
<tr>
<td class="heading">District</td>
<td class="numeric-amount">
<input type="text" size="10" value="123.00" onfocus="this.blur()">
</td>
</tr>
<tr></tr>
<tr>
<td class="heading">Penalty</td>
<td class="numeric-amount">
<input type="text" size="10" value="250.00" onfocus="this.blur()">
</td>
</tr>
<tr></tr>
I can't figure out why or how to stop the extra, empty rows from appearing. Anyone have any ideas?
- Bill
Measure with a micrometer. Mark with a crayon. Cut with an ax.
|
|
|
|
|
I have been racking my brain trying to figure this out. All I want to do is have a element come from the right edge of screen into the center of the screen slowly. I'm trying to use the "transition" method via javascript and I'm just lost. I want this to happen as soon as a click on a button control. Please help!!!
Thanks!
|
|
|
|
|
Sometimes I use JavaScript to animate elements, and other times I use CSS to assign the object with animation parameters. Using CSS to animate an element is extremely simple. You specify the CSS property that you want to animate. For example, if I wanted to animate an element from point A, to point B on the screen, I would set the element's CSS parameters to animate any change in the element's top/left CSS value. From there, it's only a matter of setting the element's top or left position to a different value, and the animation occurs entirely on its own. Make sure that the div element you want to move has its position property set to "absolute", otherwise, the element will not be able to change its location on the screen. I'll include some JavaScript code that I've written which will provide you with an example.
function default_config_elem_for_animation(elem_id) {
var element = null;
var animations_on = null;
animations_on = global_animations_on;
if (animations_on === true) {
element = document.getElementById(elem_id);
if (element !== null) {
element.style.transitionProperty = "left, top, width, height, box-shadow";
element.style.transitionDuration = "0.3" + "s";
element.style.transitionDelay = "0.007" + "s";
element.style.transitionTimingFunction = "cubic-bezier(0, .55, .45, 1)";
}
}
}
|
|
|
|
|
Dear all,
I'm currently dealing with unit tests using Jasmine/KarmaRunner.
I'm wondering whether it is possible, that I can be shure,
that a tested method does not make other calls than the monitored.
I'v learned so far, how I can check the count, arguments and order
of calls from the tested method, which I expect.
But what if someone inserts a new line into the tested method,
that is unknown in the test und does "strange other things"...
Is there something like "Jasmine.allCalls( object, 'method')...?
Thx in advance and best regards!
Please stay objective and friendly
|
|
|
|
|
Perhaps you want to look at code coverage? Following in google returns results for me (addins for Jasmine.)
javascript jasmine code coverage
|
|
|
|
|
Hello jschell,
THX a lot for your reply and contribution.
No, the way to monitor code coverage was not ment.
Code coverage is very important, I use "ng test --code-coverage" and "..../coverage/TechRadar/lcov-report/index.html" for this.
What I want to accomplish is, that an existing unit test turns red, when a new call to some method or function is inserted,
that is not monitored by the test.
May be a method looks like this (simple example):
a() {
this.b(1);
this.c('x');
}
I write a test, thats reflects both calls, order and arguments.
Now (later) someone inserts a new call into the method and the method looks now like this:
a() {
this.b(1);
this.d();
this.c('x');
}
I want the test to turn red then.
I hope, I could make it somewhat clearer now
THX and best regards!
|
|
|
|
|
NoMoreStackOverflow wrote: that a tested method does not make other calls than the monitored
Looking at that again and based on your other response....
No I doubt that exists. I have no idea how a test framework would even implement that. It would at a minimum require that the test code would have to specify every call that the code would make.
Only reasonable way I could even think that part would work is that every single method call would need to be mocked. Because otherwise a call to another class could then call to another method that was not tracked.
Additionally I suspect that maintaining it would be a maintenance nightmare.
A unit test should test that the method works. Not how the method implemented the solution.
|
|
|
|
|
Hello jschell,
THX a lot again for your reply and contribution
I have no idea about how to implement such a testing framework.
I just had that idea about "what if" and thats why I asked the question
Also a solution (if there is any) should be easy to implement and handle for me
So thanks again and maybe at some pt in the future I'll get a clue..
Best Regards
|
|
|
|
|
I wrote a function, where one can update an invoice. So the user clicks edit, the modal pops up, they change the price, and the function calls an API, updates the database, and processes the returned data.
Then it calls a function within, that changes the invoice price on the page, and creates a mutation observer to detect the price change, and tallies up the invoice cost, and changes the total at the bottom.
The purpose of this mutation observer, is to wait for the DOM to update the cost, and when the DOM signals it's been done, then go back to the DOM and tally up the cost, and change the total cost span element value.
Everything works, but it only works if you do this twice. Like if I edit using the modal, submit, the observer doesn't fire. but if I edit the invoice again, then it works.
Should I call my function within my function again?
Or am I missing something here, and need to redesign the whole thing.
I'm reluctant to post any code, because the function is huge, I'll post the basics here.
I'd hate to have to split code up here, but might have to. move the mutation observer outside the posted function, to inside the API function call.
I want to do this the correct way, so it doesn't come back on me and works every time.
Calling function
function callApi() {
Prepare to send data
fetch {
.then(data => {
process data
call the function below
}
}
The function called after fetch, I can target the entire invoice within the DIV, but I targeted the single span element that contains the cost.
export function updateAnyTypeInvoiceInvoiceRecordMutationObservable(classCode, catalogId, invRecordId, jsonData, data) {
Javascript that changes the invoice values
const observer = new MutationObserver(mutationsList => {
for (const mutation of mutationsList) {
console.log('Text content has changed:', mutation.target.textContent);
Code that adds up all the invoice cost, and changes the total at the bottom
let mutationRecords = observer.takeRecords();
console.log(mutationRecords);
observer.disconnect();
}
});
const config = { childList: true, subtree: true, characterData: true };
const targetNode = document.getElementById('invInvoiceAmount_' + classCode + '_' + invRecordId);<br />
observer.observe(targetNode, config);
Perhaps, call this function again here?
} catch (error) {
console.log('updateAnyTypeInvoiceInvoiceRecordMutationObservable Error', error);
alert('updateAnyTypeInvoiceInvoiceRecordMutationObservable Error: ' + error);
}
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Strange how when I post something here, it makes me rethink the problem in a different way.
I concluded that I need to create the observer first, populate that observer with code to update the totals posted at the bottom, and then run the code to change the invoice. Pretty much backwards in order, but I get it now. At least I think this is correct, and it works so far, but I haven't tested enough to confirm that it doesn't conflict with anything.
Makes sense now, setup the mutation observer, program the response when it fires, then run the code to update the invoice.
export function updateAnyTypeInvoiceInvoiceRecordMutationObservable(classCode, catalogId, invRecordId, jsonData, data) {
const observer = new MutationObserver(mutationsList => {
for (const mutation of mutationsList) {
console.log('Text content has changed:', mutation.target.textContent);
Code that adds up all the invoice cost, and changes the total at the bottom
let mutationRecords = observer.takeRecords();
console.log(mutationRecords);
observer.disconnect();
}
});
const config = { childList: true, subtree: true, characterData: true };
const targetNode = document.getElementById('invInvoiceAmount_' + classCode + '_' + invRecordId);<br />
observer.observe(targetNode, config);
Javascript that changes the invoice values called last
} catch (error) {
console.log('updateAnyTypeInvoiceInvoiceRecordMutationObservable Error', error);
alert('updateAnyTypeInvoiceInvoiceRecordMutationObservable Error: ' + error);
}
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
jkirkerx wrote: I concluded that I need to create the observer first, populate that observer with code to update the totals posted at the bottom, and then run the code to change the invoice.
Correct - the mutation observer can't notify of mutations that occurred before you started observing them.
That leads to the question of why it seems to work the second time. Since the first observer is only disconnected once a mutation has been observed, it will still be waiting to observe a mutation when the second update is applied.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
It's my first time working with this, and it took me awhile to figure out how it works. That's for confirming my thought on this!
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Tammy Gombez wrote: I'm currently facing a perplexing issue Do you mean why have you posted a C++ question in the Javascript forum?
|
|
|
|
|
More like "How do I get banned for spam as quickly as possible?"
Spammer in JavaScript forum (Tammy Gombez)[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Still learning.
I'm using the SWAPI - The Star Wars API for my test data.
I can fetch the data from https://swapi.dev/api/people (no problem)
But I'd like to be able to iterate over the films array to fetch each movie name.
I'm not sure what the syntax I should use, or if it is the proper way to do it.
the getFilmName function returns
[object Promise]
I tried adding an await before the call to getFilmName and give does not "compile" :
const filmName = await getFilmName(filmURL);
Thanks.
async function getFilmName(url) {
const res = await fetch(url);
const data = await res.json();
return data.title;
}
async function getPeople() {
console.log("fetchNames");
const url = "<a href="https:
const res = await fetch(url);
const data = await res.json();
console.log(data);
const results = data.results;
results.map((person) => {
console.log(<code>${person.name} stars in :</code>);
person.films.map((filmURL) => {
console.log(filmURL);
const filmName = getFilmName(filmURL);
console.log(<code>filmName: ${filmName}</code>);
});
});
}
getPeople();
Thanks.
CI/CD = Continuous Impediment/Continuous Despair
|
|
|
|
|
Maximilien wrote: I tried adding an await before the call to getFilmName and give does not "compile" : The calling function would also have to be asynchronous or called within the context of a promise.
async function blah() {
try {
const response = await fetch('blah.com');
return await response.json();
} catch(ex) {
console.error(ex);
}
}
blah();
(async () => {
await blah();
})();
Jeremy Falcon
|
|
|
|
|
Thanks, but that does not help with my example.
My problem is with the getFilmName function (or the call to).
CI/CD = Continuous Impediment/Continuous Despair
|
|
|
|
|
Jeremy is correct - any function that uses await needs to be marked as async .
In this case, the callback to map would need to be async . However, that would result in an array of promises.
But since you're not doing anything with the array returned from either map call, that won't make much difference.
Assuming you actually want to do something with the results, try:
async function getPeople() {
console.log("fetchNames");
const url = "https://swapi.dev/api/people";
const res = await fetch(url);
const data = await res.json();
console.log(data);
const results = data.results;
const promises = results.map(async (person) => {
const filmPromises = person.films.map(getFilmName);
const films = await Promise.all(filmPromises);
return { person, films };
});
return await Promise.all(promises);
}
(async () => {
const people = await getPeople();
people.forEach(person => {
console.log(`${person.person.name} stars in :`);
person.films.forEach(filmName => console.log(filmName));
});
})(); Demo[^]
Promise.all() - JavaScript | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks,
I'll study this.
I'm not sure I still understand.
CI/CD = Continuous Impediment/Continuous Despair
|
|
|
|
|
I'll help you with the array of promises part, but not until I get a thumbs up too.
Jeremy Falcon
|
|
|
|
|
I promise I will.
CI/CD = Continuous Impediment/Continuous Despair
|
|
|
|
|
Richard is spot on with his reply. Mine was more theory. Take it as a compliment. Sometimes I just chat theory when I recognize the poster because I trust they take it and run with it. It's still the same principle, but just needs to be called from within the context of an Array.prototype.map callback. There are a couple ways to go about this.
1 You can still use an async IIFE anyway. IIFE is a functional/JavaScript concept that stands for Immediately-Invoked Function Expression and is pronounced iffy . It does exactly what it says and can be put anywhere. It's a quick and dirty way to call async code from a sync routine as well.
2 You can make the map callback itself async. However, this means you'd also have to deal with sync/async issue still.... just "one level" higher so to speak. Array.prototype.map iterates, much like IEnumerable in C#. In JavaScript, async/await is essentially syntax sugar for promises. Makes life easier and for cleaner code. But it also means you can interchange them and loop through your nested map like this:
results.map(async person => {
await Promise.all(arr.map(async filmURL => {
const filmName = await getFilmName(filmURL);
}));
};
Keep in mind though, this simply shifts the requirement for async up one nested level. The parent map would still have to be called within the context of a promise or async/await still. Same exact syntax. Keep in mind though, using Promise.all is old. It works, but no cool points for using it.
As a side note, this is mainly for educational purposes. An API shouldn't be called in a loop. Redesigning the API, using GraphQL, streaming the data, etc. should all be considerations to rethink the approach of opening web requests in a loop.
Buttttt.... if you need a loop-like concept, you'd be better off with generators. For example, if you used generators, you'd be able to pull off something like this. Just trying to whet your appetite.
for await (const filmName of getFilmNames()) {
}
Anywho, the super short answer is just go with #2 and don't forget to use promise.all on the outer nest too.
Jeremy Falcon
|
|
|
|
|
I'm trying to show progrees bar while uploading a file using axios, according to this youtube channel : OpenJavaScript("Axios upload progress with progress bar tutorial"). If I use 'https://httpbin.org/post' for the axios post parameter it run well, but if I change to my destination folder (D:\laragon-portable\www\cv\public\uploads) it result with error 'POST http://localhost:8080/uploads 404 (Not Found)', I tried 'http://localhost:8080' and 'http://localhost:8080/uploads'(I use local development server in CodeIgniter 4), but it error too,....what should I write for the url ?
|
|
|
|
|