Error in the Javascript Jquery code - javascript

There is an error showing on this code, I have looked through it for hours and cannot find it, could anyone assist please
$(document).ready(function () {
$('#show-records').click(function () {
$.post('./includes/processes.php', function (data) {
var pushedData = jQuery.parseJSON - (DATA);
var htmldata = " ";
$.each(pushedData, function (i, serverData) {
htmldata = htmldata, +'- ' + serverData.Style + ', ' + serverData.Brand + ', ' + serverData.Model + ', ' + serverData.January Registrations + ', ' + serverData.February Registrations + ', ' + serverData.March Registrations + '<br>';
$('#show-list').html(htmldata);
});
});
});
});

htmldata = htmldata, + '
is invalid syntax, try
htmldata = htmldata + '

There is an extra comma after html data on that line. When appending to variables you should try and use this syntax too, enclosing all other strings in "string" .
Change that line of code to:
htmldata += ', - ' + serverDat...
The += is the same as writing htmldata = htmldata + ', -' + .. which is easier to read and maintain.

Related

req ist not defined even when it's filled with values

Im updating some of my data inside my database with a REST API. Therefore I created a route with POST (I use it for both) like this and call it with a submit button:
router.post('/add/edit/update', function (req, res, next) {
console.log(req.body);
var sql = 'UPDATE gerichte SET gericht = ' + reg.body.gericht + ', Kalorien = ' + reg.body.Kalorien + ', preis_id = ' + req.body.preis + ', kategory_id = ' + req.body.kategorie + ', allergene = ' + req.body.allergene + ' WHERE g_id = ' + req.body.g_id + ';';
conn.query(sql, function (err, data) {
if (err) throw err;
});
res.redirect('/add/edit'); // redirect to user form page after inserting the data
});
But I always get the error req not found when I sumbit the form. I tried printing the req object but it's filled nicely:
[Object: null prototype] {
g_id: '1',
gericht: 'Schnitzel mit Pommes',
Kalorien: '1400',
preis: '1',
kategorie: '5',
allergene: 'dsd'
}
Any ideas how to fix this problem?
It's req (with a lower-case Q), not reg (with lower-case G).
Change
var sql = 'UPDATE gerichte SET gericht = ' + reg.body.gericht + ', Kalorien = ' + reg.body.Kalorien + ', preis_id = ' + req.body.preis + ', kategory_id = ' + req.body.kategorie + ', allergene = ' + req.body.allergene + ' WHERE g_id = ' + req.body.g_id + ';';
to
var sql = 'UPDATE gerichte SET gericht = ' + req.body.gericht + ', Kalorien = ' + req.body.Kalorien + ', preis_id = ' + req.body.preis + ', kategory_id = ' + req.body.kategorie + ', allergene = ' + req.body.allergene + ' WHERE g_id = ' + req.body.g_id + ';';
var sql = 'UPDATE gerichte SET gericht = ' + reg.body.gericht + ', Kalorien = ' + reg.body.Kalorien + ', preis_id = ' + req.body.preis + ', kategory_id = ' + req.body.kategorie + ', allergene = ' + req.body.allergene + ' WHERE g_id = ' + req.body.g_id + ';';
The error might be reg not defined because:
In the above line of your code, you've been using reg.body, when there is no reg defined.
Kindly correct it and see if the issue is resolved or not.

Putting the variable into the a href tag

i am having issue with assigning the variable into the URL
This is the code
var value = i+1;
var customPopup = 'Latitude: ' + data.Table[i].Latitude + '</br>Longitude: ' + data.Table[i].Longitude
+ '</br>Station: ' + data.Table[i].StationID + ' </br>Box: ' + data.Table[i].BoxID + '</br>Timestamp: ' + data.Table[i].LocationSend + "<br><a target='_blank' href='/Home/History?DeviceID= ' style='color: #000000'>Click Here For Location History</a></br>";
String literals might help (using backticks ``):
var value = i+1;
var customPopup = 'Latitude: ' + data.Table[i].Latitude +
'<br/>Longitude: ' + data.Table[i].Longitude +
'<br/>Station: ' + data.Table[i].StationID +
'<br/>Box: ' + data.Table[i].BoxID +
'<br/>Timestamp: ' + data.Table[i].LocationSend +
`<br/><a target='_blank' href='/Home/History?DeviceID=${value}' style='color: #000000'>Click Here For Location History</a><br/>`;

How do I display external API search results in a table?

