Using Sencha Touch for asynchronous HTTP request to Model-View-Controller

Ext.util.JSONP.request({
                url: '/Home/GetMessagesMobile',
                callbackKey: 'callback',
                params: {
                    lat: geoip_latitude(),
                    lng: geoip_longitude(),
                    rad: 1,
                    sType: 0,
                    flow: 1,
                    lastId: 0,
                    lastRow: 0,
                    uniqueify: Math.random()
                },
                callback: function (data) {
                    var messages = data;
                    alert(messages);
                    home.update(messages); // refresh messages
                }
            });

Although I can successfully reach the breakpoint in my MVC action and verify that data is being returned, the alert never pops up, and there seems to be no client-side activity. It appears that the callback function is not being executed for some unknown reason.

Should I modify this request in any way? The action is returning a result in JSON format. Here is the snippet of code:

return Json(retval);

The variable retval contains a collection of objects that align with the html template parameters used elsewhere in the Sencha code. Even if there are discrepancies in matching these parts, I should still see the alert message, right?

javascriptajaxjsonasp.net-mvc-2sencha-touch

Answer №1

It appears that you may be making a cross-domain request, in which case you will need to use JSONP.

However, when using JSONP, it becomes impossible to utilize return Json(object) from the controller.

To address this issue, you can refer to the JSONP class in the API, which provides an example for ASP.NET. You can also make use of the JavaScriptSerializer class to serialize an object to JSON. (In reality, the Json method utilizes this class under the hood).

The key is to return something similar to the following:

var myJson = {success:true};
someRandomMethod(myJson); // someRandomMethod being the callback parameter

Answer №2

Instead of JSONP, consider utilizing Ext.util.JSON

JSONP functions by delivering JavaScript code rather than JSON data.

Answer №3

Although I'm not very familiar with Sencha/Ext, it seems like the correct syntax should be:

