Use variable name fadeIn and Prepend - javascript

I want to prepend this variable "logText" and make it fade in at the same time.
var logText = today + ":" + " " + document.getElementById("textBox").value + '<br>\n';
$("#logContent").prepend(logText);
Here is what I got but it doesn't work.
var logText = today + ":" + " " + document.getElementById("textBox").value + '<br>\n';
$("#logContent").prepend($(logText).fadeIn('slow'));

$("<p>" + today + ": " + $("#textBox").val() + "</p>") // new DOM Node
.css("display", "none") // hide it
.prependTo("#logContent") // prepend it to #logContent
.fadeIn("slow"); // fade it in slowly
fiddle

$("#logContent").prepend(today + ": " + $("#textBox").val() + '<br>').fadeIn('slow');

Related

In jquery run time dynamic value not able to get it

I am creating the complete syntax of jquery and assigning it in the PHP field and on the button click I get the field value but the problem is in jquery the syntax I used to replace their value is not replaced. It shows the same variable.
<input type="hidden" name="ajaxUrl" id="ajaxUrl" value="'index.php?mode=ajax&action=modHistory&process=save&account={$account}&date=' + uenc(readNextdate('dateField')) + '&response=' + uenc(fieldVal('response')) + '&contact=' + uenc(fieldVal('contact')) + '&salesman=' + uenc(fieldVal('salesman')) + '&activity=' + uenc(fieldVal('activity')) + '&project=' + uenc(fieldVal('project')) + '&owner=' + uenc(fieldVal('owner')) + '&status=' + uenc(fieldVal('modstatus')) + '&product=' + uenc(fieldVal('product')) + '&duration=' + uenc(fieldVal('duration')) + '&username=' + uenc(fieldVal('username')) + '&oldProduct=' + uenc(fieldVal('oldProduct')) + '&oldDuration=' + uenc(fieldVal('oldDuration')) + '&oldActivity=' + uenc(fieldVal('oldActivity')) + '&oldDate={$pointer}{$save}&extraId={$extraId}&time=' + new Date().getTime() + '&token={$XSRFToken|escape:'url'}'">
At the jquery end I suppose it will replace the jquery syntax with there value but it shows the same value -
'index.php?mode=ajax&action=modHistory&process=save&account=10002&date=' + uenc(readNextdate('dateField')) + '&response=' + uenc(fieldVal('response')) + '&contact=' + uenc(fieldVal('contact')) + '&salesman=' + uenc(fieldVal('salesman')) + '&activity=' + uenc(fieldVal('activity')) + '&project=' + uenc(fieldVal('project')) + '&owner=' + uenc(fieldVal('owner')) + '&status=' + uenc(fieldVal('modstatus')) + '&product=' + uenc(fieldVal('product')) + '&duration=' + uenc(fieldVal('duration')) + '&username=' + uenc(fieldVal('username')) + '&oldProduct=' + uenc(fieldVal('oldProduct')) + '&oldDuration=' + uenc(fieldVal('oldDuration')) + '&oldActivity=' + uenc(fieldVal('oldActivity')) + '&oldDate=1638172792&FIELD1='+uenc(readNextdate('mod-RCMANL-ANAL01'))+'&ADDN-FIELD1=RCMANL-ANAL01&FIELD2='+uenc(jqfieldVal('.RCMANL-ANAL15 select'))+'&ADDN-FIELD2=RCMANL-ANAL15&FIELD3='+uenc(jqfieldVal('.RCMANL-ANAL13 input'))+'&ADDN-FIELD3=RCMANL-ANAL13&FIELD4='+uenc(readNextdate('mod-RCMANL-ANAL51'))+'&ADDN-FIELD4=RCMANL-ANAL51&FIELD5='+uenc(readNextdate('mod-RCMANL-ANAL80'))+'&ADDN-FIELD5=RCMANL-ANAL80&extraId=&time=' + new Date().getTime() + '&token=2d62814f617129a0a611dd505ec239a2'

Cannot read item in nested array?

I have a nested array inside a list like the following:
{total_results, page, results [id, species_guess, observed_on_details {date, week, month, hour, year}]}
I am trying to get just the id, species_guess, and date using forEach.
function observationSummary2(data) {
data.results.forEach(element =>
console.log('#' + data.results.id +
" - " + data.results.species_guess +
' (' + data.results.observed_on_details.date + ')')
);
}
This is saying " Cannot read property 'date' of undefined ". I have tried using a for loop like this and it worked just fine.
for (let i = 0; i < data.results.length; i++) {
console.log('#' + data.results[i].id + " - " + data.results[i].species_guess + ' (' + data.results[i].observed_on_details.date + ')');
}
Can anyone tell me where am I doing wrong here, sorry I am still new at this language.
you should use foreach as follow
function observationSummary2(data) {
data.results.forEach(element =>
console.log('#' + element.id +
" - " + element.species_guess +
' (' + element.observed_on_details.date + ')')
);
}
Instead of
function observationSummary2(data) {
data.results.forEach(element =>
console.log('#' + data.results.id +
" - " + data.results.species_guess +
' (' + data.results.observed_on_details.date + ')')
);
}
Replace "data.results" with "element"
function observationSummary2(data) {
data.results.forEach(element =>
console.log('#' + element.id +
" - " + element.species_guess +
' (' + element.observed_on_details.date + ')')
);
}
More info about "forEach()" here:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Attempting to output to a text box with Javascript

