I know that this is question has been asked many times before but I can't find any similar case like mine.
I want to call a javascript function on an input type button control I'm doing it like so:
<input type="button" onclick="FormatApplicationMessage(#application.StatusID, '#application.IssueMessage')" class="fa fa-search fa-lg" />
but I always got this error:
Uncaught SyntaxError: Unexpected token ILLEGAL
This is the generated html :
<input type="button" onclick="FormatApplicationMessage(5, 'Please provide a copy of your CV')" class="fa fa-search fa-lg" />
I tried to do this:
<input type="button" onclick='FormatApplicationMessage(#application.StatusID, "#application.IssueMessage")' class="fa fa-search fa-lg" />
But I get the same error message
any hacks ?
EDIT
Here is FormatApplicationMessage implementation:
function FormatApplicationMessage(statusID, issueMsg) {
//declined
if (statusID == 4) {
$('#ApplicationMessageLabel').val("Message");
}
//Update Required
else if (statusID == 5) {
$('#ApplicationMessageLabel').val("Message");
}
//Approved
else if (statusID == 6) {
$('#ApplicationMessageLabel').val("Message");
}
$('#ApplicationMessage').show();
}
Here is what I think might go wrong:
FormatApplicationMessage is not defined as a function. Define this function with two parameters. And reference the script or define the function inline.
Make sure that in your view you can access #application and it contains your properties StatusID and IssueMessage
Make sure that #application is not part of your #Model or #ViewBag. If either is true use either #Model.application.XYZ or #ViewBag.application.XYZ
If all is defined, and you want to use #application inside parenthesis, use #(application.XYZ) otherwise the parser might get an error, so try:
<input type="button" onclick='FormatApplicationMessage(#(application.StatusID), "#(application.IssueMessage)")' class="fa fa-search fa-lg" />
See http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx/ and look for Explicit Expression
EDIT
If #Infas is a C# class and you want to use this in JavaScript you must create the script inline in your view. You cannot use Razor #-syntax in a pure .js-file.
After days of investigation finally I found the problem. The problem was very silly and quite annoying
The rendered HTML was like so:
<i class="mywarning fa fa-warning (alias) fa-lg" onclick="FormatApplicationMessage(5,"Return Message
")"></i>
as you can see this part ")"></i> is rendered on the next line because the string contains endlines which for some reasons it isn't legal to do so.
So to solve the problem I'd just replaced endlines by '< br >' (you can replace it by whatever symbol you like) when calling FormatApplicationMessage for the second parameter. Inside FormatApplicationMessage I restored those '< br >' to "\n" then displayed it in a text area.
USEFUL THREADS:
1
2
3
4
Related
I just discovered a font library named Font Awesome. I tried to integrate it as followed but I got the error message in the console.
" Uncaught SyntaxError: Unexpected identifier "
var button= document.getElementById("btn");
var icon=document.getElementById("ic");
button.addEventListener("click", function(){
icon.innerHTML="<i class="fa fa-wifi" aria-hidden="true"></i>";
}
<head>
<script src="https://use.fontawesome.com/180fe96fd3.js"></script>
</head>
<body>
<button id="btn">Click for wifi</button>
<p>
<span id="ic"></span>
</p>
</body>
Basically, what I want to do is, when the user click the icons, the wifi icons from font awesome appeared in the span area. Am I using the correct method for usage in Javascript? Once again, thank you for your time.
you have write <i> with "" string and inside string use ""
so thats why error generated
use like below two way
icon.innerHTML='<i class="fa fa-wifi" aria-hidden="true"></i>';
or
icon.innerHTML="<i class='fa fa-wifi' aria-hidden='true'></i>";
There's a problem with text escaping. Try icon.innerHTML='<i class="fa fa-wifi" aria-hidden="true"></i>';. Notice the use of single quotes.
Hopefully, I've titled this right I still get confused with my terminology. I'm trying to dynamically add new elements which I used an AJAX request to get and I placed into a div called <div class="hidden-tags"></div>.
Whenever a button is clicked, it triggers this function
$(".tags").on("click", '.tag i', function() {
var lastTag = $(".tags > span").last().text();
$(".tags").append($(".tagname-"+lastTag).parent().next());
});
So it should be appending the .tagname-VARIABLE parent's next parent to the .tagselement but instead nothing happens and there is no element added, nor an error in the console
when i do some testing i found that everything up to the $(".tags").append($(".tagname-"+lastTag).parent().next()); worked fine, some reason the .parent().next() didnt work; still unsure why
Example:
On one of the tests, I did the lastTag variable was defined as portal so therefore the function is $(".tags").append($(".tagname-portal").parent().next());
so it should append the <span class="tag">guide<i class="fa fa-times tagname-guide"></i></span> to the .tags element but instead doesn't do that and leaves me with no error in the console
Here are the tag layouts in case this helps (just examples)
<div class="tags">
<span class="tag">games<i class="fa fa-times"></i></span>
<span class="tag">guides<i class="fa fa-times"></i></span>
</div>
<div class="hidden-tags">
<span class="tag">games<i class="fa fa-times tagname-games"></i></span>
<span class="tag">guides<i class="fa fa-times tagname-guides"></i></span>
<span class="tag">video<i class="fa fa-times tagname-video"></i></span>
</div>
Edit:
To clarify, what i'm trying to do:
I've used AJAX to get a response in JSON and used $.each($.parseJSON(response), function(k, v) { to split the keys and values, i've then used a function which cuts the array off after a certain total character count, i then want to be able to find the next key/value after that 'cut off point' with jquery/js, and then the next key/value etc etc
if (tagchars < 415) {
$(".tags").append("<span class='tag'>"+k+"<i class='fa fa-times'></i></span>");
$("table").append("<tr><td>"+k+"</td><td>"+(v*2)+"%</td></tr>");
}
the json looks something like {"tagname":"value", "tagname":"value"},
This question already has answers here:
passing $(this) from function to function
(3 answers)
Closed 7 years ago.
Okay, so I have got two problems here. First I will show you the html.
<div id="servicesAvailable">
<div>
<input type="text" name="servicesAvailable[]">
<i class="fa fa-plus-circle"></i>
<span>Add another service</span>
</div>
</div>
Okay so i want the user to be able to click the '.fa-plus-circle' class to add another div inside #servicesAvailable.
So i did this:(i know that people will say why dont you write $() instead of jQuery(), but its fine like this).
jQuery('fa-plus-circle').click(function(){
jQuery('#servicesAvailable').append(
'<div>
<input type="text" name="servicesAvailable[]" onclick="addServices(this)">
<i class="fa fa-plus-circle"></i>
<span> Add another service</span>
</div>'
);
jQuery(this).next().hide();
jQuery(this).hide();
});
Ok so with this it should work fine. It actually works the first time i click the class. Then when i click on the fa-plus-circle class on the new appended section it just doesn't do anything. Even if i put console.log('here'); inside the jQuery click function it doesn't log.
So to start of if anyone can point out something i did wrong there then great!.
However i have tried now to change the way i do this to get it to work which leads the the title question 'how to send through onclick="function(this)"'
<div id="servicesAvailable">
<div>
<input type="text" name="servicesAvailable[]">
<i class="fa fa-plus-circle" onclick="addServices(this)"></i>
<span>Add another service</span>
</div>
</div>
function addServices(this)
{
jQuery('#servicesAvailable').append(
'<div>
<input type="text" name="servicesAvailable[]" onclick="addServices(this)">
<i class="fa fa-plus-circle"></i>
<span> Add another service</span>
</div>'
);
this.next().hide();
this.hide();
}
now straight away in the console before i do any thing is has
Uncaught SyntaxError: Unexpected token this
function addServices(this)
Can anyone advise what i am doing wrong in either cases to get this to work please?
Ill admit i'm not 100% which the second way but i'm pretty sure the first attempt should work.
As the error is Syntax Error Uncaught SyntaxError: Unexpected token this.
Your string is not completed on the same line. For multiline strings use \ at the end of line
function addServices(el) {
jQuery('#servicesAvailable').append(
'<div>\
<input type="text" name="servicesAvailable[]" onclick="addServices(this)">\
<i class="fa fa-plus-circle"></i>\
<span> Add another service</span>\
</div>'
);
jQuery(el).hide().next().hide();
}
This is your working code:
$('#servicesAvailable').on("click", ".fa-plus-circle",function () {
$('#servicesAvailable').append('<div>\
<input type="text" name="servicesAvailable[]" onclick="addServices(this)">\
<i class="fa fa-plus-circle">click to add</i>\
<span> Add another service</span>\
</div>');
jQuery(this).next().hide();
jQuery(this).hide();
});
Here is the JSFiddle demo
The event was binded only to the existing element, and not with the dynamically added elements. To bind events with dynamically added elements you need to update
jQuery('fa-plus-circle').click(function(){
to
jQuery("#servicesAvailable").on("click", "fa-plus-circle", function(){
For reference - http://api.jquery.com/on/
I am working with the rivets.js library to template data into my application. I am stuck at a kind of a formatting issue. How do I format values while templating them?
For example I have to template the user's photo location inside the image tag and I am getting the name of the file stored on the server from my DB.
It will be a hashed value but I need to prefix it with /img/uploads/ or something like that and postfix it with maybe .jpeg
I am checking if the value is null or not and this is my code:
<img rv-unless="user.photo" src="img/avatars/sunny-big.png" alt="me" data-toggle="modal" data-target="#myModal">
<img rv-if="user.photo" rv-src="user.photo" alt="me" data-toggle="modal" data-target="#myModal">
<i class="fa fa-camera"></i>
If I do something like rv-src="/img/uploads/user.photo", it wouldn't work for obvious reasons. How to get around this problem?
I think the solution to your problem is using formatters Rivets. They are like filters in AngularJS and support piping.
You can define a formatter as follows:
rivets.formatters.imgPath = function(value){
return '/img/uploads/' + value + '.jpeg'
}
Then you can use it in your markup like:
rv-src="user.photo | imgPath"
I wish the previous questions had answered this problem, but it seems like I'm facing something different here, unless I'm missing something..
I understand ng-repeat creates a child object and from that we can call things such {{note.id}}.
My problem is living in my attempt to pass that note.id to ng-click
Below the code with attempts and errors.
<div class="col-lg-3" ng-controller="mainCtrl">
<div class="list-group">
<a href="#notes/{{note.id}}" class="list-group-item" ng-repeat="note in notes" >
{{note.title}}
<button ng-click="deleteNote(note.id)" class="btn btn-danger" >x</button>
</a>
</div>
</div
Inspecting the elements we have
<a href="#notes/5" class="list-group-item ng-binding ng-scope" ng-repeat="note in notes">
hello update
<button ng-click="deleteNote(note.id)" class="btn btn-danger">x</button>
</a>
And in case I try something that would look more like the angularjs sintax
<button ng-click="deleteNote({{note.id}})" class="btn btn-danger" >x</button>
In that case my element inspection brings up the right id ...
<button ng-click="deleteNote(5)" class="btn btn-danger">x</button>
Bu I have an error
Error: [$parse:syntax] http://errors.angularjs.org/1.2.19/$parse/syntax?p0=note.id&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=14&p3=deleteNote(%7B%7Bnote.id%7D%7D)&p4=note.id%7D%7D)
I could not tell what the error is from the message or the link it takes me to
Syntax Error: Token 'note.id' is at column {2} of the expression [{3}] starting at [{4}].
code for the controller
.controller('mainCtrl',['$scope', 'notesFactory', function($scope, notesService){
$scope.notes = notesService.notesObjectInService;
$scope.addNote = function(){
if ($scope.title === "" ) {
return;
}
notesService.create({
title: $scope.title
body:$scope.body
});
$scope.title= '';
$scope.body= '';
};
$scope.deleteNote = function(id) {
notesService.delete(id);
notesService.getAll();
};
}])
http://jsfiddle.net/p2t1waxp/2/
Your first attempt
<button ng-click="deleteNote(note.id)" class="btn btn-danger">x</button>
actually works, doesn't it?
It just doesn't render the id when you inspect it, but it process it right in the controller, as you can see in the console
I'm sorry but turns out that the standard way to do things as supposed works just fine. ng-click(note.id) ..
I had not implemented completely my function yet because I was debugging with Chrome tools Inspecting the element and I expected that the id element should come up in the inspection. Once it didn't as I showed in the code above I assumed it was wrong. But by finishing implementing the service and the back end it actually works just fine.
It's something I didn't know about the developer tools. What i still don't understand is why the id doesn't show up in the html inspection like href="#notes/{{note.id}}" ....I am assuming it has to do with the {{}} notation, but I'd have no precise answer for it. If someone can explain it'd help with my knowledge of angular and html as I'm new to programming.
Thanks and sorry for silly mistake.