I have a simple query which i am not able to understand why it doesnt work for me.
I have a ajax call and i get data from backend. Here it is.
$.ajax({
type: "GET",
url: serviceURL,
}).then(function (response) {
$scope.$apply(function () {
$scope.username = response.FirstName;
});
console.log($scope.username);
});
I am able to get the console output here. Means ajax works fine. Now i need to display it at the front end. Here is the code for that.
<li ng-model="username">[USERNAME should comeHere]</li>
I have used ng-model to bind the controller side data to front end. So the username should display in between the [] brackets i mentioned above. However, this is not happening.
Can someone tell me what is it tat i am doing wrong. ? I have also used $apply because i read somewhere that this will force it to make the updated changes.
It should be:
<li>{{username}}</li>
This may help to shed light on this: What's the difference between ng-model and ng-bind
Related
All the other solutions in stackoverflow doesn't seem to work for me so i'm posting my code for assistance. I want to output the variable: #less_per_unit via jquery
Here is my tag inside _form.html.erb:
<script>
$(document).on('keyup', ".input-quantity", function(){
$.ajax({
url: "/so_check_increment",
type: "GET",
data: { quantity: $(this).val(), product_id: $(this).closest('tr').find('.input-product_code').val()}
});
$(this).closest('td').next('td').find('.increment').text('<%== j #less_per_unit%>');
});
</script>
And here is my controller:
def check_increment
#less_per_unit = "testing"
end
I know that the ajax works, i've also set up the routes. If I try binding.pry, I know that rails can find #less_per_unit, but I can't output it with javascript.
This is not working because:
Let us say this form is rendered in action 'new' of controller 'Post', then #less_per_unit needs to be initialised there to use it in the view file of that action which you are using. Where as you are using an AJAX call and during that call, you are defining an instance variable which will definitely be not accessible to the already rendered html file.
So, you need to return JSON data from your check_increment action and receive that data in AJAX call response and then use it.
I'm building my first little AngularJS app.
I'm successfully able to show all entries from the API on the home page of the app.
Then I'm routing the user via ng-href to /jobs/{{job.id}} and have the appropriate controller to do that.
My console.log statement is telling me that the correct entry is being loaded via the GET request method but the template isn't actually pulling that back for display.
Here's the extent of what I have so far http://plnkr.co/QPW3lsLHfPxyYOKcVOKY (obviously my API isn't public) but wondering if there's something obvious I'm missing in my show template relating to the showController perhaps?
I've been working along with CodeSchool but I've had to make some mods to their code (for example the showController wasn't correctly defining $http or $routeParams).
Help appreciated.
So it seems there's an issue between the tutorial version of Angular 1.3.x and the one I'm using 1.4.x
However, using this works as sweet as a nut, passing $scope as a function parameter
angular.module('JobStore')
.controller('JobsShowController', function($http, $routeParams, $scope) {
$http({
method: 'GET',
url: '/jobs/' + $routeParams.id + '.json'
}).success(function(data) {
$scope.job = data;
console.log(data);
});
})
Something strange is going on with an Ajax call I'm making and I can't figure out why its happening, maybe someone can shed some light.
This is the call
$.ajax({type:'POST', url: apiURL+"misc/"+cola, headers: {'apikey':localStorage.apiKey}, dataType: 'html', success:function(data) {
$("#pagina").html(data);
postCarga("pagina");
}, error: function() {
sinConexion();
}});
Now, this should take the "data" received from Ajax and fill div#pagina with it, but the div stays empty.
Here's the strange part, I called console.log(data) to see if the data is getting through and then it not only logs to the console but properly fills in the div#pagina with the returned data.
If I just try to fill it in directly, the div stays empty, but if I do anything beforehand (even something like var xxx = data;), it gets filled in correctly.
I worked around it by moving the filler function into postCarga so my final code looks like this:
$.ajax({type:'POST', url: apiURL+"misc/"+cola, headers: {'apikey':localStorage.apiKey}, dataType: 'html', success:function(data) {
postCarga(data,"pagina");
}, error: function() {
sinConexion();
}});
,but that feels strange.
// EDIT //
Here's the whole function
function postCarga(datos,que) {
$("#"+que).html(datos).animate({top:'0%'},350,'ease-in',function() { $("#cargando").css("display","none"); });
}
,originally, all it did was animate and then hide the loader, the html(datos) is part of my fix.
Ok, I just found the reason. I was testing out different things by side-stepping the received data and just trying $("#pagina").html("Hello") and other things, after all of those worked I went trough the html returned by the Ajax call and that's where I found the answer.
I changed the return from the API to send just
<h1>Hello</h1>
and it worked fine, afterwards I manually built up the whole HTML string until I had a carbon copy of what the script generated, sometimes it would load and sometimes not, which was stranger still.
I passed the returned HTML through various lints and checkers and only one of them returned an error, one of the images in the block returned a 404, so I removed that image (and only that image) from the returned HTML and it loaded fine.
In essence, it seems that when Ajax is set to html (dataType: 'html'), each and every thing - direct or remote - in the entire block must be valid html and return a success when called, or it will be silently ignored.
Changing dataType to "text" makes it skip that check and just inject everything into the div as intended.
I have an app that at some point issues an $http POST to a WEB API project as follows
$http({
method: update ? "PUT" : "POST",
url: framewidth + "inspections",
data: data,
}).then(
function (object) {
toastr.success(Messages.success.dflt);
console.log(object.data);
rtrn.resolve(object);
},
function (error) {
toastr.error(Messages.Error(error.statusText));
rtrn.reject(error);
}
);
It saves fine but after it returns object.data is missing some fields. I have traced the missing fields all the way from the depths of the database to the Fiddler layer and the missing fields are there up until the success function of $http
So I can actually see my missing fields being returned in fiddler but they seem to disappear somewhere between that and console.log(object.data); line above.
I am totally stumped. It seems it's disappearing in the layer that's outside my control.
Put a breakpoint in your success function and look at object there. One thing I've noticed about Chrome's dev tools is that if you console.log an object and then the object changes before you expand it, you might get the changed version rather than what it was at the time of getting logged.
Jquery function:
$(document).ready(function() {
$(".checkbox").click(function(){
var selVal = $(this).val();
$.ajax({
type: "POST",
url: 'remove_task.php', //This is the current doc
data: ({sel: selVal}),
success: function(data){
//alert(selVal);
console.log(data);
}
});
});
});
My PHP function in remove_task.php:
function remove_selected_task()
{
$task_to_remove = $_POST['sel'];
echo $task_to_remove;
}
if (isset($_POST['remsubmit']))
{
remove_selected_task();
}
Not able to pass this successfully. Can anyone help me out? Thanks in advance.
try to pass the $_POST variable into the function for ex:
remove_selected_task($_POST['sel']);
function remove_selected_task($task_to_remove)
{
echo $task_to_remove;
}
Start by trying to diagnose the issue using the browser dev tools. Press F12 to get the dev tools panel, and go to the Network tab.
Now click your checkbox and watch for what happens...
Does the network panel show the request being made to remove_task.php?
If not, then there's a problem in your javascript where it registers the click event. Maybe the selector is wrong or something like that.
If the network panel does show the request being made, click on it there to get more info about it, and then look at the request data and the response data.
Does the request send the data you're expecting it to, and in the correct format?
If not, then you'll need to debug your Javascript to see why. I can't really help with that unless I actually see the data, but you should be able to get an idea of what the problem is by what's being sent incorrectly. Maybe the checkbox value is wrong?
If it does look right, then move on to the response.
Does the response contain the data you expect?
If it has a 404 response code, then your URL is incorrect. Maybe the path is wrong?
If the response includes an error message, then you should be able to debug the PHP from that. It'll have the relevant line numbers in it, so that should be enough to get you going.
If the response is blank, then your PHP code isn't sending anything back: Maybe a syntax error (with error suppression), or maybe the program ends before it gets to echo the data. Either way, further debugging in the PHP will be required.
That's about as much help as I can give, given the info you supplied in the question. I hope that's enough to get you started.
This will solve your problem, and next time add the full code in your question.
you check if "remsubmit" exists in your php file, but you don't send it ! This should work by modifying the line data: ({sel: selVal}) as below :
$(document).ready(function() {
$(".checkbox").click(function(){
var selVal = $(this).val();
$.ajax({
type: "POST",
url: 'remove_task.php', //This is the current doc
data: {sel: selVal, remsubmit:"1"},
success: function(data){
//alert(selVal);
console.log(data);
}
});
});
});