jQeury Ajax Calls in new UI issue

Posted by Meryk on 07-Sep-2015 09:01

Hello,

With relation to my previous post : https://community.progress.com/community_groups/rollbase/f/25/t/20061.aspx, I am just realizing that the ajax calls are maybe facing some issues in the new UI, generally speaking and not only when used with the Kendo Tabs.

Basically, I am just doing a jQuery Ajax call like that :

<div id="ajaxSection">This is the Ajax Section</div>

<script>

function loadAjax(){

$.ajax({
method : "GET",
url: 'myUrl'
dataType : 'html',

success: function(data) {

console.log($.parseHTML(data));
var myDiv = $.parseHTML(data)[39];
console.log(myDiv);
}

}); //end of ajax call

}

In the code below, I am expecting "myDiv" to return the "rb-content-box", in which I would like to look for another div of class "k-tabstrip-wrapper". The problem is that the result of the ajax call is not complete. The "myDiv" returned is :

<div id="rb-content-box">
   <div id="rb-menu-box">
        <div id="rb-tabs"></div>
   </div>
   <div id="rb-tab-content-box" style="overflow: auto; position: relative;">
        <div id="rb-styleable-content-box" class="rbs-content"></div>
    </div>
</div>

Whereas I am expecting a whole page. Obviously the result is truncated to 3 levels.

Is that something to do with the new UI and how Rollbase is using it ?

We are actually facing this Ajax issue in many of our pages using the new UI. Can you please kindly give us some help on this ?

Thank you

Meryem

Posted by Thierry Ciot on 10-Sep-2015 07:23

> Thierry,  you are saying if I return the data in a Json format, then I can access all the json objects of the page?

No.  What I was pointing out is that the new ui page contains the JSON data for the page.  The data is stored in the variable rb.newui.webPageData.

If you do a view source on the page you will something like this:

rb.newui.webPageData = {

 "majorVersion": 0,

 "minorVersion": 1,

  ....  // more data here

};

We do not recommend accessing that variable directly but rather to use rb.newui.page.PageContext.getWebPgData()

Thierry.

All Replies

Posted by Thierry Ciot on 07-Sep-2015 19:52
New ui does not change the way ajax requests should be made.  We use ajax requests in new ui and have not noticed any particular issues with them
 
What do you mean by “the result of the call is not complete”?
 
Could you post a sample app illustrating the issue?
 
Thanks. Thierry.
[collapse]
From: Meryk [mailto:bounce-Meryk@community.progress.com]
Sent: Monday, September 07, 2015 10:02 AM
To: TU.Rollbase@community.progress.com
Subject: [Technical Users - Rollbase] jQeury Ajax Calls in new UI issue
 
Thread created by Meryk

Hello,

With relation to my previous post : https://community.progress.com/community_groups/rollbase/f/25/t/20061.aspx, I am just realizing that the ajax calls are maybe facing some issues in the new UI, generally speaking and not only when used with the Kendo Tabs.

Basically, I am just doing a jQuery Ajax call like that :

<div id="ajaxSection">This is the Ajax Section</div>

<script>

function loadAjax(){

$.ajax({
method : "GET",
url: 'myUrl'
dataType : 'html',

success: function(data) {

console.log($.parseHTML(data));
var myDiv = $.parseHTML(data)[39];
console.log(myDiv);
}

}); //end of ajax call

}

In the code below, I am expecting "myDiv" to return the "rb-content-box", in which I would like to look for another div of class "k-tabstrip-wrapper". The problem is that the result of the ajax call is not complete. The "myDiv" returned is :

<div id="rb-content-box">
   <div id="rb-menu-box">
        <div id="rb-tabs"></div>
   </div>
   <div id="rb-tab-content-box" style="overflow: auto; position: relative;">
        <div id="rb-styleable-content-box" class="rbs-content"></div>
    </div>
</div>

Whereas I am expecting a whole page. Obviously the result is truncated to 3 levels.

Is that something to do with the new UI and how Rollbase is using it ?

We are actually facing this Ajax issue in many of our pages using the new UI. Can you please kindly give us some help on this ?

Thank you

Meryem

Stop receiving emails on this subject.

Flag this post as spam/abuse.

[/collapse]
Posted by Mohammed Siraj on 08-Sep-2015 00:26

In response to your earlier thread, we have already identified an appropriate solution. Request you to review the same.

For this particular post, it seems that you are requesting another Rollbase Page via Ajax call. Can you please elaborate as to what is the usecase here?

This is not an issue with your Ajax call. In New UI pages, this way you will only get skeleton DOM structure as we construct page DOM on the client-side & do not send the same in HTTP Response Body . Hence, in your Ajax call response, you are seeing just the skeleton DOM structure.

