I'm new to js and php, in fact web design in general....
I've had a website built by uni students. It uses PHP, JavaScript, Apache, AJAX, MySQL. Sadly the project is finished, but I need to change what is formatted.
What i have and what i require
I have tried to install WAMP on my computer without success.
Instead I edit the .js file in wordpad and swap it out on the server.
//Currently the output from displaying a "law" on my website is this:
//The ± and the second number (sd - in the code below SDBefore) is formatted green for 0<=sd <50.
//The first number (mean - in the code before meanBefore) is not formatted.
//AFAIK the javascript file on the server produces this is currently as follows:
$(".mean-value").html("Loading");
$(".sd-value").html("Loading");
//parse the returned data
var jsonData = JSON.parse(data);
$(".mean-value").html(parseInt(jsonData.mean));
$(".sd-value").html("± " + parseInt(jsonData.sd));
currentHTML = currentHTML + "<td><a href='./event-profile.php?id=" + event.event_id + "' >" + event.event_name + "</a></td>";
if(event.SDBefore >= 0 && event.SDBefore < 50)
{
currentHTML = currentHTML + "<td>" + event.meanBefore + "<span class='sd-value-green'>±" + event.SDBefore + "</span></td>";
}
//.....( JSON is a format for storing and transporting data).
//So what I want to do is one of the following a) or b)
// a) format the mean only according to 0<=sd <50.
Is this correct?
//parse the returned data
var jsonData = JSON.parse(data);
$(".mean-value").html(parseInt(jsonData.mean));
//$(".sd-value").html("± " + parseInt(jsonData.sd)); //Don't need this line
currentHTML = currentHTML + "<td><a href='./event-profile.php?id=" + event.event_id + "' >" + event.event_name + "</a></td>";
if(event.SDBefore >= 0 && event.SDBefore < 50)
{
currentHTML = currentHTML + "<td>" + "<span class='mean-value-green'>event.meanBefore+</span>" + ± + event.SDBefore + "</td>";
}
//b) format the whole law according to 0<=sd <50.
//So I have added the following (in bold):
// Is this correct?
$(".mean-value").html("Loading");
$(".sd-value").html("Loading");
$(".law-value").html("Loading");
//parse the returned data
var jsonData = JSON.parse(data);
$(".mean-value").html(parseInt(jsonData.mean));
$(".sd-value").html("± " + parseInt(jsonData.sd))
$(".law-value").html(parseInt(jsonData.mean) + "± " + parseInt(jsonData.sd));
currentHTML = currentHTML + "<td><a href='./event-profile.php?id=" + event.event_id + "' >" + event.event_name + "</a></td>";
if(event.SDBefore >= 0 && event.SDBefore < 50)
{
currentHTML = currentHTML + "<td>" + "<span class='law-value-green'> event.meanBefore + ± + event.SDBefore" + "</span></td>";
Have a look on ±. This is symbol you would like to change to +/-.
Related
I have a .php file where I am using both HTML and JavaScript to display items from my database. I have a JavaScript append function that is creating cards where each item is display. On my cards, I have a button that will expand the card to show product history. Some products have more history than others so the expansion needs to be dynamic. The historical data is being pulled from database and is initially in a php array. I originally was going to institute php into the javascript append function but I could not figure out how to set the JavaScript index variable 'I' to my php index. So I want to just stay with JavaScript. But I don't know how to write a loop in the middle of this append function that will loop through the historical array and populate the expansion. Below is what I am attempting. I took out a lot of the lines in the append function but you can see what I am trying to do.
function get_products() {
clear_cards();
$.each(productNumbers,
function(i, value) {
$('.main_card_shell').append(
"<div class='card_content card_style' id='card" + i + "'>" +
"<div id='card_tab2" + i + "' class='tabcontent' data-tab='tab-name2'>" +
"<div class='details_tables'>" +
"<table>" +
"<tr>" +
"<th>Item Type</th>" +
"<th>Painted</th>" +
"<th>Last Sold" +
"<a id='_close_tab" + i + "' class='tablinks tab_override' onclick=\"openCity(event,'card_tab4" + i + "')\">" +
"<i class='large angle up icon'></i>" +
"</a>" +
"</th>" +
"</tr>" +
"<tr>" +
var itemdatesplit = itemdate[i].split("$$");
var itemtypesplit = itermtype[i].split("$$");
var itemsplit = item[i].split("$$");
var arraylength = itemsplit.length;
var counter = 0;
while(counter < arraylength)
{
+ "<td>" + itemtypesplit[counter] + "</td>" +
+ "<td>" + itemdatesplit[counter] + "</td>" +
counter = counter + 1;
}
+
"</tr>" +
"</table>" +
"</div>" +
"</div>" +
Please help. I had it working with PHP inserted in, but I just couldn't figure out how to set it to a PHP variable.
Place this code into a function:
function getSomething(i) {
var html = '';
var itemdatesplit = itemdate[i].split("$$");
var itemtypesplit = itermtype[i].split("$$");
var itemsplit = item[i].split("$$");
var arraylength = itemsplit.length;
var counter = 0;
while(counter < arraylength) {
html += "<td>" + itemtypesplit[counter] + "</td>";
html += "<td>" + itemdatesplit[counter] + "</td>";
counter = counter + 1;
}
return html;
}
And then use it in your HTML building block:
'<some html>' + getSomething(i) + '<some other html>'
I want to parse json data into a html table int format of :
project title EAC BAC Overrun Percentage
Project1 0 Day 0 Day 0 15%
closed
18/07/2016-18/08/2017
Project 2 350 Day 15 Day 15 30%
closed
05/02/2016-12/09/2022
I found this answer Parsing JSON objects for HTML table which I used to
write this code:
$.ajax(settings).done(function (result) {
var str = JSON.stringify(result);
obj = JSON.parse(str);
for(var i = 0; i < obj.value.length; i++) {
tr = $('<tr/>');
tr.append("<td class=\"project_title\">" + obj.value[i].name + "</td>" + "<td class=\"project_title\">" + obj.value[i].eac + "</td>" + "<td class=\"project_title\">" + obj.value[i].bac + "</td>" + "<td class=\"project_title\">" + obj.value[i].overrun + "<td class=\"project_title\">" + obj.value[i].percentage + "</td>");
$('table').append(tr);
}
});
But I didn't understand how to add the status of the project and the date in the same cell over Project title.
For example for Project 1 I should add such status closed and the date of begin and end of the project 18/07/2016-18/08/2017.
How can I add these options to each project?
Just add </br> between the fields you want in the first cell:
tr.append("<td class=\"project_title\">" + obj.value[i].name + "</br>" + obj.value[i].attribute1 + "</br>" + obj.value[i].attribute2 + "</td>");
It may work in your case.
What is the best way to make JUST card.price editable? I've futzed around with several different ways that seemed stupid simple, but it just isn't producing the right results. Does anyone out there have some suggestions?
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + card.price +
"<button class='removeThis'>" +
"X" + "</button>" + "</li>";
Here's a simple way to do that with input elements. Simplified example to illustrate it:
var card = {};
card.card_name = "Card Name";
card.price = "4.00";
var inputBeg = "<input size=8 style='border: none;' value='$";
var inputEnd = "'>";
var html = "";
for (var i = 0; i < 3; i++) {
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + inputBeg + card.price + inputEnd + "<button class='removeThis'>" +
"X" + "</button>" + "</li>";
}
document.body.innerHTML = html;
You could get much fancier with the styling if you wanted to.
I hope someone can help me out with this. I'm trying to dynamically build an HTML table in javascript/jquery based on iterating over an array built by earlier code. I am getting an error on the referenced line below as soon as the page loads:
function BuildForm (allFields) {
var dyndata = "";
var formstart = "<form>\n<fieldset class='fieldset-js'>\n<legend>Choose A Parent</legend>\n<table class='table-js'>\n<tr>\n<th class='th'>ID</th>\n<th class='th'>Name</th>\n<th class='th'>DOB</th>\n<th class='th'>Phone</th>\n</tr>\n<tr>";
$('#PickAParent-Form').append(formstart);
$.each(allFields, function (index, value) {
if ((index + 5) % 5 == 0) {
dyndata = "<tr>\n<td class='td1'><input type='radio' name='pid' value='" = index + "'>" + value + "</td>\n";
error here---------^
$('#PickAParent-Form').append(dyndata);
} elseif ((index +1 ) % 5 == 0) {
dyndata = "<td class='td1'>" + value + "</td>\n</tr>\n";
$('#PickAParent-Form').append(dyndata);
} else {
dyndata = "<td class='td1'>" + value + "</td>\n";
$('#PickAParent-Form').append(dyndata);
}
});
DisplayForm;
}
I have been all over Google and SO this AM but can't figure this one out. Any help is MUCH appreciated!!
This line:
dyndata = "<tr>\n<td class='td1'><input type='radio' name='pid' value='" = index + "'>" + value + "</td>\n";
should be:
dyndata = "<tr>\n<td class='td1'><input type='radio' name='pid' value='" + index + "'>" + value + "</td>\n";
Looks like you had an equals sign instead of a plus sign for variable to string conversion
Change it to:
dyndata = "<tr>\n<td class='td1'><input type='radio' name='pid' value='" + index + "'>" + value + "</td>\n";
Note:
value='" + index + "'
Instead of:
value='" = index + "'
so I can not understand for the life of me why I keep getting
Uncaught TypeError: Cannot set property 'innerHTML' of null starting from line 29 where it says "var stats4". I am trying to apply it to an ID but only stats1,2,3 work. I tried copying and pasting the first part and changing things around. I dont get it.
my entire code is here -- jsfiddle.net/kx4s5egk
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'stats.json');
request.onreadystatechange = function() {
if ((request.readyState===4) && (request.status===200)) {
var items = JSON.parse(request.responseText);
var stats1 = items[0][0];
document.getElementById("stats1").innerHTML =
"<p>" + stats1.countTxt + "</p><p>" + stats1.participantsTxt + "</p><p class='count-blue1'>" + stats1.participantCount + "</p>";
var stats2 = items[0][1];
document.getElementById("stats2").innerHTML =
"<p>" + stats2.countTxt + "</p><p>" + stats2.participantsTxt + "</p><p class='count-blue2'>" + stats2.participantCount + "</p>";
var stats3 = items[0][2];
document.getElementById("stats3").innerHTML =
"<p>" + stats3.countTxt + "</p><p>" + stats3.participantsTxt + "</p><p class='count-blue3'>" + stats3.participantCount + "</p>";
var stats4 = items[1][0];
document.getElementById("stats4").innerHTML =
"<p>" + stats4.countTxt + "</p><p>" + stats4.participantsTxt + "</p><p class='count-blue1'>" + stats4.participantCount + "</p>";
var stats5 = items[1][1];
document.getElementById("stats5").innerHTML =
"<p>" + stats5.countTxt + "</p><p>" + stats5.participantsTxt + "</p><p class='count-blue2'>" + stats5.participantCount + "</p>";
var stats6 = items[1][2];
document.getElementById("stats3").innerHTML =
"<p>" + stats6.countTxt + "</p><p>" + stats6.participantsTxt + "</p><p class='count-blue3'>" + stats6.participantCount + "</p>";
}
}
request.send();
The reason for the error message is that you are trying to address a DOM element that doesn't exist. You have coded HTML enough for three items and try to address six.
Something like this is more easily (though probably less efficiently) coded with jQuery.
Sticking with hard-coded HTML, you could do something like this :
$.getJSON('stats.json').then(function(data) {
var i, j, n, stats;
for(i=0, n=1; i<data.length; i++) {
for(j=0; j<data[i].length; j++, n++) {
stats = data[i][j];
$("#stats" + n).html("<p>" + stats.countTxt + "</p><p>" + stats.participantsTxt + "</p><p class='count-blue'" + (j+1) + ">" + stats.participantCount + "</p>");
}
}
});
DEMO
However, you could do better by creating more of the HTML (DOM nodes) dynamically :
//First, a tempate for your item entries
var tpl = '<div class="grid1-3">' +
'<div class="%icon"></div>' +
'<div class="number_style %count-blue"></div>' +
'<div class="stats">%stats</div>' +
'</div>';
$.getJSON('stats.json').then(function(data) {
var i, j, jj, stats, _tpl;
for(i=0; i<data.length; i++) {
for(j=0, jj=1; j<data[i].length; j++, jj++) {
stats = data[i][j];
_tpl = tpl
.replace('%icon', 'icon' + jj)
.replace('%count-blue', 'count-blue' + jj)
.replace('%stats', "<p>" + stats.countTxt + "</p><p>" + stats.participantsTxt + "</p><p class='count-blue'" + jj + ">" + stats.participantCount + "</p>");
$("#items").append(_tpl);
}
}
});
DEMO
I'm sure I haven't addressed every aspect so there's undoubtedly still some work to do.
There are a couple of things I notice in your javascript code which are a bit unorthodox and are probably messing things up.
You have everything inside a window.onload() function, that's ok.
But inside the onload function you have two separate calls to the jquery function $(document).ready (which is equivalent, but probably more reliable, than window.onload).
One of your calls is the bit that starts with
$(document).ready
and the other begins with
jQuery(document).ready
Try reduce everything (including the window.onload() function) into a single $(document).ready function.
You can pull some stuff out into separate functions, but call them from inside $(document).ready