listview/remote datasource works in VS not InBrowser

[menriquez]

Hi all...

I have an hybrid app im developing that calls a REST API backend that I have built and works fine....the problem i am having is that the listview/data connection works fine in Visual Studio but just hangs in the InBrowser dev environment.

its all really basic stuff that works fine in other parts of my app but just not here.  

is there something that someone know that would allow a datasource.read to work or a view to work fine in VS but not in the online Appbuilder??

my view code...

<div data-role="view" data-title="Profiles" id="profiles" >
    <ul data-role="listview" data-source="Profiles.data" data-template="profiles-template"></ul>  
</div> 

<script type="text/x-kendo-template" id="profiles-template">
    <a href="views/scripts.html"> 
        <div class="bookTitle">#: Pharmacy_ID #</div>
        <div class="bookAuthor">#: Patient_ID #</div>
        <div class="bookAuthor">#: Patient_ID_Name #</div>
    </a>
</script>

 

my datasource code...

     window.Profiles = {

        data: new kendo.data.DataSource({
            offlineStorage: "profiles-offline",
            transport: {
                read: {
                    url: RESTurl + "profiles/" + appkey,
                    type: "GET",
                    dataType: "jsonp"
                }
            },
            schema: {
                data: "profiles"
            }
        }),
        back: function () {
            app.navigate("#:back");
        },
        settings: function () {
            app.navigate("views/settings.html");
        }
    };

advTHANKSance!

- mark

[menriquez]

i've done a lot more debugging and have discovered the issue...it seems that the $_SESSION on my server is NOT being stored properly when I use the InBrowser simulation but it is working fine when I run the VS simulation...this is why my app works fine in VS but not in the online AppBuilder.

does anyone have any idea why this could be happening?

thanks!

 

[Dimitrina]

Hello Mark,

Having in mind the same code works fine in the simulator of the Extension for VS, the reason for the issue is most probably one of the following:
- you are experiencing some CORS issues since the In-Browser Client is a web application ran in the browser, it falls under the cross-domain request limitations imposed by the browsers. Would you please check if there is any such error listed in the developer console? If so, then I can suggest you installing the Telerik AppBuilder helper for Chrome. This helper tool will enable you to run Ajax Cross-Origin Resource Sharing (CORS) requests in the device simulator in the AppBuilder in-browser client and it should help to work around the CORS issue.  
- cookies are not available. The session ID is usually stored in a cookie which should be the only information about your session that is stored on client side.

Please note standard CORS requests do not send or set any cookies by default. In order to include cookies as part of the request, you need to set the XMLHttpRequest’s.withCredentials property to true. For further details, please refer to this topic on Using CORS. 

Another possible solution is suggested in the discussion on Configure Ajax request made by Kendo to support cross domain ajax request.

Let me know if this helps.

Regards,
Dimitrina
Telerik

 

 

[menriquez]

Dimitrina,

Thank you for your help!  I managed to get the problem with

 

     window.Profiles = {

        data: new kendo.data.DataSource({
            offlineStorage: "profiles-offline",
            transport: {
                read: {
                    url: RESTurl + "profiles/" + appkey,
                    type: "GET",
                    dataType: "json",

                     // added for CORS issues

                    xhrFields: {
                        withCredentials: true
                    }
                }
            },
            schema: {
                data: "profiles"
            }
        }),
        back: function () {
            app.navigate("#:back");
        },
        settings: function () {
            app.navigate("views/settings.html");
        }
    };

and 

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Credentials true
</IfModule>

to my .htaccess file on my REST server.

- mark