Ad

Framework7 Component Page Not Working With Real Database Query

- 1 answer

In framework7 (latest version) there are some sample pages for e.g. page-loader-component.html. This page having -

<p>Hello {{name}}</p>

and at bottom, there is script

return {
 data: function(){
  return{
  name: "Peter"
  }
 }
}

Now when the page is accessed, it displays - Hello Peter

Question is I want to fetch name from real database from my server. So I made this changes -

app.request.post(
 'http://domain-name/page.php',
 {userid: 2},
 function(response){
  var response = JSON.parse(response);
  console.log(response); //console log shows {name: "Peter"}
  return response
 }
);

return {
 data: function(){
 return response //console log shows response is not defined
 }
}

Now when try to access the page, it throws errors (in console) - ReferenceError: response is not defined. In console my request query is OK, it show - {name: "Peter"}

I did return response as well as tried replacing the position of function as well as tried many other possible fix suggested on stackoverflow.

I think one function is running before other one make finish database queries. I am not expert (just average). So please someone suggest.

I have also tried to access the page through routes.js as example given in request-and-load.html but still reference error.

Ad

Answer

return response is inside the data: section. The request is not, and they cannot reach each other.

Put the gathering of data inside the data function. You also want to save the response outside of the request function. To make sure the response variable is reachable. I'd also personally move the request itself to be defined in a separate location for usage outside of this one instances.

File: custom.js

requests = {
    GetName: function () {
        app.request.post(
            'http://domain-name/page.php',
            { userid: 2 },
            function (response) {
                var response = JSON.parse(response);
                console.log(response); //console log shows {name: "Peter"}
                return response
            }
        );
    },
    GetNameDynamic: function (id) {
        app.request.post(
            'http://domain-name/page.php',
            { userid: id},
            function (response) {
                var response = JSON.parse(response);
                console.log(response); 
                return response
            }
        );
    }
}

Then inside the data: section call that function and save as a variable. Pass that in the data return.

data: function () {
          // Must return an object
          var result = requests.GetName();
          return {
              name: result.name,
          }
      },

There are other ways/locations to accomplish this. One being the async in the route as the other user mentioned. In the routes array, just change the path and componentUrl to the correct ones.

{
        path: '/post-entity-group/:type/:group/:public/',
        async: function (routeTo, routeFrom, resolve, reject) {
            var result = requests.GetName();

            resolve(
                {
                    componentUrl: './pages/post-entity.html',
                },
                {
                    context: {
                        name: result.name,
                    }
                }
            )
        }
    },
Ad
source: stackoverflow.com
Ad