I am a final year student and am creating a food log web application for my major project. I have created a search function that allows me to search and display external API results, but now I wish to display them in a table, can anyone help please?
I would prefer if it would be a table that can be filtered, eg, the columns ordered ascending/descending?
Thanks
function get foodItem(userInput) {
var storedSearchItem;
$('.resultContainer').html('');
$.ajax({
type: 'GET',
async: false,
url: 'https://api.nutritionix.com/v1_1/search/'+userInput+'?'+
'fields=item_name%2Citem_id%2Cbrand_name%2Cnf_calories%2Cnf_total_fat&appId=325062a4&appKey=bf1a30b2066602dc6f33db888cd53bd3',
success: function(d) {
storedSearchItem = d.hits;
}
});
storedSearchItem.map(function(item) {
var x = item.fields
$('.resultContainer').append(
'<div class="itemBar">'+
'<h2>' + x.item_name + '<h2>' +
'<h3>Calories: ' + x.nf_calories + '<h3>' +
'<h3>Serving Size: ' + x.nf_serving_size_qty + ' ' + x.nf_serving_size_unit +'<h3>' +
'<h3>Total Fat: ' + x.nf_total_fat + '<h3>' +
'</div>'
);
});
}//ends get result function
function searchValue() {
var formVal = document.getElementById('itemSearch').value; //value from search bar
getFoodItem(formVal);
}
$('#searchForm').submit(function(e) {
e.preventDefault();
});`
You need to append your table in the success function
your code will look like something like this
success: function(d) {
storedSearchItem = d.hits;
storedSearchItem.map(function(item) {
var x = item.fields
$('.resultContainer').append(
'<div class="itemBar">'+
'<h2>' + x.item_name + '<h2>' +
'<h3>Calories: ' + x.nf_calories + '<h3>' +
'<h3>Serving Size: ' + x.nf_serving_size_qty + ' ' + x.nf_serving_size_unit +'<h3>' +
'<h3>Total Fat: ' + x.nf_total_fat + '<h3>' +
'</div>'
);
});
}

How to add html <br> tags into javascript

I have a button that when clicked opens email and fills the body with variables. This looks too messy though as it all appears on one line. Could I just chuck in a br tag inbetween each variable so they appear on a new line?
Thanks. Here is code:
$("#buttonLink").click (function() {
window.open('mailto:sales#beauxcadeaux.co.uk?subject=My Frame&body=My frame Type: ' + frameType + ' My Frame Background: ' + frameBackground + ' My text: ' + yourText + ' My Text design: ' + textDesign);
});
I'm thinking something like:
$("#buttonLink").click (function() {
window.open('mailto:sales#beauxcadeaux.co.uk?subject=My Frame&body=My frame Type: ' + frameType + <br> + ' My Frame Background: ' + frameBackground + <br> + ' My text: ' + yourText + <br> +' My Text design: ' + textDesign);
});
Use the ASCII code which is %0D%0A, like this:
window.open('mailto:sales#beauxcadeaux.co.uk?subject=My Frame&body=My frame Type: ' + frameType +'%0D%0A My Frame Background: ' + frameBackground + '%0D%0A My text: ' + yourText + '%0D%0A My Text design: ' + textDesign);
Strictly speaking should the white spaces also be replaced. Use the ASCII code which is %20, like this:
window.open('mailto:sales#beauxcadeaux.co.uk?subject=My%20Frame&body=My%20frame%20Type:%20' + frameType +'%0D%0A%20My%20Frame%20Background:%20' + frameBackground + '%0D%0A%20My%20text:%20' + yourText + '%0D%0A%20My%20Text%20design:%20' + textDesign);
try some thing like this
$("#buttonLink").click (function() {
//try this
var brtag= document.createElement("br");
//then
brtag.id = "your_id"
brtag.setAttribute("class", "your_class");
//and so on
//then do rest of your stuffs
});
it might work ...(do let me know it it works !)

Why am I missing the outer div of my HTML block when I use JQuery's $.parseHTML?

When I parse an html string with $.parseHTML(), the outer most div disappears.
Given the html string:
var myCode = '<div class="outer">' +
' <div class="inner">' +
' <div>' +
' <p>Hello!</p>' +
' </div>' +
' <div>' +
' <p>Hello!!' +
' </p>' +
' </div>' +
' </div>' +
'</div>';
When I call parse this html, the outer most div (class="outer") isn't present.
var $myHtmlObject = $($.parseHTML(myCode))
console.log($myHtmlObject.html()) // no "outer" div present.
I made a jsfiddle to show the behavior
I can easily get around this by wrapping everything in another div before I parse it, but that seems like a hack for something that should otherwise work.
Because .html() gives the inner html of the first element of the set of element on which it was called. What you are looking for here is the outerHTML
console.log($myHtmlObject[0].outerHTML)
console.log($myHtmlObject.prop('outerHTML'))
Also there is no need to use parseHTML() in this case
var log = (function() {
var $log = $('#log');
return function(msg) {
$('<p/>', {
text: msg
}).appendTo($log)
}
})();
var myCode = '<div class="outer">' +
' <div class="inner">' +
' <div>' +
' <p>Hello!</p>' +
' </div>' +
' <div>' +
' <p>Hello!!' +
' </p>' +
' </div>' +
' </div>' +
'</div>';
var $html = $(myCode);
log('html: ' + $html.html())
log('outer-html: ' + $html.prop('outerHTML'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="log"></div>

Categories