Javascript syntax error? "Unexpected Indentifier" - javascript

sorry I just started with javascrippt and html and I am having trouble finding out what the unexpected identifier is?
here is my function
function fillSearchPlayer(data){
$('#searchPlayers tbody').html('');
for (var i = data.length - 1; i >= 0; i--) {
var p = data[i]
var item = '<tr><td>'p.firstname + ' ' + p.lastname'</td><td>'p.job'</td><td><button class="cbtn" onclick="requestPlayer("'+ p.identifier + '")">More</button></td></tr>'
$('#searchPlayers tbody').append('item');
}
}
maybe you guys could help me, it's saying its coming from the line that starts with "var item"

'<tr><td>'p.firstname look like you missed a plus sign over there. The other thing is .append('item'); - you probably intented to do .append(item);.
As the guys mentioned in the direct comments above you should try to use some templating engine instead of constructing the strings the way you did it.
I would recommend you to read these pieces:
Handlebars - simple and convenient template engine in JavaScript - give it a try!
Template strings in ES2016 - a cleaner way to do what you did with manual string concatenation

There are several errors. String concatenation works with +, and you're missing a semicolon.
Try:
function fillSearchPlayer(data) {
$('#searchPlayers tbody').html('');
for (var i = data.length - 1; i >= 0; i--) {
var p = data[i];
var item = '<tr><td>' + p.firstname + ' ' + p.lastname + '</td><td>' + p.job + '</td><td><button class="cbtn" onclick="requestPlayer("'+ p.identifier + '")">More</button></td></tr>';
$('#searchPlayers tbody').append('item');
}
}

The var item = ... item mixes variable and literal definitions without the real concatenation going on. Just put a + between each varying element to achieve your goal.

You need to enclose the concatenation operator around the p.job variable.
Your assignment should look like this...
var item = '<tr><td>'+p.firstname + ' ' + p.lastname+'</td><td>'+p.job+'</td><td><button class="cbtn" onclick=requestPlayer('+ p.identifier + ')>More</button></td></tr>'

Related

Why is the following way to assign a value to a JSON array not working?

I have this code:
compareList[productName] = productID + ',' + productHref;
console.log(productName + ' ' + productID + ' ' + productHref + ' ' + compareList.length);
Which logs into this (I have removed the link):
Acer Iconia B1-790 [NT.LDFEE.002] 112576 link removed for confidentiality 0
As you can see, all three variables are valid strings, but the json object still fails to assign (compareList.length logs as 0). I've been thinking and thinking but I simply can't figure it out. Any help is appreciated.
Maybe this version of adding and checking array length can be useful to you?
var compareList=[]
var productName = {productID:'saban',productHref:'http://saulic.com'};
compareList.push(productName);
console.log(compareList.length);

Server side fix for widows in text string

I'm having an issue with server side widows fix.
I'm able to fix widows/orphans with client side javascript.
However I would prefer to do it server side before the page renders. Unfortunately my C# is limited. How would I be able to accomplish this? Or at least get an idea of how to accomplish this.
Here's the javascript that I've used.
var wordArray = $('element').text().split(' ');
if (wordArray.length > 1) {
wordArray[wordArray.length - 2] += ' ' + wordArray[wordArray.length
- 1];
wordArray.pop();
$(''element'').html(wordArray.join(' '));
}
Thank you in advance.
Please read my comments inside the code
public string Model_fix(string ElementText)
{
var result = string.Empty;
// the compiler will set wordArray as List of string and not an array
// list in c# is more similar to an array in javascript
var wordArray = ElementText.ToString().Split(' ').ToList();
if (wordArray.Count > 1)
{
wordArray[wordArray.Count - 2] += "' '" + wordArray[wordArray.Count - 1];
wordArray.RemoveAt(wordArray.Count - 1); // equivilent to Array.pop in javascript
result = string.Join(" ", wordArray); // equivilent to Array.join() in javascript
}
return result;
}

ExtJS/JavaScript - show image when using replace() function

