AngularJS string is not a function - javascript

To shorten up the post this is all the info needed for my problem, so i made a button that gives +1 rating and a button for -1 rating when clicked and this is its HTML code,
<p>
<strong>Rating: </strong> {{ album.rating }}
<button class="btn btn-small" ng-click="upVoteRating(album)">+</button>
<button class="btn btn-small" ng-click="downVoteRating(album)">-</button>
</p>
Nothing unusual, heres the angularjs code using scope and the function for the button.
$scope. upVoteRating = 'upVoteRating';
$scope. downVoteRating = 'downVoteRating';
function upVoteRating(album) {
album.rating++;
}
function downVoteRating(album) {
if (album.rating > 0)
album.rating--;
}
So theres no problem with the code by my guessings but everytime i click the button on my page, it says this on the console:
"TypeError: string is not a function
at http://localhost:1234/lib/angular/angular.min.js:168:37
at http://localhost:1234/lib/angular/angular.min.js:186:167
at g.$eval (http://localhost:1234/lib/angular/angular.min.js:104:308)
at g.$apply (http://localhost:1234/lib/angular/angular.min.js:105:48)
at HTMLButtonElement.o.event.dispatch (http://localhost:1234/lib/jquery-2.1.0.min.js:3:6055)
at HTMLButtonElement.r.handle (http://localhost:1234/lib/jquery-2.1.0.min.js:3:2830) angular.js:9507"
I've got no idea how to fix this, i've been looking for an hour, so please, if you need more code to help you out to find the problem out ask right away!
Thanks again!

You're setting it as a string here:
$scope.upVoteRating = 'upVoteRating';
and trying to call it as a function here
<button class="btn btn-small" ng-click="upVoteRating(album)">+</button>
Remove the quotes in the controller and you should be good:
$scope.upVoteRating = upVoteRating;
$scope.downVoteRating = downVoteRating;

Related

AngularJS Convert Text to HTML Tags

Okay so I am learning AngularJS, and one functionality is to allow the user to type HTML code into a textarea, this gets sent to the Controller and stored in a code variable. When the user presses the button to test the code, I want the text to be inserted into the HTML document. Currently all it does is add it as plain text, so not rendering it.
test-code.template.js:
<button type="button" class="btn btn-primary" ng-click="$ctrl.showCode()">Test Code</button>
<button type="button" class="btn btn-primary" ng-click="$ctrl.clearCode()">Reset All</button>
{{$ctrl.codeShow}}
test-code.component.js:
angular.
module('phonecatApp').
component('testCode', {
templateUrl: 'Components/test-code/test-code.template.html',
controller: [function TestCodeController() {
var self = this;
self.code = '';
self.codeShow = '';
self.showCode = function showCode()
{
self.codeShow = self.code;
}
self.clearCode = function clearCode()
{
self.codeShow = '';
self.code = '';
}
}]
});
Just to clarify, pressing the buttons do work and the data is successfully added from code to codeShow on the button press, and it can display it, but it is displayed as clear text instead of rendering. Thank you
Try
<div ng-bind-html="$ctrl.codeShow"></div>
also, do refer https://docs.angularjs.org/api/ngSanitize/service/$sanitize for better implementation

Passing variable from Laravel to Javascript and return on click

I have the next button
<button type="button" onclick="return myButton({{$cars->id_cars}}, {{$price}});"</button>
I think something here is wrong because I introduced a value, and the value what I get is with "-". For example I have price=520, what I get is -520.
Edit with function:
function myButton(id_car, price) {
$("#id_car").val(id_car);
$("#price").val(price);
}

javascript undefined input value despite of writing in it

I have a strange problem: I am getting a undefined alert window by running this code. I looked up all the entrys here but I couldn't find a solution.
I've checked, there is no identical id except this one
running the php file the result of var_dump($user_id) shows the right value
this is why I don't understand why the value in javascript is undefined all the time...
HTML:
<form action="?atn=surveyCode" method="post" class="form mg_top">
<label id="entersID" for="usersID">Enter your prolific ID:</label>
<input id="usersID" value="" type='text' class="form-control talign_center input" name="usersID">
<button id="survey" class="btn btn-primary form-control">Go to questions</button>
</form>
JavaScript: every alert is returning "undefined". I never get in the else part. This is really strange. I've many parts like this in my code and they are working perfectly.
$("#survey").click(function(e){
var prolific = $("usersID").val();
alert(prolific);
if(prolific==undefined){
alert(prolific);
$("#entersID").addClass("error-msg");
$("#entersID").parent().addClass("has-error");
e.preventDefault();
}
else{
alert(prolific);
window.open("http://www.w3schools.com");
}
});
PHP:
private function surveyCode(){
$userID = $_POST["usersID"];
var_dump($userID); //shows a value
}
Please help me, maybe this is a silly bug but I can't find it....
Change the line into
var prolific = $("#usersID").val();
You have to add the "#" sign before the id selector like below :
var prolific = $("#usersID").val();

Error passing json array onclick- html and javascript

I am generating a clickable list dynamically using jquery. here is the code that generates the list.
for(dayint=0;dayint < day_arr.length;dayint++){
var temp_pass = JSON.stringify(day_arr[dayint]);
//alert(temp_pass);
$("#itin_list").append('<b>Day '+ dayint + ' of Trip from '+ start_n +' to '+ end_n +' </b> <button data-toggle="modal" data-target="#dirModal" style="position:absolute;bottom:5px; right:5px;float:right" class="btn btn-primary">Show Directions</button><br>');
}
The problem I have is when passing the json array to my sethidddendiv function. The code sample for the function is as below:
window.sethiddendiv = function(str) {
//var nisal = $.parseJSON(str);
alert(str);
}
When the list item is clicked, instead of giving the json array, it alerts "undefined" all the time.
Here is the html that is generated in the page when I inspect element:
<b>Day 0 of Trip from Colombo to Kandy </b> <button data-toggle="modal" data-target="#dirModal" style="position:absolute;bottom:5px; right:5px;float:right" class="btn btn-primary">Show Directions</button>
What could be the issue here?
I already tried using single quotes for the onclick, but it didnt work. Any help would be very welcome. I'm stuck.

issues with credit card validation

I am using credit card validation in my cartridge project to validate the card type and card number.Everything is working fine, but whenever I got the validation error in alert box and when I click OK it doesn't stop on that page but refer me to the next page,Thus I am getting an error or not my order is got placed.
Here is my code.
<input type="submit" class="btn btn-large btn-primary" onClick="cardchk();" value="{% trans "Next" %}">
function cardchk()
{
var card_typ=$("input[name='card_type']:checked")[0].value;
//alert(card_typ);
if(card_typ=='Visa')
{
var cardname = 'Visa';
}
else
{
var cardname = 'MasterCard';
}
//alert(cardname);
var cardnumber = document.getElementById('id_card_number').value;
if(!checkCreditCard (cardnumber, cardname)){
alert(ccErrors[ccErrorNo]);
return false;
}
}
However I have returned false in my function but on getting error it refer me to the confirmation page but I want as normally validation do to stop processing the request whenever I got the error
Thanks !
you need
onClick="return cardchk();"
not just
onClick="cardchk();"
nb. I don't see here that you are using jquery validate

Categories

Resources