Syntax Error - Unexpected identifier -(final line of code) - javascript

I'm getting an unexpected identifier error in chrome for the last line of this code, does anyone know why? thanks (updated to entire code for the page)
It's supposed to display a list of data for the jobs ive got entered into a database
<?php
error_reporting(0);
include('../includes/header.php');
include('connection.php');
?>
<script src="../jqm/demos/js/jquery.js"></script>
<script type="text/javascript">
var db;
$(document).ready(function () {
loadJobRecords();
}
$(document).on("click", "#jobRecord", function () {
getJobById($(this).data("key"));
});
});
function loadJobRecords() {
db.transaction(function (txs) {
txs.executeSql('SELECT * FROM jobs', [], function (txs, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
var JobRecord = results.rows.item(i);
var individualJob = '';
individualJob = '<li><a href="#detailinfo" id="jobRecord" data-key="' + jobRecord.ID + '" >';
individualJob += '<h3>' + jobRecord.Title + '</h3>';
individualJob += '<p>Testing</p>';
individualJob += '</a></li>';
$('#listofjobs ul').append(individualJob);
$('#listofjobs ul:visible').listview('refresh');
}
});
});
}
function getJobById(id) {
db.transaction(function (txs) {
txs.executeSql('SELECT * FROM jobs WHERE id="' + ID + '"', [], function (txs, results) '){
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
var jobRecord = results.rows.item(i);
var individualjob = '';
individualjob += '<h3>' + jobRecord.Title + '</h3>';
individualjob += '<p>' + jobRecord.Description + '</p>';
individualjob += '<p>' + jobRecord.Username + '</p>';
$('#jobSummary').html(individualJob);
}
});
});
}
</script>
<div class="content container">
<div daa-role="page" id="jobsdatabase">
<section>
<div data-role="content" id="listofjobs">
<ul data-role="listview" data-filter="true" data-inset="true">
</ul>
</section>
</div>
</div>
</div>
<?php include('../includes/footer.php'); ?>

Maybe the jquery selector doesn't find a match?
Try going to the console in chrome and running:
$('#listofjobs ul:visible').length
Is the value greater than 0?

