I have this code
$("#inputs").append("<input class=\"adding\" id=\"test"+ values + "\ name=\"" + values + ">"+ values + "</input><br />");
I have a variable named values.
This code is put in the click method of it this appends the input box correctly but when I use AJAX to send the values and echo, it works fine only for the 1st value which I haven't used the jQuery append() function but instead just used HTML. What's my problem here?
Your question is generic without the relevant code snippets to your ajax, HTML and server code.
The only thing I can do is fix up your input creation code so that it's readable and maintainable.
$("#inputs")
.append(
$("<input />", {
"class": "adding",
"id": "test" + values,
"name": values,
"val": values
}))
.append($("<br/>"));
Simple rewrite with back slash:
$("#inputs").append("<input class=\"adding\" id=\"test" + values + "\" name=\"" + values + "\">"+ values + "</input><br />");
Related
I am trying to use an if statement inside of another if statement and I simply can't figure out how to get the second if statement to work. The second if statement applies all style changes to the first element (school) in the array. I would like the second if statement to apply the correct styling to all items in the array based on the json data ([school.status]).
I've tried switching to a for statement, tried moving the if statements around and nesting them differently, tried async and moving different parts of the formulas in and out of the code blocks. I've tried running a second forEach statement after the append but I couldn't get that to work either. I think I lack an understanding of how this process works, beyond just the code part, but more the logical operator, and after hours of searching for a straight forward answer, and it being almost 4AM, I figured I would just ask here.
schools.forEach(function(school, index) {
dashboardItemStatus = $(".dashboard-item-status");
if (App.hasClass("mainDash")) {
App.append(
'<div class="dashboard-item"><h5 class="mb-1">' +
[school.name] +
"</h5>" +
'<p style="margin-bottom: -2px">' +
[school.address.street] +
"</p>" +
'<p style="margin-bottom: -2px">' +
[school.address.city] +
"," +
" " +
[school.address.state] +
" " +
[school.address.zip] +
"</p>" +
'<p style="margin-bottom: -2px">' +
[school.phone] +
"</p>" +
'<p style="margin-bottom: -2px">' +
[school.principal] +
"</p>" +
'<p style="margin-top: 8px;background-color: #FFF;padding: 8px 14px;border-radius: 5px;" class="dashboard-item-status" id="dashboardItemStatus">' +
[school.status] +
"</p>" +
"</div>"
);
}
if (school.status == "Normal Operation") {
dashboardItemStatus.addClass("dashboard-item-status-normal");
} else if (school.status == "Full Change") {
dashboardItemStatus.addClass("dashboard-item-status-change");
}
});
So, I suppose the expected results are anytime one of the statuses is "Full Change" the dashboard-item-status-change class is applied, and the dashboard-item-status-normal class is applied to any status that has "Normal Operation". That data is an array that is coming from a json file. That part works just fine. The forEach function works fine and the information displays correctly on the screen. Now though, I need to be able to affect the elements that show the status individually based on the status itself. Right now, as stated above, no matter what status I attempt to affect, the channges all occur on the first element in the array, which I guess makes sense, but I have no idea how to fix it. If I console.log() the names and statuses of the schools inside the second if statement, they display correctly so I know I can find the right values, I just don't know how to affect them. Maybe map or something may work but I honestly don't know how to use that correctly. Any help is really appreciated.
In the below code i have a dynamically created textbox and on onfocus event i am calling a javascript function .And i am assign onfocus event values on page load .And it is not working after creating onfocus event.Pls help me to solve the issue.
Test1,Test2 values are assigned on pageload
function createFields(Test1,Test2) {
var newdiv = document.createElement('div');
if (type == "TextBox") {
newdiv.innerHTML +=
"<input class=\"form-control\" data-error=\"Please Provide "
+ DisplayName
+ "\" name=\""
+ Name
+ "\" value=\""
+ FieldValue
+ "\" onFocus=\""
+ HighlightField(Test1,Test2)
+ "\" id=\""
+ Name + "\"/>";
$('#divComplete').append(newdiv);
}
}
function HighlightField(Test1,Test2) {
}
on onfocus event i am calling a javascript function
No you're not. Look closely at what's happening here:
"onFocus=\"" + HighlightField(Test1,Test2) + "\"
You're calling HighlightField() immediately and setting its result to the onFocus handler.
Unless that function actually returns a string of valid JavaScript code, it's likely that your resulting HTML looks like this:
onFocus=""
If you want to call the function in the onFocus event, don't invoke it. Instead, just specify the function call in the string you're creating:
"onFocus=\"HighlightField(Test1,Test2)\""
Edit: Given the clarification on your question, it sounds like you want those variables to be interpreted right away. But not the function call itself. That would be done the same way it's done anywhere else in that string. Something like this:
"onFocus=\"HighlightField(" + Test1 + "," + Test2 + ")\""
Note that if those variables are expected to contain string data then you'd also need to add quotes (since strings need to be quoted):
"onFocus=\"HighlightField('" + Test1 + "','" + Test2 + "')\""
As you're probably starting to notice, dynamically building code like this is a bit unwieldy. Since you're using jQuery anyway, at the very least you should remove the in-line event handler and create a separate event handler elsewhere in the code. Something like:
$(document).on('focus', 'input.form-control', function () {
// handle your focus event here
});
Then you wouldn't need to build this complex string.
EDIT: As this question turned out to be quite a bit different than originally stated, please refer instead to HTML- Altering Input Value
I have an input element that I am trying to set while I'm creating a pair of tables (the value should reflect the total value of the row). However, the statement is not working for some reason. The basics of the code are as follows:
prevTotalElt = $('#TimeSheetTable #ProjectData #projectBody #' + curProj + '_total');
alert(prevTotalElt.val() + '\n' + prevTotalVal);
prevTotalElt.val(prevTotalVal);
This code is in an if statement, and the alert message appears as expected with the proper values. The weirdest bit is that the same statement executes at the end of the loop (to take care of the final total element in the table) and works perfectly. I can't really understand what the issue is here, but any help would be appreciated.
EDIT: Due to requests, here is the line that creates the input element I am trying to set:
$('#TimeSheetTable #ProjectData #projectBody').html($('#TimeSheetTable #ProjectData #projectBody').html() +
'<tr><td align="center"><input id="' + curProj + '_total" type="number"' +
'align="center" value="' + tmpInd + '" style="width:17px; border:none;" disabled></td>');
I'm trying to insert a variable's value into a url, but it's not working; I'm just getting the variable not the value
'myid' and 'verif' are the variables and their values are integers.
This code inserts the url into a hidden field in a form
$('#return').val(http://pegdown.com/index.php?option=com_joom_creditspack&controller=paypal&view=paypal&layout=return&task=checkout&myid=myid&packid=1&verif=verif&jcode=xxx111xxx);
How do I write the following url so the variables 'myid' and 'verif' are converted to their values?
Well you are missing quotes so your code would not work at all.
$('#return').val("http://pegdown.com/index.php?option=com_joom_creditspack&controller=paypal&view=paypal&layout=return&task=checkout&myid=" + myid + "&packid=1&verif=" + verif + "&jcode=xxx111xxx");
You should probably use encodeURIComponent()
You need to quotes " " the strings and concat the variables +
Try
$('#return').val("http://pegdown.com/index.php?option=com_joom_creditspack&controller=paypal&view=paypal&layout=return&task=checkout&myid="+myid+"&packid=1&verif="+verif+"&jcode=xxx111xxx");
JavaScript does not support string interpolation. Try something like this.
myIdVal = encodeURIComponent(myId);
verifVal = encodeURIComponent(verif);
var url = "http://pegdown.com/index.php?option=com_joom_creditspack&controller=paypal&view=paypal&layout=return&task=checkout&myid=" + myidVal + "&packid=1&verif=" + verifVal + "&jcode=xxx111xxx";
$('#return').val(url);
A simple string works for me:
given index = 2,
`a.setAttribute("href", "myDirectory/" + index + ".jpg");` links the anchor to
"myDirectory/2.jpg", ie. the file number is taken from variable index.
Not sure if the setAttribute tolerates multiple tokens in its second parameter, but generally, this works.
So I try such code:
function showAlertWithCallback(w, h, name, body_text, functionToCallOnOk) {
prepareWindow();
var ran_alert_number=Math.random()*50000;
$("#alert_content").html(body_text + '<br/>' + '<input type=\"button\" class=\"eButton\" value=\"Cancel\" onClick=$(\".alert\").hide() />' + '<input id=\"general-alert-'+ ran_alert_number +'\" type=\"button\" class=\"eButton\" value=\"OK\" onClick=\"$(\'.alert\').hide();\"/>');
$('#general-alert-' + ran_alert_number).click(functionToCallOnOk);
// also tried $('#general-alert-' + ran_alert_number).click(function(){functionToCallOnOk();});
showAlertBase(w, h, name);
}
called via something like:
showAlertWithCallback(
600,
100 ,
('New name for to ' + file_title + ' file.'),
'<input type="text" style="width:590px" class="text" value=\"' + file_title + '\">',
function(){
alert("hi!");
}
);
runs with no errors (chrome debugger) but function does not get called on OK click. Why and how to fix such thing?
Math.random()*50000 will produce a number like 38518.060150090605, which when you concatenate with '#general-alert-' in the jQuery call will produce a selector like this:
#general-alert-38518.060150090605
That will be treated as a selector which finds an element with id general-alert-38518 and class 060150090605, since the class name comes after the dot.
To make the random number, use, say, Math.floor(Math.random()*5000) instead.
A better option would be to use an incrementing global variable (eg, _global_counter++ each time you use it), then you would not have a chance of getting two elements with the same id.
An even better solution would be to create actual DOM elements in JavaScript, attach events to those elements, then insert those elements into the correct place in the document. That way they won't need to have ids at all.
Try removing the onClick attribute of the OK button.