I am creating a game that I am using ajax and ASP.net to create a two player game. So I am trying to create a couple of buttons for the player to use to "play" a card if it is their turn. I am currently stuck on trying to get the json to call the c# code, but have not been successful yet.
Here is where I'm at:
$(document).ready(function () {
$("#slap").click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "Pages/index/",
data: {
//Something goes here
},
success: function (result) {
alert('ok');
},
error: function (result) {
alert('There was an error');
}
});
});
}
Then in the C# code index.cshtml.cs I have a function like playCard().
Thanks in advance!
Url format is wrong. It should be like "/controller/action"
Related
According to the Backend API: https://docs.typo3.org/typo3cms/CoreApiReference/JavaScript/Ajax/Backend/Index.html I could use every library to do AJAX calls in the TYPO3 Backend.
I get the success message, but my params array is always empty:
Controller
public function renderShowModal($params = array(), \TYPO3\CMS\Core\Http\AjaxRequestHandler &$ajaxObj = NULL){
var_dump($params);
}
jQuery
$.ajax({
type: 'POST',
url: TYPO3.settings.ajaxUrls['Controller::renderShowModal'],
data: {
"test": "bar"
},
success: function (result) {
console.log(result);
},
error: function (error) {
console.log(error);
}
});
What am I missing or how do I have to send my data?
It's even not working like this:
{"tx_ext_bm[test]": "bar"}
Thanks in advance
There is no answer in any of the forums I've questioned this, so I ended up accessing the params the traditional way with $_POST.
I want to incorporate jquery autocomplete widget to my aspx page. The "source" for the autocomplete comes from a webservice method.
My script looks like this:
$(".paisProc").autocomplete({
minLength: 0,
source: function (request, response) {
$.ajax({
type: "POST",
url: "/ManifestService.asmx/GetPaises",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ 'term': request.term }),
success: function (data) {
console.log("reading results...");
response($.map(data, function (item) {
console.log(item.CodigoAduana);
return {
label: item.Descripcion,
value: item.CodigoAduana
};
}));
},
error: function (err, status, error) {
console.log(status);
console.log(error);
}
});
With this setup, as users type in the input control, the expected values are returned from the webservice but the autocomplete does not seem to work. Inspecting the page with Firebug i see the ajax call to the service returns data with this format:
{"d":[{"__type":"dhl.domain.Pais","PaisId":1,"CodigoDHL":"AR","CodigoAduana":"528","Descripcion":"ARGENTINA"},
{"__type":"dhl.domain.Pais","PaisId":481,"CodigoDHL":"DZ","CodigoAduana":"208","Descripcion":"ARGELIA"}]}
I cannot see what the problem with my code, I have followed the indications from the many questions with the same issue in this site with no success yet.
If it can help, the line console.log(item.CodigoAduana) from success callback write "undefined" to the console.
.Net web services returning JSON do so by embedding the payload into a "d" property (as you can see in your capture of the JSON).
Try changing your processing of the response to read from data.d instead of just data, to get to the array you want to map, like this:
response($.map(data.d, function (item) {
console.log(item.CodigoAduana);
return {
label: item.Descripcion,
value: item.CodigoAduana
};
}));
Im creating a simple "Was this useful?" form with Yes and No objects- Using ASP.net webforms.
I need the submission to be done via ajax using jquery, to prevent a user from voting multiple times on the same page.. currently i have two methods Like_Click and Dislike_click in the C# code behind the page in question.
Can anyone give me some pointers on or a link to any suitable walkthroughs for simple ajax via jquery (I'm new to ajax!)
Ive looked at using the [WebMethod] identifier on each of the methods but do not really understand this method fully.
thanks
You are probably looking for jQuery's post function. Check out the examples. You'll want to do something along the lines of:
$('.myForm').submit(function(){ //define a handler for the submit event of the form
$.post($(this).attr('action'), {useful: true}); //send data via ajax
return false; //prevents the form from submitting via a normal web request
});
You can try something like below
<script type="text/javascript">
$(function () {
$('#btnSubmit').click(function () {
var like = $('#Like').val();
var dislike = $('#Dislike').val();
if (name != '' && email != '') {
$.ajax
({
type: 'POST',
url: 'Home.aspx/UpdateDB', //UpdateDB is declared as WebMethod
async: false,
data: "{'like':'" + like + "','dislike':'" + dislike + "'}",
contentType: 'application/json; charset =utf-8',
success: function (data) {
var obj = data.d;
if (obj == 'true') {
$('#Like').val('');
$('#Dislike').val('');
alert("Data Saved Successfully");
}
},
error: function (result) {
alert("Error Occured, Try Again");
}
});
}
})
});
</script>
Webmethod is shown below
[WebMethod]
public static string UpdateDB(string like, string dislike)
{
//Add your stuff
}
take a look more details here Call WebMethod from jquery in ASP.NET
I need a periodic refresh of .Net's partial view. It is working with Ajax.ActionLink, is there a similar feature for periodic refresh? Can I do it without using jQuery?
Zen, you could do it by a code like this:
function loadPartialView() {
$.ajax({
url: "#Url.Action("ActionName", "ControllerName")",
type: 'GET', // <-- make a async request by GET
dataType: 'html', // <-- to expect an html response
success: function(result) {
$('#YourDiv').html(result);
}
});
}
$(function() {
loadPartialView(); // first time
// re-call the function each 5 seconds
window.setInterval("loadPartialView()", 5000);
});
Remember your Action should return a PartialView.
I hope it helps you!
Maybe this can help you. Which version of MVC are you using? You can set a specified time interval for a helper method. This is the only way I've seen without using js.
Try this.
$(document).ready(function () {
var url = "#(Html.Raw(Url.Action("ActionName", "ControllerName")))";
$("#PartialViewDivId").load(url);
setInterval(function () {
var url = "#(Html.Raw(Url.Action("ActionName", "ControllerName")))";
$("#PartialViewDivId").load(url);
}, 30000); //Refreshes every 30 seconds
$.ajaxSetup({ cache: false }); //Turn off caching
});
It makes an initial call to load the div, and then subsequent calls are on a 30 second interval.
In the controller section you can update the object and pass the object to the partial view.
public class ControllerName: Controller
{
public ActionResult ActionName()
{
.
. // code for update object
.
return PartialView("PartialViewName", updatedObject);
}
}
I'm trying to use jquery.Ajax to post data to an ASP.NET MVC2 action method that returns a JsonResult. Everything works great except when the response gets back to the browser it is treated as a file download instead of being passed into the success handler. Here's my code:
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$("form[action$='CreateEnvelope']").submit(function () {
$.ajax({
url: $(this).attr("action"),
type: "POST",
data: $(this).serialize(),
dataType: "json",
success: function (envelopeData) {
alert("test");
}
});
});
return false;
});
</script>
Action method on controller:
public JsonResult CreateEnvelope(string envelopeTitle, string envelopeDescription)
{
//create an envelope object and return
return Json(envelope);
}
If I open the downloaded file the json is exactly what I'm looking for and the mime type is shown as application/json. What am I missing to make the jquery.ajax call receive the json returned?
You are missing a "return false" in the handler of your submit event. If you don't return false, then JQuery will still pass the submit as it would do normally.
<script type="text/javascript">
$(document).ready(function () {
$("form[action$='CreateEnvelope']").submit(function () {
$.ajax({
url: $(this).attr("action"),
type: "POST",
data: $(this).serialize(),
dataType: "json",
success: function (envelopeData) {
alert("test");
}
});
// IMPORTANT: return false to make sure the normal post doesn't happen!
return false;
});
return false;
});
</script>
You were almost there!
I have just started using ajax similar to this and first impressions looking at your code would indicate that you dont need to call submit on the form? You only need to do the ajax call. I may be wrong but it might be that the ajax is returning the data and the page is doing a refresh where the page data is replaced with the json data?