I'm creating a communications generator that will standardise SMS communications regarding critical IT incidents for my company. I've got an IF/ELSE statement that identifies whether an issue is new, updated, or resolved to pull the necessary information together and format it accordingly. As far as I can tell, everything here is fine, however I'm having an issue writing to a text box ('smsToSend') which should allow the user to review before they copy the text across to our sms sender app, as nothing is being output into this box.
function generateSMS(){
var issueTitle = document.getElementById("incidentTitle");
var advisorImpact = document.getElementById("advisorImpact";
var incidentUpdate = document.getElementById("incidentUpdate");
var incidentStatus = document.getElementById("incidentState");
var startTime = document.getElementById("startTime");
var endTime = document.getElementById("endTime");
var incidentPriority = document.getElementById("incidentPriority");
var incidentBrand = "TechTeam";
var systemImpacted = document.getElementById("systemImpacted");
var incidentReference = document.getElementById("incidentReference");
var smsToSend = document.getElementById("smsToSend");
if (incidentStatus != "Closed"){
smsToSend = "P" + incidentPriority + " " + incidentBrand + "IT RESOLVED: " + systemImpacted + ": " + incidentUpdate + ": Start: " + startTime + " End: " + endTime + " Reference: " + incidentReference;
}
else{
if (incidentUpdate == "We are investigating this issue"){
smsToSend = "P" + incidentPriority + " " + incidentBrand + "IT ISSUE: " + systemImpacted + ": " + issueTitle + ". " + advisorImpact + ": " + incidentReference;
}
else {
smsToSend = "P" + incidentPriority + " " + incidentBrand + "IT UPDATE: " + systemImpacted + ": " + incidentUpdate + ": " + incidentReference;
}
}
}
generateSMS();
alert.getElementById(smsToSend);
Try replacing all assignments to smsToSend like this:
smsToSend = yourValue;
With this:
smsToSend.value = yourValue;
Your problem happens because smsToSend is an instance of an element, rather than a variable linked to the displayed text. To update the element's value, you have to change the value property of the element.
The Right way of setting the value to a text box is
var smsToSend = document.getElementById("smsToSend");
smsToSend.value = "Your value";

Rewriting elements in html by innerHTML

i have a a code like that:
<p id = "outputLaps"></p>
JS:
document.getElementById("outputLaps").innerHTML = "Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds
and i don't want to rewrite it, but to display it under the previous "lap".
Thanks for answers :).
Use insertAdjacentHTML when you want to insert HTML.
var str = "Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds;
document.getElementById("outputLaps").insertAdjacentHTML("beforeend", str);
However, if you only want to insert text, you can append a text node:
var str = "Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds;
document.getElementById("outputLaps").appendChild(
document.createTextNode(str)
);
In case you want the text to go to the next line, you can either
Insert a newline character \n and style the paragraph with white-space set to pre, pre-wrap or pre-line.
Insert a <br /> HTML element.
Use different paragraphs. Seems the most semantic.
A better solution is to use <ol> or <ul id="outputLaps"> instead, and add <li>s to it.
var li = document.createElement( 'li' )
li.textContent = "Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds
document.getElementById( 'outputLaps' ).appendChild( li )
In this case, because .appendChild() returns the element being added, we can avoid the variable.
document.getElementById( 'outputLaps' )
.appendChild( document.createElement( 'li' ) )
.textContent = "Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds
Maybe you don't want the ugly bullets, so you can change them, or simply remove them with a CSS rule:
<style>
ul { list-style-type: none; }
</style>
You can use += to concatenate to the existing value.
document.getElementById("outputLaps").innerHTML += "<br>Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds
You can also use the insertAdjacentHTML() method, which doesn't modify the existing DOM nodes in the paragraph.
document.getElementById("outputLaps").insertAdjacentHTML('beforeend', "<br>Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds);

Storing data from a select tag to a string using Javascript

I'm trying to take information out of a form controlled by a select statement and store it in a string. The plan is to send the information gathered from the user via email, which I used PHP to do. I have an idea how to do it (a while loop that's controlled by how many lines are in the list,) but I can't quite gather the information.
Here's the loop:
var empMessage = function(){
messageString = "";
var noEmp = $("#drpEmp option").length;
var i = 0;
$("#drpEmp").selector.index = i;
while (i < noEmp){
$("#drpEmp").index = i;
messageString = messageString +
"Name: " + firstName.val + " " + MI.val + " " + lastName.val + "<br/>" +
"Business: " + BusinessName.val + "<br/>" +
"Address: " + address.val + "<br/>" +
" " + city.val + ", " + state.val + " " + zip.val + "<br/>";
}
messageString = "<strong>Employee Information</strong><br/>" . messageString;
i++;
}
$("#stringHolder").val(messageString);
}
Here's the JS Fiddle:
https://jsfiddle.net/xptxz7by/3/
I know I probably really off. I know I have the loop working and the list is getting counted, but I can't seem to retrieve the information. I'm also thinking I'm approaching sending the information wrong and there's probably a better way of doing it, I just haven't figured out how.
The data you want is in the Employee object that you saved in each option's .data(), so you need to get that data and use the properties.
messageString = "<strong>Employee Information</strong><br/>";
$("drpEmp option:selected").each(function() {
var employee = $(this).data("employee");
messageString +=
"Name: " + employee.firstName + " " + employee.MI + " " + lastName + "<br/>" +
"Business: " + employee.BusinessName + "<br/>" +
"Address: " + employee.address + "<br/>" +
" " + employee.city + ", " + employee.state + " " + employee.zip + "<br/>";
});

Categories

Resources