I document.write("<option></option>") 500 options for select in a function named laborlist(). When user click on select it just print out all those 500plus s on page nothing else. I don't know how to call javascript or php function in newTextBoxDiv.after().html
newTextBoxDiv.after().html('<select class="select2_single form-control" name="jobrequest' + counter + '"><option></option>' + laborlist() + '</select>');
Another question is which method is faster to make database table of 500 laborlist and call it through AJAX or method i am using? Thank you
function laborlist(){
var labourList = document.getElementById("labourList");
// use innerHTML instead of document.write()
labourList.innerHTML +="<option>1</option><option>2</option><option>3</option>and so on";
}
I don't think that would be possible.
Instead you can have a id for the select tag and use that id in laborlist() funtion to append option to it.
So it would be something like this:
newTextBoxDiv.after().html('<select id="labourList" class="select2_single form-control" name="jobrequest' + counter + '"><option></option>' + '</select>');
function laborlist(){
var labourList = document.getElementById("laborList");
// use innerHTML instead of document.write()
labourList.innerHTML += "<option>...</option>"
}
Related
If I added the TrustPilot html code directly on the HTML page, it works fine but I needed to insert it with jQuery. I see the HTML code when inserted but it's not displaying.
$(window).on('load', function () {
var el = $('#some-element');
el.html( trustPilotHtml() );
function trustPilotHtml() {
var str = "<div " +
"class='trustpilot-widget' " +
"data-locale='en-GB' " +
"data-template-id='123456' "+
"data-businessunit-id='123456' " +
"data-style-height='500px' " +
"data-style-width='100%' " +
"data-theme='light' " +
"data-stars='4,5' " +
"data-schema-type='Organization'>" +
"<a " +
"href='https://some-url.com' target='_blank'>Trustpilot</a> " +
"</div>";
return $(str);
}
});
Is the only way of getting the element to display properly is to directly inserted into the HTML without javascript?
No it's not the only way.
You should have a bootstrap script in your inside the HEAD part of your HTML (or close to it).
This script takes care of initializing all the widgets (TrustBoxes in Trustpilot lingo) that you have in your HTML.
Of cause that doesn't work if you are injecting the HTML dynmically, so it's also possible to call window.Trustpilot.loadFromElement(trustbox); yourself, when if you need to.
Here trustbox is a HTMLElement, you could get by using document.getElementById("some-element") or similar.
Reference: https://support.trustpilot.com/hc/articles/115011421468
The following worked for me on a product list page which returned filtered list via ajax
var element = document.getElementsByClassName("trustpilot-widget");
for(var i=0; i<element.length; i++) {
window.Trustpilot.loadFromElement(element[i]);
}
On the first page load all product reviews are displayed as expected, but if the page is updated via ajax call (using filters for example) the reviews are lost. Running the above code after ajax, reloads the reviews
I am building a client that is connected to a socket.io server. I have this code:
$(document).ready(function () {
Desktops.onData(function (desktops) {
var desktopsList = $("#desktops");
$.each(desktops, function (id, desktop) {
console.log(desktop.name);
desktopsList.append('<option value="' + id + '">' + desktop.name + '</option>');
});
});
Sockets.connect();
});
The callback inside Desktops.onData gets called when the data comes back from the server. I then take this data(desktops) and try to append it into a select element, which is used with a Bootstrap plugin. In the HTML side I have:
<select id="desktops" class="selectpicker" data-live-search="true">
</select>
I know that the problem is not in the data because console.log works. I also know that the problem is not with my HTML or jQuery code because when I try to append to the select outside of the callback, it works. So it must be something about doing jQuery inside callbacks. What can I do to make that jQuery work?
Thanks.
Given the plugin you've stated that you're using (Bootstrap Select), you need to call the refresh method on it for it to recognise that new option elements have been added to the underlying select. Try this:
Desktops.onData(function (desktops) {
var desktopsList = $("#desktops");
$.each(desktops, function (id, desktop) {
console.log(desktop.name);
desktopsList.append('<option value="' + id + '">' + desktop.name + '</option>');
});
desktopsList.selectpicker('refresh'); // update the bootstrap select here
});
Our application is been internationalized and being changed to different languages. For that reason we have to hard code all the messages. How can we do that for messages in javascript ?
This is how we are doing in html messages.
<span th:text="#{listTable.deletedFromTable}">deleted</span>
How do we hard code for javascript messages.(update the table)
$('#TableUpdate-notification').html('<div class="alert"><p>Update the Table.</p></div>');
You will need to put the messages in the DOM from the start, but without displaying them. Put these texts in span tags each with a unique id and the th:text attribute -- you could add them at the end of your document:
<span id="alertUpdateTable" th:text="#{listTable.updateTable}"
style="display:none">Update the Table.</span>
This will ensure that your internationalisation module will do its magic also on this element, and the text will be translated, even though it is not displayed.
Then at the moment you want to use that alert, get that hidden text and inject it where you need it:
$('#TableUpdate-notification').html(
'<div class="alert"><p>' + $('#alertUpdateTable').html() + '</p></div>');
You asked for another variant of this, where you currently have:
$successSpan.html(tableItemCount + " item was deleted from the table.", 2000);
You would then add this content again as a non-displayed span with a placeholder for the count:
<span id="alertTableItemDeleted" th:text="#{listTable.itemDeleted}"
style="display:none">{1} item(s) were deleted from the table.</span>
You should make sure that your translations also use the placeholder.
Then use it as follows, replacing the placeholder at run-time:
$successSpan.html($('#alertTableItemDeleted').html().replace('{1}', tableItemCount));
You could make a function to deal with the replacement of such placeholders:
function getMsg(id) {
var txt = $('#' + id).html();
for (var i = 1; i < arguments.length; i++) {
txt = txt.replace('{' + i + '}', arguments[i]);
}
return txt;
}
And then the two examples would be written as follows:
$('#TableUpdate-notification').html(
'<div class="alert"><p>' + getMsg('alertUpdateTable') + '</p></div>');
$successSpan.html(getMsg('alertTableItemDeleted', tableItemCount));
I am creating a html element using javascript:
html_info += '<div class="row"><h4>'+ i +'. Patient: '+ key +'</h4>Date of birth: '+info[0]+'<br> Occupation: '+info[1]+'<br> Date of Test: ' + info[2]+ '<script type="text/javascript"> draw_chart(' + patient_test_info[key].right_eye +' ); </script></div>';
document.getElementById('patient_display').innerHTML += html_info;
It creates the element properly and displays the information stored in info array, but call to the draw_chart() function fails. I printed the contents of patient_test_info[key].right_eye using console.log before passing it as an argument and the contents of the variable are fine. But checking the html elements displays that patient_test_info[key].right_eye is not passed correctly and are just empty objects.
<script type="text/javascript"> draw_chart([object Object],[object Object],[object Object],[object Object] ); </script>
My draw_chart() function must draw the chart in the same div as the one used to display info content. On calling it independently, it does not recognise the newly created div and thus does not display anything.
function draw_chart(data) {
var chart = d3.cloudshapes.barChart()
.width(800).height(800);
for(var i=0; i<data.length; i++) {
var temp_value = data[i];
d3.select("#row")
.datum(temp_value)
.call(chart);
}
}
What is the right way of calling the function using an argument ?
What adeneo is saying is if you call the function directly it should work, like this:
html_info += '<div class="row"><h4>'+ i +'. Patient: '+ key +'</h4>Date of birth: '+info[0]+'<br> Occupation: '+info[1]+'<br> Date of Test: ' + info[2] + draw_chart(patient_test_info[key].right_eye) + '</div>';
In response to your comment, I don't know how the chart code you're using works, but if d3.select("#row") is supposed to be targeting the div you've created, then you have 3 problems:
1) You're calling the function before the div has actually been added to the DOM. You need to do your html_info += '<div class="row">...' and ....innerHTML += html_info; first, then call draw_chart() afterwards.
2) You're targetting the <div class="row"> with select("#row") - assuming standard syntax, # denotes an ID, not a class. You either need to make it id="row" or select(".row") (a dot denotes a class). However, if you're planning to be able to call this function multiple times to add multiple charts, you'll need them to have unique names, otherwise you'll have trouble specifying that you want to use the latest row. I suggest using the ID and adding your "key" to it, assuming that's valid.
3) Again, I'm not sure how the chart code works, but I'd guess that it's going to replace the contents of the targetted div, not append to it, which means you'll lose the title from your row. If that's the case, I'd suggest putting another div inside your row div and giving it the name instead so you can target it, e.g. '<div><h4>'+ i +'. Patient: '+ key +'</h4>Date of birth: '+info[0]+'<br> Occupation: '+info[1]+'<br> Date of Test: ' + info[2] + '<div id="chart-' + key + '"></div></div>'. Once you've added that to the innerHTML, you can then call draw_chart(patient_test_info[key].right_eye, key) and modify your draw_chart method to use the key for the name, e.g. d3.select("#chart-" + key).
I have seen a similar question, HERE and have tried that, but I can't seem to get it working.
Here is my code for dynamically generating table rows.
for (var contribution = 0; contribution < candidate.contributions.length - 1; contribution++) {
var id = candidate.contributions[contribution].donor_id;
var uid = candidate.contributions[contribution].user_id;
$("#history-table").append(
"<tr onclick='" + parent.viewEngine.pageChange('public-profile', 1, id, uid) + ";>" +
"<td class='img-cell'>" +
"<img class='profile-avatar-small' src='/uploads/profile-pictures/" +
candidate.contributions[contribution].image + "' alt='' /></td><td class=''>" +
"<h2>" + candidate.contributions[contribution].firstname +
" " + candidate.contributions[contribution].lastname + "</h2></a><br/><br/>" +
"<span class='contribution-description'>" + candidate.contributions[contribution].contribution_description + "</span></td>" +
"<td><h3>$" + formatCurrency(candidate.contributions[contribution].contribution_amount) + "</h3></td></tr>");
}
This still executes the click event as soon as the page loads, which is not the desired behavior. I need to be able to click the tr to execute the click event.
Pass the whole thing as a string:
"<tr onclick='parent.viewEngine.pageChange(\'public-profile\', 1, " + id + ", " + uid + ");>" // + (...)
But, as you are using jQuery, you should be attaching the click handler with .on().
(I really don't recommend using inline event handlers like that, especially when you're already using jQuery, but anyway...)
The problem is that you need the name of the function to end up in the string that you are passing to .append(), but you are simply calling the function and appending the result. Try this:
...
"<tr onclick='parent.viewEngine.pageChange(\"public-profile\", 1, " + id + "," + uid + ");'>" +
...
This creates a string that includes the name of the function and the first couple of parameters, but then adds the values of the id and uid variables from the current loop iteration such that the full string includes the appropriately formatted function name and parameters.
Note that the quotation marks around "public-profile" were single quotes but that wouldn't work because you've also used single quotes for your onclick='...', so you should use double-quotes but they need to be escaped because the entire string is in double-quotes.
I'm wondering if you might be better simplifying things a bit.
If your rows are being dynamically added, then try putting some kind of meta-data in the <tr> tag, e.g. something like this:
<tr id="id" name="uid">
Then try the following with your jQuery (v.1.7 required):
$('#history-table tr').on('click', function(){
parent.viewEngine.pageChange('public-profile', 1, this.id, this.name);
});
This will likely require modification depending on how your page rendering works but it's a lot cleaner and easier to read having been removed from your main table markup.
Well that's because you're executing the function, not concatenating it. Try:
onclick='parent.viewEngine.pageChange("public-profile", 1, id, uid);'
Take this ->
$("#contribution-" + uid).click(function(){
parent.viewEngine.pageChange('public-profile',1, id, uid);
});
And do two things:
1) Move it outside of the 'for' statement
As soon as the for statement is executed, the click function will be executed as well. The click function is not being supplied as a callback function in this for statement.
2) Change it to ->
$("tr[id^='contribution-'").on('click', function(){
var idString = $(this).attr("id").split("-"); //split the ID string on every hyphen
var uid = idString[1]; //our UID sits on the otherside of the hyphen, so we use [1] to selec it
//our UID will now be what we need. we also apply our click function to every anchor element that has an id beginning with 'contribution-'. should do the trick.
parent.viewEngine.pageChange('public-profile',1, id, uid);
});
This is my solution.