Utilizing Titanium MVC: Invoke function and pause for response

Question

Utilizing Titanium MVC: Invoke function and pause for response

Currently, I am in the process of developing my very first Titanium iPhone application.

Within a model module, I have this code snippet:

(function() {   
    main.model = {};

    main.model.getAlbums = function(_args) {

        var loader = Titanium.Network.createHTTPClient();  
        loader.open("GET", "http://someurl.json"); 

        // Executes the specified function when the data is ready for processing 
        loader.onload = function() { 
            // Parse the JSON response  
            var albums = eval('('+this.responseText+')');  
            //alert(albums.length);
            return albums;
        }; 

        // Send out the HTTP request  
        loader.send();  

    };

})();

and I invoke this function in a view section as follows:

(function() {

    main.ui.createAlbumsWindow = function(_args) {

        var albumsWindow = Titanium.UI.createWindow({  
            title:'Albums',
            backgroundColor:'#000'
        });

        var albums = main.model.getAlbums();

        alert(albums);

        return albumsWindow;
    };
})();

However, it appears that the invocation to the model (which retrieves data via HTTP) does not wait for a response. In the view, when I trigger the alert, the data from the model has not been received yet. What is the recommended way to handle this situation?

Thank you in advance

javascript iphone model-view-controller titanium titanium-mobile

Answer 1

Answer №1

Alright,

Here is an example,

function bar(input1, callback){
     input1 += 10;
     ....
     ... Implementation of your web service
     ....
     callback(input1); // Instead of arg1, you can have the response here
}

You would use this function as follows,

bar (initialValue, function(result){
     alert(result); // This is where you will receive the response returned from the previous function using callback(arg1);
});

In this case, input1 is a parameter (such as integer, string, etc.) and the second argument is your callback function.

Cheers.

Answer 2

Alright,

Here is an example,

function bar(input1, callback){
     input1 += 10;
     ....
     ... Implementation of your web service
     ....
     callback(input1); // Instead of arg1, you can have the response here
}

You would use this function as follows,

bar (initialValue, function(result){
     alert(result); // This is where you will receive the response returned from the previous function using callback(arg1);
});

In this case, input1 is a parameter (such as integer, string, etc.) and the second argument is your callback function.

Cheers.

Answer 3

Answer №2

In order to make a Synchronous call to a web service, it is important for the code to wait until a response is received from the service.

To implement this functionality in JavaScript, you must pass a callback function as a parameter and retrieve the return value within the callback function instead of using a return statement.

The coding style that you are currently using is unfamiliar to me as I typically use a different approach.

However, the key point is to utilize a callback function for retrieving values rather than relying on a return statement. Give this method a try and if you encounter any issues, feel free to let me know and I can provide an example for you.

Answer 4

In order to make a Synchronous call to a web service, it is important for the code to wait until a response is received from the service.

To implement this functionality in JavaScript, you must pass a callback function as a parameter and retrieve the return value within the callback function instead of using a return statement.

The coding style that you are currently using is unfamiliar to me as I typically use a different approach.

However, the key point is to utilize a callback function for retrieving values rather than relying on a return statement. Give this method a try and if you encounter any issues, feel free to let me know and I can provide an example for you.

Answer 5

Answer №3

Explaining the callback method like zero did is great, but another approach could be handling it with events.

(function() {

    main.ui.createAlbumsWindow = function(_args) {

        var albumsWindow = Titanium.UI.createWindow({  
            title:'Albums',
            backgroundColor:'#000'
        });

        var status = new object(), // eventlistener
        got_a_valid_result = false;

        // Handle result
        status.addEventListener('gotResult',function(e){
          alert(e.result);
          got_a_valid_result = true;
        });           

        // Handle error
        status.addEventListener('error',function(e){
          alert("An error occurred: "+e.errorcode);
          git_a_valid_result = true;
        });

        var albums = main.model.getAlbums(status);

        // Wait for result
        while (!got_a_valid_result){};
        return albumsWindow;
    };
})();

Your model might look something like this:

main.model.getAlbums = function(status) {

        var loader = Titanium.Network.createHTTPClient();  
        loader.open("GET", "http://someurl.json"); 

        loader.onload = function() { 
            var albums = eval('('+this.responseText+')');  

            status.fireEvent('gotResult',{result:albums});
            return albums;
        }; 

        loader.onerror = function(e){
            status.fireEvent('error',{errorcode:"An error occurred"});
        };

        // Send the HTTP request  
        loader.send();  

    };

