0

Version: JQM 1.4.5.

Scenario
When server side is sending back invalid markup instead of expected json data for ajax call, UI end would display whatever the server end is sending back (e.g. Sign in page, system error page...)

It has been working out well for desktop version for a long time. Now I am trying to port the logic to work for JQM, I am having trouble.

Symptoms:

(a) page mark up is not enhanced. (b) Style sheet (that is specified in the tag within the redirected html page) is not applied

Code:

$.ajax({
    type: "POST",
    dataType: "json",
    ...

    error: function (XMLHttpRequest, textStatus, errorThrown) { 
        ...
        //display whatever server sends back. 
        if (textStatus == parsererror_textStatus ) { 

            document.write(XMLHttpRequest.responseText); 
            $('#main').trigger('pagecreate');
            $('#main').enhanceWithin();
        }
    }
});

References
I have searched quite a bit over the web. But it has not worked out for me yet. Any suggestions?

https://www.gajotres.net/jquery-mobile-and-how-to-enhance-the-markup-of-dynamically-added-content/

jquery mobile Dynamically Injecting Pages

http://demos.jquerymobile.com/1.3.2/faq/scripts-and-styles-not-loading.html

jQuery Mobile does not apply styles after dynamically adding content

Forcing jQuery Mobile to re-evaluate styles/theme on dynamically inserted content

riceball
  • 403
  • 2
  • 15
  • see here: [How can I make document.write and ajax play nice?](https://stackoverflow.com/questions/18475413/how-can-i-make-document-write-and-ajax-play-nice) but... just guessing, I believe You will end up with a mess of pages, because JQM has its own page handling and caching mechanism. – deblocker Jun 06 '18 at 21:37
  • Thanks deblocker. My guess is somehow I need to find a way so that this page would ho through JQM's page handling. It does not look like the issue is the interaction between document.write and ajax (since it works out for desktop web version). Thanks for commenting! – riceball Jun 06 '18 at 21:46
  • I believe document.write only works while the page is loading; If you call it after the page is done loading, it will overwrite the whole HTML page. – deblocker Jun 06 '18 at 21:53
  • overwriting the whole page (where end user was on) with whatever server has responded is the intention. Seems this part is working. What is not working is this newer page (spitted out as server response) acts like plain string, and is not JQM enhanced. (web version does not have this problem since no need for any enhancement). – riceball Jun 06 '18 at 21:59
  • Insert new page(s) before redirecting. New page(s) will be fully enhanced on **first visit**. – Omar Jun 14 '18 at 10:28

1 Answers1

0

I eventually got it to work. In case it might help someone in the future, let me post the answer here.

  • JQM elements has to be enhanced and themed. In this "trap & display redirect response content" case, we have to do it programmatically;
  • In order to get #1 to work, it eventually came to light that we need to load the "response content" into DOM programmatically

Code Listing:

if (textStatus == parsererror_textStatus ) { displayResponseContent(XMLHttpRequest.responseText);
} 

function displayResponseContent(fullResponse){
  loadIntoDOM( fullResponse);
  enhancePageMarkup();
}

//The response has to be loaded into DOM for later manipulation
function loadIntoDOM(fullResponse){
  var startIdx = fullResponse.indexOf("<body>");
  var endIdx = fullResponse.indexOf("</body>");
  var bodyTxt = fullResponse.substring(startIdx,  endIdx + 7);
  //The main thing here is to load the "body" into DOM
  var bodyDomNodes = $.parseHTML(bodyTxt, true);
  $(document.body).empty().append(bodyDomNodes);
}

//enhance the markup of dynamically added content(e.g: "page" in our case)
function enhancePageMarkup(){
  $('div[data-role=page]').trigger('pagecreate');
  $(document.documentElement).enhanceWithin();
  $('div[data-role=page]').addClass("ui-page-active");
}
riceball
  • 403
  • 2
  • 15