Change to this
var db;
$(document).ready(function () {
loadJobRecords();
$(document).on("click", "#jobRecord", function () {
getJobById($(this).data("key"));
});
});
function loadJobRecords() { ...
You have a quote ' and bracket at the end of this line, just after results - remove them
txs.executeSql('SELECT * FROM jobs WHERE id="' + ID + '"', [], function (txs, results) '){
change to
txs.executeSql('SELECT * FROM jobs WHERE id="' + ID + '"', [], function (txs, results){

Related

Javascript chinese variable being passed to bash script as question mark

I have this javascript function here, the routeno variable will pass a Chinese value
routeno: 粤ZX123港
function getRouteLegNoList()
{
var data = "host="+lphost
+ "&user="+user
+ "&gateway="+gateway
+ "&routedate="+routedate.value
+ "&routeno="+routeno.value
+ "&action=GETROUTELEGNOLIST";
alert(lphost+'|'+user+'|'+gateway+'|'+routedate.value+'|'+routeno.value);
callAjax("../restartAndMoveDeclaration.cgi?"+data, "GET", "",
function(text) {
alert(text);
var html = "<select id=routelegno>";
var count = 0;
var lines = text.split("\n");
for(var i = 0; i < lines.length; i ++)
{
var line = lines[i];
var c;
if(line.indexOf("Data|") == 0) {
count += 1;
c = line.split("|");
html += "<option value=\"" + c[1]
+ "\"";
if(c[1]==origRouteLegNo) {
html += " selected ";
}
html += ">" + c[1] + "</option>";
}
}
html += "</select>";
dvroutelegno.innerHTML = html;
if(count==0){
alert('No Route Legs were found for [' +
gateway + '] [' +
routedate.value + '] [' +
routeno.value + ']');
} else {
if(count==1) {
trroutelegno.style.visibility = 'hidden';
} else {
// More than one, display the select box
trroutelegno.style.visibility = 'visible';
}
}
}
);
}
but when shell script captured the variable it does not read the Chinese character and replaced it as question mark
routeno: ?ZX123?
I've already tried to set different NLS_LANG but encountered the same output
NLS_LANG=AMERICAN_AMERICA.ZHS16GBK
NLS_LANG=AMERICAN_AMERICA.AL32UTF8

Is it possible to add a load more button that iterates through a for loop?

Im using an api to get and display food recipes for a project.
function getrecipe(q) {
$.ajax({
url: "https://api.spoonacular.com/recipes/search?apiKey=a568c4a88785422fbf4cf46b976c40e8&number=20&query=" + q,
success: function (res) {
for (var i = 0; i < 4; i++) {
document.getElementById("output").innerHTML += "<div class='pure-u-1 pure-u-md-1-3'><h1>" + res.results[i].title.substr(0,24) + "</h1><br><a href='" + res.results[i].sourceUrl + "'><img class='pure-img' src='" + res.baseUri + res.results[i].image + "' width='400' /></a><br>Ready in " + res.results[i].readyInMinutes + " minutes<br></div>"
console.log(q);
}
}
});
}
The html is
<input id="search-recipes" placeholder="Ingredient"><button class="pure-button" onclick="getrecipe(document.getElementById('search-recipes').value)">Search</button>
<div id="output"></div>
The "number=20" in the url is how many recipes I'm getting back from the API. The for loop is displaying 4 results on my html page. How can I add a load more button that would iterate through and display the next 4 results?
It would be easy if you save the result in a global variable and then create a function to loop through it to display the result.
function getrecipe(q) {
$.ajax({
url: "https://api.spoonacular.com/recipes/search?apiKey=a568c4a88785422fbf4cf46b976c40e8&number=20&query=" + q,
success: function (res) {
return res;
}
});
}
var resArray = getrecipe(q);
var x = 0;
var y = 4;
loadMore(); //this will run the function once
function loadMore(){
for(var i=x ; i< y; i++){
document.getElementById("output").innerHTML += "<div class='pure-u-1 pure-u-md-1-3'><h1>" + resArray.results[i].title.substr(0,24) + "</h1><br><a href='" + resArray.results[i].sourceUrl + "'><img class='pure-img' src='" + resArray.baseUri + resArray.results[i].image + "' width='400' /></a><br>Ready in " + resArray.results[i].readyInMinutes + " minutes<br></div>"
}
x = y;
y = y+4;
}
HTML file
<input id="search-recipes" placeholder="Ingredient"><button class="pure-button" onclick="getrecipe(document.getElementById('search-recipes').value)">Search</button>
<div id="output"></div>
<button onClick="loadMore()">Loard More></button>

Pure Js onclick element doesn't work

I'm having trouble when i run this code under greasemonkey the last position working and run function.
var arry = [];
arry = GM_listValues();
for ( var i = 0; i < arry.length; i++) {
document.getElementById('moje_menu').innerHTML = document.getElementById('moje_menu').innerHTML + '<p id="' + arry[i] + '">' + arry[i] + '</p>';
document.getElementById(arry[i]).onclick = delete;
}
On 10 position the last working ... WHY ????
When you replace the innerHTML you remove all previous event handlers.
In plain JS you can detect the click in the div but you need to check the event:
function removeP(p) {
console.log(p.id);
}
var arry = ["a","b","c"];
window.onload=function() {
for ( var i = 0; i < arry.length; i++) {
document.getElementById('moje_menu').innerHTML += '<p id="' + arry[i] + '">' + arry[i] + '</p>';
}
document.getElementById('moje_menu').onclick=function(e) {
var event = e?e:window.event,tgt = event.target || event.srcElement;
if (tgt.tagName.toLowerCase()=="p") {
console.log(tgt.id);
}
}
}
<div id="moje_menu"></div>
Alternative is inline since you generate the P anyway
var arry = [];
arry = GM_listValues();
for ( var i = 0; i < arry.length; i++) {
document.getElementById('moje_menu').innerHTML += '<p id="' + arry[i] + '" onclick="delete(this)">' + arry[i] + '</p>';
}
You can the modify delete (poor name for a function since delete is a built-in method) to handle the passed paragraph
Example:
function removeP(p) {
console.log(p.id);
}
var arry = ["a","b","c"];
for ( var i = 0; i < arry.length; i++) {
document.getElementById('moje_menu').innerHTML += '<p id="' + arry[i] + '" onclick="removeP(this)">' + arry[i] + '</p>';
}
<div id="moje_menu"></div>
In jQuery you can easily delegate:
function removeP() {
console.log(this.id);
}
$(function() {
var arry = ["a","b","c"];
var $menu = $('#moje_menu');
for (var i=0; i<arry.length; i++) {
$menu.append($('<p/>',{"id":arry[i], "text":arry[i]}))
}
$menu.on("click","p",removeP);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="moje_menu"></div>
This is my solution i dont like them but works.
var arry = [];
arry = GM_listValues();
for ( var i = 0; i<arry.length; i++) {
// if(arry[i].search('player')==''){
document.getElementById('moje_menu').innerHTML += '<p class="lista_farm" id="'+arry[i]+'">'+arry[i]+'</p>';
//document.getElementById(arry[i]).onclick = usun_farme;
//}
}
var lista_farm = document.getElementsByClassName('lista_farm');
for(var i = 0; i<lista_farm.length; i++){
lista_farm[i].onclick = usun_farme;
}

JavaScript function performed on 6 id's at a time (return after 6 calls ?)

I am wondering if there is a function I can use so that I can seperate data being called into groups of 6.
here is the long form of the code
var currentResults;
function init() {
getProducts();
}
function getProducts() {
$.ajax({
url:"php/products.php",
dataType: "json",
data: { public: true },
success:function(result){
processResults(result);
}
});
}
function processResults(results) {
currentResults = null;
if (!results && !results.products)
return;
currentResults = results.products;
for (var i = 0; i < results.products.length; i++) {
processResult(results.products[i]);
}
$(".galleryitem").click(handleThumbnailClick);
}
function processResult(result) {
var newDiv = '<div id="galleryitem' + result.id + '" class="galleryitem">';
newDiv += '<div class="imageHover" style="background: ' + result.color + '"> </div>';
newDiv += '<img class="galleryImage" src="' + encodeImagePath(result.thumbnail) + '" />';
if (result.artist)
newDiv += '<div class="imageArtist">' + result.artist + '</div>';
newDiv += '< /div>';
$('#gallery').append(newDiv);
}
i would like the function to be able to sort the images to groups of 6, something like this... (see areas at bottom with ***'s)
function processResult(result) {
var newDiv = '<div id="galleryitem' + result.id + '" class="galleryitem">';
newDiv += '<div class="imageHover" style="background: ' + result.color + '"> </div>';
newDiv += '<img class="galleryImage" src="' + encodeImagePath(result.thumbnail) + '" />';
if ***(!!first 6 called!!)***
newDiv += '<div class="imageArtist">' + result.artist + '</div>';
newDiv += '< /div>';
$('#galleryfirst').append(newDiv);
if ***(!!second 6 called!!)***
newDiv += '<div class="imageArtist">' + result.artist + '</div>';
newDiv += '< /div>';
$('#gallerysecond').append(newDiv);
}
Is doing something like this possible? Or does this whole code need an overhaul?
First, pass the index:
for (var i = 0; i < results.products.length; i++) {
processResult(results.products[i], i);
}
Then check it:
function processResult(result, index) {
var newDiv = ...
//check if the index is a multiple of 6
if(index % 6 == 0){
//do something every six results
}
HTH,
-Ted
Since you want to append the new items to different DIVs, the processResults function might be the better place to do this:
function processResults(results) {
var i = 0,
length = results.length,
first = $("#galleryfirst"),
second = $("gallerysecond");
first.append('<div class="imageArtist">' + results[0].artist + '</div>');
for (i; i < 6 && i < length; i++) {
processResult(results[i], first);
}
if (length > 6) {
second.append('<div class="imageArtist">' + results[6].artist + '</div>');
for (i = 6; i < 12 && i < length; i++) {
processResult(results[i], second);
}
}
}
function processResult(product, containerId) {
var newDiv = "...";
// build the HTML for newDiv...
$(containerId).append(newDiv);
}

jQuery mobile listview change select item and highlight it

In a page,there is a listview,the first item is selected:
var len = results.rows.length,
$list = $("#listAddr");
var $strHTML =" ";
for (var i = 0; i < len; i++) {
$strHTML += '<li ';
if (i == 0) {
$strHTML += ' data-theme="b" ';
}
$strHTML += '> <a href="#" data-ajax="false"';
$strHTML += ' data-id="' + results.rows.item(i).Id + '">' + results.rows.item(i).Name + '</a></li>';
}
$list.html($strHTML);
$list.delegate('li a', 'click',function(e){
// $("#listAddr").attr("li").removeClass("liSel");
$(this).addClass("data-theme='b'");
$("#listAddr").listview("refresh");
//$(this).removeClass("data-theme");
clickAddr($(this).data('id'));
});
When I select the third item,I want the third item to be "data-theme='b'" style and the first item to remove the theme.How to be able to do that?
You can do soemthing as below
$('#listAddr li').bind('click', function () {
$('#listAddr li').attr("data-theme", "c").removeClass("ui-btn-up-b").removeClass('ui-btn-hover-b').addClass("ui-btn-up-c").addClass('ui-btn-hover-c');
$(this).attr("data-theme", "b").removeClass("ui-btn-up-c").removeClass('ui-btn-hover-c').addClass("ui-btn-up-b").addClass('ui-btn-hover-b');
});
Here is an example on Live fiddle
use data() to change the data attribute...
$.removeData($list.find('li'), "theme");
$(this).data("theme",'b');
try this
$list.on('click','li a',function(e){
$.removeData($list.find('li'), "theme");
$(this).data("theme",'b');
$("#listAddr").listview("refresh");
clickAddr($(this).data('id'));
});

Categories