Answer 6

Explaining the callback method like zero did is great, but another approach could be handling it with events.

(function() {

    main.ui.createAlbumsWindow = function(_args) {

        var albumsWindow = Titanium.UI.createWindow({  
            title:'Albums',
            backgroundColor:'#000'
        });

        var status = new object(), // eventlistener
        got_a_valid_result = false;

        // Handle result
        status.addEventListener('gotResult',function(e){
          alert(e.result);
          got_a_valid_result = true;
        });           

        // Handle error
        status.addEventListener('error',function(e){
          alert("An error occurred: "+e.errorcode);
          git_a_valid_result = true;
        });

        var albums = main.model.getAlbums(status);

        // Wait for result
        while (!got_a_valid_result){};
        return albumsWindow;
    };
})();

Your model might look something like this:

main.model.getAlbums = function(status) {

        var loader = Titanium.Network.createHTTPClient();  
        loader.open("GET", "http://someurl.json"); 

        loader.onload = function() { 
            var albums = eval('('+this.responseText+')');  

            status.fireEvent('gotResult',{result:albums});
            return albums;
        }; 

        loader.onerror = function(e){
            status.fireEvent('error',{errorcode:"An error occurred"});
        };

        // Send the HTTP request  
        loader.send();  

    };

Answer 7

Answer №4

To enhance security, consider using JSON.parse in place of eval when handling JavaScript code to avoid potential risks associated with running all scripts.

Answer 8

To enhance security, consider using JSON.parse in place of eval when handling JavaScript code to avoid potential risks associated with running all scripts.

Answer 9

Answer №5

In my opinion, The Zero's solution seems to be more efficient for memory management, although I can't say for certain. If you decide to use an eventListener, it's important to note the potential implications.

function performAction(_event) {
    var foo = bar;
}
// Using this event listener may lead to a memory leak
// as references are maintained throughout the app's runtime
Ti.App.addEventListener('bad:idea', performAction);

// To prevent the memory leak, remove the event listener when the window is closed
thisWindow.addEventListener('close', function() {
// In order to remove an event listener, the same function signature must be used
// that was used when adding the listener
Ti.App.removeEventListener('bad:idea', performAction);
});

Answer 10

In my opinion, The Zero's solution seems to be more efficient for memory management, although I can't say for certain. If you decide to use an eventListener, it's important to note the potential implications.

function performAction(_event) {
    var foo = bar;
}
// Using this event listener may lead to a memory leak
// as references are maintained throughout the app's runtime
Ti.App.addEventListener('bad:idea', performAction);

// To prevent the memory leak, remove the event listener when the window is closed
thisWindow.addEventListener('close', function() {
// In order to remove an event listener, the same function signature must be used
// that was used when adding the listener
Ti.App.removeEventListener('bad:idea', performAction);
});

Utilizing Titanium MVC: Invoke function and pause for response

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Setting a time delay in a RESTful service

Shorten a data point in JSON code

Having trouble using Jquery Selector to locate a div element in my Polymer project. Seems like it should be simple, but I can

Vue Dev Tools is not updating data in Ionic Vue 3

Using Javascript and HTML5 Canvas to retrieve dimensions of selected objects

The "apply" function in Javascript cannot be found in the window.external extension object

Switch out external CSS stylesheets automatically using toggle scripting

Display a list of items in Angular using ng-repeat, and allow the full description to appear in full width

The reference to 'this' object is not functioning properly, indicating that either a 'property' or 'method' is undefined when attempting to access a method through routes

Sort through a collection of arrays that each contain objects

Refresh a specific DIV element without having to refresh the entire page

Attention all controllers summoned from one AngularJS document

"Utilizing Bootstrap to create a multiselect feature that can dynamically

Surprising Regex Match of ^ and special character

Revamp the code by implementing promises

HTML5 Mouse Canvas

How can I programmatically close the Date/Time Picker in Material UI Library?

Dividing a string in JavaScript to generate fresh arrays

What causes bootstrap to fail on smaller screens?

Troubleshooting Problems with IndexOf in Javascript/Google Apps Script