I went through the suggested related topics before asking this question but none of them could solve my problem. So in advance, sorry for a possible dubplicate..
In my ASP.NET MVC3 application I have following function that is attached to a button:
save: function () {
$.ajax({
url: "#Url.Action("Save")",
type: "post",
data: ko.toJSON(this),
contentType: "application/json",
succes: function (result) { alert(result.message) },
});
}
In my Controller I have a JsonResult-method like this:
public JsonResult Save(Person person)
{
//process person-parameter and send message back
var message = "Dummy result-message";
return Json(new { message });
}
And these are the JavaScript - files I have referenced:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tmpl.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/knockout-1.2.1.js")" type="text/javascript"></script>
I debugged the application using breakpoints and the button - event is fired like it should and the method in the Controller is called. The processing of the Person-parameter is done and I call the return - statment. But the problem is: I don't get an alert...
For a couple of hours now I've been looking on the internet on how to solve this but I can't seem to find the solution. I hope any of you guys can get me back on the right track. Thanks in advance!
success setting is misspelled :)
Related
I am trying to use ng-grid using the following tutorial.
http://angular-ui.github.io/ng-grid/
Here is my View
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/angular.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/angular-resource.js")"></script>
#*<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>*#
<script type="text/javascript" src="#Url.Content("~/Scripts/ng-grid-2.0.7.min.js")"></script>
<script src="~/Scripts/PostsController.js"></script>
<script src="~/Scripts/postreq.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/ng-grid.min.css" />
<div data-ng-controller="PostsController">
<div class="gridStyle" data-ng-grid="gridOptions"></div>
</div>
Here is my Angular code
function PostsController($scope, $http) {
$http({ method: 'GET', url: '/api/request' }).
success(function (data, status, headers, config) {
$scope.posts = data;
}).
error(function (data, status, headers, config) {
$scope.error = "An Error has occured while loading posts!";
$scope.loading = false;
});
$scope.gridOptions = { data: 'posts' };
}
However, when i run the application i see blank square in browser and there is no error showing in the console.
Please help me to fix this issue.
FYI: I checked API response directly in browser and it shows with data.
It seems to me that you are missing some steps of the tutorial you are following :
Where you declare your app module, add ngGrid:
angular.module('myApp',['ngGrid']);
I do not see your module declaration anywhere.
Do you have ng-app="myApp" defined at the top of your page?
I also noticed that you do not have a css class defined for "gridStyle". "gridStyle" is not part of the ng-grid css.
Sounds odd, but this worked for me by using a timeout. Try it like this:
setTimeout(function () {
$http.get('/api/request')
.success(function (data, status) {
$scope.posts = data;
})
.error(function (data, status) {
alert(status);
});
}, 100);
I have a partial view in ASP.NET MVC 3, with a script:
<script type="text/javascript" >
$(function () {
$("#tagbox").autocomplete({
source: "/Tag/GetTags",
minLength: 1,
select: function (event, ui) {
$("tagbox").val(ui.item.value);
}
});
});
</script>
when I load the patial view in my content div, the auto complete won't work, unless I remove the '$(function () {... }) so the script looks like this:
<script type="text/javascript" >
$("#tagbox").autocomplete({
source: "/Tag/GetTags",
minLength: 1,
select: function (event, ui) {
$("tagbox").val(ui.item.value);
}
});
</script>
But when loading it as new view by accessing the URL, everything works just fine.
Also I have those references on my main view:
<script src="http://static.jsbin.com/js/prod/jsbin-3.4.4.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Second, when I change the order between the references, my ajax call opens as a new view and not as partial. Maybe one of them is unnecessary or something?
Please follow the below link it will clearly explain about the jquery $(function(){}.
$(function(){}
I am just beginning to learn AJAX and am trying to build a cascading dropdown that pulls information from a database. My AJAX.Updater code works, but not only for one of the dropdowns. How do I make multiple AJAX.Updater calls?
<script type="text/javascript" src="jQuery/jquery-latest.js"></script>
<script type="text/javascript" src="jQuery/prototypejs.js"></script>
<script language="javascript">
jQuery(document).ready(function()
{
jQuery('#regiondropdown').change(function() {
dropdowns(jQuery(this).val(),"foo");
});
jQuery('#foodropdown').change(function() {
dropdowns(jQuery(this).val(),"bar");
});
}
);
function dropdowns(str,type)
{
if (type=="foo") {
new Ajax.Updater('foo', 'foo_dropdown.php', { method: 'get', parameters: {foo: str} });
} else if (type=="bar") {
new Ajax.Updater('bar', 'bar_dropdown.php', { method: 'get', parameters: {bar: str} });
}
}
</script>
I can't see what it is so I suggest you fire up your debugger.
1) Check the value of jQuery(this).val() for both cases. "this" might not be what you believe in Javascript.
2) Check what happens if you switch the if.. and else... in dropdowns. Maybe there is a (, { or ; out of place.
HTH
I am using Javascript serializer for passing model data to controller but this is not firing the code validation.
Here is the code
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/microsoftajax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#btnCreateDepartment").click(function () {
var name = $('#txtDeptName').val();
$.ajax({
data: { modelName: 'DEPARTMENT', values: Sys.Serialization.JavaScriptSerializer.serialize(
{
DeptName: name
}
)
},
url: '#Url.Action("Create", "Office")',
type: "POST",
complete: function (result) {
debugger
alert("complete");
},
error: function (result) {
debugger
alert(result.statusText);
}
}); //Endof ajax
return false;
}); //end of click
}); // end of ready
</script>
In model the i have added validation as following
[Required(ErrorMessage = "Please Enter department")]
public string DeptName { get; set; }
But this is not getting fired .
Passing the object via ajax to the controller will disable the default mvc validation form. This validation will only work if you do a normal post.
Anyway if you want to use ajax you need to do the validation using jquery. If you decide not to use ajax then you can use mvc's built in validation. I also recommend fluent validation library for MVC
Change data parameter of your jQuery ajax to
data: { DeptName: name },
so it contains only properties of your model. Other department properties should follow DeptName ex. { DeptName: name, DeptAddress: address, ... }.
If your mvc model was mirrored on client side as a javascript model department you would just go:
data: { JSON.stringify(department) },
What I got here is a Ajax.Updater prototype js function. It's working perfectly this way:
new Ajax.Updater('feedback', 'contact.php', {
method: 'post',
parameters: Form.serialize($('contactForm')),
onFailure: reportError
});
But I want to delay the process a bit. I asked around on the prototype irc channel and this seems the way to go:
var feedback = function() {
new Ajax.Updater('feedback', 'contact.php', {
method: 'post',
parameters: Form.serialize($('contactForm')),
onFailure: reportError
});
new Effect.Highlight('feedback', {
duration: 1
});
}
feedback.delay(1.5);
(don t mind the scriptaculous effect)
There is a echo function in contact.php that looks like this:
echo("Thanks for your message $_POST['Name']!");
After applying the delay the name is no longer echoed! What's wrong?
Ok last try on this one. This works for me and does what you want
My html-file
<html>
<head>
<title>asd</title>
<script type="text/javascript" src="src/prototype.js"></script>
<script type="text/javascript" src="src/scriptaculous.js"></script>
<script type="text/javascript">
var feedback = function() {
var params = Form.serialize($('contactForm'));
new Ajax.Updater('feedback', 'contact.php', {
method: 'post',
parameters: params,
onFailure: reportError,
asynchronous:true
});
new Effect.Highlight('feedback', {
duration: 1
});
}
function reportError(request) { alert("error");}
</script>
</head>
<body>
<form id="contactForm">
<p>Name:<br><input name="Name" type="text" size="30" maxlength="30"></p>
<input name="sendbutton" type="button" value="Send" onClick="feedback.delay(1.5);">
</form>
<div id="feedback">foo</div>
</body>
</html>
My contact.php
<?php
echo("Thanks for your message ".$_POST['Name']."!");
?>
and using the js files from here
Why don't you just wrap the thing in a setTimeOut call. Thus delaying the ajax request instead of delaying the displaying. Which is btw excatly what the prototype delay function does
But
new Ajax.Updater.delay(2, 'feedback', 'contact.php', {
method: 'post',
parameters: Form.serialize($('contactForm')),
onFailure: reportError
});
should also work
I give it another try.
Change
echo("Thanks for your message $_POST['Name']!");
to
echo("Thanks for your message ".$_POST['Name']."!");
and try again.
And make sure you have implemented the reportError function you pass in here
onFailure: reportError
e.g.
function reportError(request){alert('Shit happens!');}
This doesn't apply to the original question asked - but since I came across this thread in my search. Figured I'd post my results.
I had some code an ajax updater suddenly stop working:
new Ajax.Updater('my_id, 'http://mydomain.com/my_script.php');
The reason it didnt work for me because I was on www.mydomain.com (opposed to mydomain.com)
I simply changed it to:
new Ajax.Updater('my_id, 'my_script.php');
and it worked fine.