Ext.Ajax.request({
  url: '/Home/GetMessagesMobile',
  params: {
    lat: geoip_latitude(),
    lng: geoip_longitude(),
    rad: 1,
    sType: 0,
    flow: 1,
    lastId: 0,
    lastRow: 0,
    uniqueify: Math.random()
  },
  success: function(data) {
    console.log(data);
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind console.log() displaying an array, while typeof returning 'object'?

This question pertains to the outcome of a mongoose find() operation. After running the code console.log('apparently this is an ' + typeof campaign.advertGroups, campaign.advertGroups); The resulting output is as follows: apparently this is an ...

javascriptnode.jsmongodbmongoose

Difficulty arises when attempting to locate particular information within a Vue component using a method that is contained within the component

Currently, I am in the process of developing a request management system for the organization. The key requirements for this project include: Ability to add a new row for each new request. Dynamic generation of parameters based on the selected descriptio ...

javascriptajaxlaravelvue.js

The server encountered a 500 Internal Server Error because it could not read the 'username' property of an undefined object

When attempting to register a user in a mongodb database using express, a POST call was made to localhost:3000/users/register The request body included: { "firstName": "Jason", "lastName": "Watmore", "username": "jason", "email": "<a ...

javascriptnode.jsjsonexpressproperties

Learn how to import MarkerClusterer from the React Google Maps library without using the require method

The sample provided utilizes const { MarkerClusterer } = require("react-google-maps/lib/components/addons/MarkerClusterer");, however, I would prefer to use the import method. I attempted using: import { MarkerClusterer } from 'react-google-maps/lib ...

javascriptreactjsgoogle-mapsreact-google-maps

Vuejs failing to update data

Let me begin by describing my scenario. I have a fee_map attribute in my data, which is a list of objects containing information about the fees students have to pay, their balances, payment methods, etc. Additionally, there is a computed property called &a ...

javascriptvue.jsvuejs2jquery-select2

Vite.js, specifically in conjunction with Vue.js, experiences an issue with undesired page reloads, but this

Encountering an unusual issue with Vite.js specifically on Samsung Internet while using the development server... The problem at hand involves a continuous automatic page reload every 3 seconds, without any intentional intervals being set or written. This ...

javascriptvue.jsvite

Creating an Extjs model for a complex nested JSON structure

Take a look at this JSON structure { "id": 123, "name": "Ed", "orders": [ { "id": 50, "total": 100, "order_items": [ { "id": 20 ...

javascriptjsonextjssencha-touch

A guide on modifying the JSON format generated by Gson in Java

The JSON output created by Gson for a List of Objects typically looks like this: "[[{"id":1,"name":"Shepherd"}],[{"id":2,"name":"Bull"}]]" However, I'd prefer the format to be more streamlined, like so: "[{'id':1,'name':'Sh ...

javajsongsonrealmrealm-list

Implementing real-time data updates on a webpage using Node.js

Currently, I am faced with the challenge of updating values on my page in real-time without the need for constant webpage refreshing. To illustrate, consider a scenario where a user filters a real estate website by location and receives results showing the ...

javascriptjqueryajaxnode.js

Tips for incorporating side effects into an observable property?

I am relatively new to Mobx and I need to automatically call a function when this observable array is updated. The observable array: @observable Todos = [] I have many functions to manage this array (addTodo, removeTodo, ...) and I would like to avoid ...

javascriptreactjsmobxmobx-react

"Angularjs feature where a select option is left blank as a placeholder, pointing users

Currently, I am working with AngularJS (version < 1.4). When using ng-repeat in select-option, I encounter an extra blank option which is typical in AngularJS. However, selecting this blank option automatically picks the next available option. In my sce ...

javascriptangularjs

Adjust the package.json file for deployment

I've encountered a problem while attempting to deploy my nodejs application on Heroku. Despite following the documentation and modifying files in the root directory, I have not been successful. Below is the structure of my package.json file: { ...

javascriptnode.jsheroku

An interesting approach to utilizing toggle functionality in JQuery is by incorporating a feature that automatically closes the div when

Currently, I am utilizing JQuery's toggle function to slide a ul li element. However, my desired functionality is for the div to close if someone clicks outside of it (anywhere on the page) while it is in the toggle Down condition. Below, you'll ...

javascriptjqueryhtmlcss

Convert a div into a clickable link using JavaScript without using too many classes or any ids

After using shortcodes generated by functions.php in a WordPress parent theme, I have come across the following HTML code: <div class="pricing-table-one left full-width "> <div class="pricing-table-one-border left"> <div class=" ...

javascriptjqueryhtmlcss

Retrieving the value from a dynamically-generated dropdown menu using jQuery

I created a tree list of data and I am attempting to update some information that is stored in a select element by sending a JSON post request to the edit action. Despite trying multiple approaches with jQuery, myself and my colleagues have been unsuccessf ...

c#jqueryjson

Closing the modal by simply clicking outside of it's boundaries

Is there a way to close the modal by clicking outside of it using pure JS or AngularJS? I'm struggling to figure out how to implement this functionality. Any assistance would be greatly appreciated. View Fiddle .modalDialog { position: fixed; ...

javascriptcssangularjspopup

The functionality does not seem to be functioning in Mozilla Firefox, however it is working correctly in Chrome when the following code is executed: `$('input[data-type="choise"

I am currently working on an online test portal and everything is functioning properly with Chrome. However, I am encountering an issue with Mozilla Firefox. My code works fine in Chrome but not in Mozilla Firefox. Please suggest an alternative solution to ...

javascriptphpjquery

Looking to filter JSON data with Vuejs?

I am trying to search through this JSON array for a specific key: track_order The data I receive from the server is stored in the orders variable: "records": [ { "phone": "09********8", "fullName": "******", ...

arraysjsonvue.jssearch

Extract JSON data from a string with an undetermined character encoding

My current challenge involves extracting HTML content from websites and converting it into JSON format, with the need to manage various character encodings. After researching, I have learned that if the encoding is not utf-8, it is most likely ISO-8859-1. ...

pythonjsonserializationunicodeiso

Using Typescript: How to access a variable beyond the scope of a loop

After creating an array, I need to access the elements outside of the loop. I am aware that they are not in the scope and using 'this.' before them does not grant access. colIdx = colIdx + this.columns.findIndex(c => c.editable); this.focusIn ...

javascriptangulartypescriptfrontend