Posted by Meryk on 08-Sep-2015 04:59

Hi Siraj,

The usecase is basically just getting the content of another Rollbase View page from a given page. (Just for testing).

I fully understand that the ajax calls on the new UI are returning only the skeleton DOM Structure and this explains the data I am getting.

Now how do I do to get to a particular element from the data returned? especially when this element is not part of the skeleton and it is loaded only after .. This is the same issue I am facing regarding my other post about the Tabs

Cheers,

Meryem

Posted by Mohammed Siraj on 08-Sep-2015 06:07

With New UI pages, it is NOT possible to load one page as tab content of another page, considering that they are constructed on client-side and are not part of ajax response.

You may want to consider using IFrame's instead.

Posted by Thierry Ciot on 08-Sep-2015 11:43
But you may want to get at the json data from that returned page and use that you as you need.
We have not formalized how the json data can be opened to third party but we have versioned it.
 
[collapse]
From: Mohammed Siraj [mailto:bounce-msiraj@community.progress.com]
Sent: Tuesday, September 08, 2015 7:08 AM
To: TU.Rollbase@community.progress.com
Subject: RE: [Technical Users - Rollbase] jQeury Ajax Calls in new UI issue
 
Reply by Mohammed Siraj

With New UI pages, it is NOT possible to load one page as tab content of another page, considering that they are constructed on client-side and are not part of ajax response.

You may want to consider using IFrame's instead.

Stop receiving emails on this subject.

Flag this post as spam/abuse.

[/collapse]
Posted by Meryk on 09-Sep-2015 11:27

Hello,

Thierry,  you are saying if I return the data in a Json format, then I can access all the json objects of the page?

I tried returning json data with the same ajax call, and it is all empty. Am I misunderstanding something here ?

Siraj, in terms of using an iframe, this can be a solution actually. Now can you tell me if there is a way to get only a section from the iframe loaded please? because as you know certainly, the iframe is getting the whole page with headers and footers..

Ps : url#sectionName does not work, still returning the wholepage. It is actually scrolling to that section but not removing the other unwanted parts.

Cheers,

Meryem

Posted by Thierry Ciot on 10-Sep-2015 07:23

> Thierry,  you are saying if I return the data in a Json format, then I can access all the json objects of the page?

No.  What I was pointing out is that the new ui page contains the JSON data for the page.  The data is stored in the variable rb.newui.webPageData.

If you do a view source on the page you will something like this:

rb.newui.webPageData = {

 "majorVersion": 0,

 "minorVersion": 1,

  ....  // more data here

};

We do not recommend accessing that variable directly but rather to use rb.newui.page.PageContext.getWebPgData()

Thierry.

Posted by Mohammed Siraj on 23-Sep-2015 02:41

Sharing a code snippet here for the usecase that you have mentioned i.e. embedding selected html fragment from another Rollbase page into a page tab.

However, would like to re-iterate that including a page in another page is not supprted OOB & any issues arising out of this scripting solutions are not to be considered as product issues.

Also, request you to share same valid usecases around this requirement, we will consider having built-in product support for such requirements going forward.

Add a script component to page tab, as follows:

<script>

 $.ajax({

 method: 'GET',

 //COMMENT: Replace your URL here...

 url: 'localhost:8080/.../main.jsp

 dataType: 'html',

 success: function (data) {

   //This is the container element for this tab... in which we want to embed another page..

   var containerEl = $(rbf_getPageTabContentElement(3));// am targetting 4th tab... give the tab index as per your setup

   //A temp div container.. to hold response html markup..this will have sciprt elements & DOM skeleton

var tempDiv1 = $('<div></div>');

   tempDiv1.append(data); //append response data..

   //We are after a particular a script component, which does not have source attribute..

   var scriptEls = tempDiv1.find('script:not([src])');

   //add these scripts to tab

   containerEl.append(scriptEls);

   //create another temp div container... this will hold html markup of generated page...

   var tempDiv2 = $('<div></div>');

   var config = {

  renderToEl: tempDiv2,

data: rb.newui['webPageData'] // target page json data..

};

   var uiGenerator = rb.newui.PageGenerator(config);

uiGenerator.appendPage(false); //this will add html markup for generated page to 'tempDiv2'

   //see current contents of 'tempDiv2'

   console.log(tempDiv2);

   //now selectively include contents from 'tempDiv2' into this tab...

   containerEl.append(tempDiv2.find("section"));

 }

}); //end of ajax call

</script>

Posted by Meryk on 23-Sep-2015 03:43

Hello,

Thank you for this guys.

We actually found a workaround to do this as the simple ajax Call was not working. So we achieved this differently.

We will keep your code in mind anyways. I am sure this might be helpful for other situations.

Thank you,

Meryem

This thread is closed