I'm not sure exactly how much this question has something to do with ExtJS and how much with pure JavaScript. Anyways I have a string with comma separated value. I need to use for the GUI so I try to make it as user-friendly as I can. I made most of the things I wanted but one thing I can't accomplish yet. I want to replace all commas in the string with a proper image, which I think will fit very well on what I'm doing but for now - I try with no success.
For those familiar with ExtJS - I'm doing this for each cell in a certain column of a grid with a render function. But I think that maybe the problem must be solved with a pure JavaScript function. Here is what I have by now:
_cusomizeString: function(dates) {
if (dates != null)
{
var date = dates.replace(/,/g,"|");
var www = date.split('|');
var xxx = www.length;
for (var i = 2; i < xxx; i+=3)
{
www[i] = www[i] + '<br />';
}
var ggg = www.toString();
var hhh = ggg.replace(/,/g,'<img src =" ' + D:\dir1\dir2\dir3\dir4\dir5\img.png + ' "/>');
return hhh;
}
return dates;
}
I tried a few variations, now I don't get error but don't see an image either.
Thanks
Leron
P.S
With this change in the function:
var finalString = tempString.replace(/,/g,'<img src ="http://www.finishingtouch.co.uk/assets/images/common/calendar_icon.png"/>');
I am able to visualize this:
The main problem now is how to add the image before the first element, because now it's missing (Noticeable especially when there's only one date) and how I can make it work with local files for now? I've tried using this in my replace function:
'<img src ="file:///D:\\symapac\\src\\public\\img\\icons\\draft.png"/>'
But the console log returns this and I dont see no image:
07-06-2012<img src ="file:///D:\dir1\dir2\dir3\dir4\dir5\img.png"/>16-06-2012
Ok, I have almost final solution. Here is how it looks like:
Here is my final function:
_checkDates: function(dates) {
if (dates != null)
{
var date = dates.replace(/,/g,"|");
var arrayOfDates = date.split('|');
var stringLength = arrayOfDates.length;
for (var i = 2; i < stringLength; i+=3)
{
arrayOfDates[i] = arrayOfDates[i] + '<br />';
}
var tempString = arrayOfDates.toString();
var finalString = tempString.replace(/,/g," ,");
finalString = finalString.replace(/,/g,"<img src="+ "'" + pathToImage + "'" +"/>");
var imgSrc = "<img src="+ "'" + pathToImage + "'" +"/>";
var otuputString = imgSrc.concat(finalString);
return otuputString;
}
return dates;
}
There is that little problem that no matter now many tabs I put in var finalString = tempString.replace(/,/g," ,"); the space between the icons is always the same, no idea why. But that's the closest I get to what I've wanted.
Cheers
Leron
'<img src ="file:///D:/dir1/dir2/dir3/dir4/dir5/img.png"/>'
You have a space before your filename, also your filename isn't in quotes.

Adding and remove items from a string without using arrays

I am trying to add and remove things in a string with using arrays. However this following script I created is not working as it doesn't remove numbers that have been submitted:
function updateCCList(id)
{
var MemberClicked = '[' + id + ']';
var ListClickedMembers = document.frmSendMail.hidSenderList.value;
if(ListClickedMembers.indexOf(MemberClicked) == -1)
{
ListClickedMembers += MemberClicked;
}
else
{
ListClickedMembers = ListClickedMembers.replace(/' + MemberClicked + '/g,'');
}
alert(ListClickedMembers);
document.frmSendMail.hidSenderList.value += ListClickedMembers;
}
Any idea what is wrong?
Many thanks,
Paul
The main problem:
ListClickedMembers = ListClickedMembers.replace(/' + MemberClicked + '/g,'');
The first RegExp there looks bad. I think you mean new RegExp('\\['+id+'\\]')
In case you care about avoiding duplicate entries:
document.frmSendMail.hidSenderList.value += ListClickedMembers;
You don't need += there, = will suffice.

selectors via jquery

Is there any way to write the following code working with innerHTML in the compact platform-independent way (probably using jquery)?
The point is that IE names tags in different case in innerHTML, so I need two if clauses to handle that. toLowerCase does not help when it comes to quotes.
var flagpos = html.indexOf('</a>')
if (flagpos == -1) flagpos = html.indexOf('</A>')
html = (flagpos >= 0) ?
'<span class="' + html.substr(flagpos + 4).
replace(/^\s*|\s*$/, '').
replace(/ /g, '"></span><span class="') +
'"></span>' + res + ' ' + html.substr(0, flagpos + 4) : res + ' ' + html
-- or --
if (!toggleFlags[j] ||
child.innerHTML.indexOf('<span class="' + j + '">') >= 0 ||
child.innerHTML.indexOf('<SPAN class=' + j + '>') >= 0) continue
You could use String.search() instead of String.indexOf() to make your patterns case-insensitive (since you don't need an offset): var flagpos = html.search(/<\/a>/i);
what's stopping you from doing $html = $(html); and using the jQuery Traversing API?
Just use
var whoCares = child.innerHTML.toUpperCase();
Then you can always compare with UPPER CASE tag names. (Or, use ".toLowerCase()" instead.) Of course that'll convert all the alphabetic characters to upper case (or lower case, as the case may be), so you'll have to do:
if (!toggleFlags[j] || child.innerHTML.toUpperCase().indexOf('<SPAN CLASS=' + j.toUpperCase() + '>'))
Yet another totally different approach is to stop looking for elements via the raw (or, rather, reconstituted) HTML, and use a selector (which maybe was the point of your question :-):
if (!toggleFlags[j] || child.find('span.' + j).length > 0) {
// whatever
}

Categories