Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Application fails to load with MIME Type error after applying theme

DaveArchNov 1 2019 — edited Nov 1 2019

Node version: 12.13.0

NPM version: 6.12.0

OJet version: 7.2.0

After applying a theme and serving using 'ojet serve --theme=<theme>' the application fails to load properly.

The application styling is not correct and the following error is seen in the console in Firefox (similar error in Chrome):

Refused to apply style from 'http://<host>/css/<theme>/0.0.1/web/<theme>.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Within the /web/index.html file, the stylesheet has the following entry:

<link rel="stylesheet" href="css/<theme>/0.0.1/web/<theme>.css" id="css" />

This is automatically added when the application is served.

I've tried manually adding type="text/css" to the stylesheet link but this makes no difference.

Any help greatly appreciated.

Comments

Tom Petrus

Have you tried to run your selector in the browser's console (eg firebug)? Is your region perhaps being refreshed? Is the scope of the action set to static or dynamic?

Becky-IT

Tom,

I have used Firefox's debugger.  I can see other DAs firing but not this one.

I don't know of anything that would cause the region to refresh.

I don't know what your last question means:

Is the scope of the action set to static or dynamic?

Thanks,

Becky

Tom Petrus

Sorry, in apex 4.1 the scope is the bind type of the dynamic action, "Live" or "Bind". If I'm not mistaken it is under the advanced part of the DA (not true/false action).

When your page has finished loading, have you tried to run your selector from the console: $(select[name="f05"]) and if yes, this does return elements?

Becky-IT

Tom,

The bind type is "Bind".

Interesting fact:  In Firefox, the following errors do not occur, only in IE:

IE throws error "Object doesn't support this property or method" which is (function(){apex.da.initDaEventList();})();

IE is also throwing an error in the Dynamic Query:

var elem = '#' + this.triggeringElement.id;

var key = '#' + 'f02_' + this.triggeringElement.id.substring(4);

var set_list = '#' + 'f04_' + this.triggeringElement.id.substring(4);

var key_val = $(key).val();

var elem_val = $(elem).val();

var selected_val = '';

apex.server.process (

    "getEmployees",

    {

      x01: elem_val,

      x02: key_val

    },

    {

      success: function( pData ) {

      $(set_list).find('option').remove();

      $.each(pData, function(key, innerjson) {

      $(set_list).append($('<option>', {

      value: innerjson.VALUE,

       text: innerjson.NAME

        }))

      if (innerjson.SELECTED != '') {selected_val = innerjson.SELECTED};

      });

      if (selected_val != '') {

        $('select' + set_list + ' option').each(function()

        {this.selected = (this.text == selected_val);});

      }

       },

    }         <--------- HERE

);

How do you run the selector from the console: $(select[name="f05"])?  All I have is the Firefox debugger. Firebug stopped working last week.

Becky-IT

Tom,

I was just informed the Firefox debugger IS the new Firebug!!  So I did figure out how to run the selector from the console:  I received the following:  ReferenceError: select is not defined.

Becky-IT

In doing more research I believe the apex.server.process and associated select are in 4.2 and not in 4.1.  Is there a work around?

Aljaz

Hi,

you can use htmldb_Get

Regards,

  Aljaz

Tom Petrus

with  $(select[name="f05"]) I actually meant $('select[name="f05"- sorry, forgot the quotes there.


And yes, apex.server.process is new in apex 4.2 and not in 4.1. You could use htmldb_Get, yes. But why not use $.ajax until you get to 4.2. This can only be a good thing since apex.server.process wraps $.ajax, and can take the same options and also returns the same object. You'll have a good headstart on it by using proper ajax calls.

Eg:

var ajaxData = {  "p_request"      : "APPLICATION_PROCESS=getEmployees"

                , "p_flow_id"      : $v('pFlowId')

                , "p_flow_step_id" : $v('pFlowStepId')

                , "p_instance"     : $v('pInstance')

                , "x01"            : elem_val

                , "x02"            : key_val

               };

$.ajax( 

       {  "url"      : 'wwv_flow.show'  //URL request is sent to

        , "type"     :"POST"            //type of ajax request. GET,POST,...

        , "dataType" :"text json"       //how jquery will parse the return value. Default in 4.2 JSON

        , "data"     : ajaxData         //object with data to be sent which will be converted to a query string

        , "success"  : function(pData){

            //handle the successful return -> pData

         }

       }

      );

All info on $.ajax: jQuery.ajax() | jQuery API Documentation

Becky-IT

Tom,

I realized these errors are caused by missing APIs in version 4.1.1.  The specific APIs are "apex.server.process" and "apex.da.initDaEventList()".  Is there a possible workaround?

Tom Petrus

Yes, for apex.server.process, use $.ajax (jQuery) (see above, my previous post) or the old, undocumented htlmdb_get. apex.da.initDaEventList() is not a problem, it just errors out because it initializes the dynamic actions. If one contains an error, then you're likely to see an error on that line. (You're not even calling it directly)

Becky-IT

Hi Tom,

I didn't think I had posted the "work around" request!!  Thanks so much.  I will try it out!

Becky

Becky-IT

Tom,

Will I try out the new code.  In the meantime, I still cannot get the DA running.  I entered $('select[name="f05"]' as you suggested.  I get [object Object] which in looking at it, it does contain the Type list.  The DA is just not firing!

Tom Petrus

Becky,

The selector will probably work fine, but as long as there is invalid javascript code in there, you might run into problems. If you want to make sure, try only using an alert on change.

Becky-IT

Thanks Tom.  I did just that and it still doesn't work.  I have since upgraded ApEx to 4.2.4!!  Hopefully that may shed some light on the subject!

Becky

Tom Petrus

If you can't get it to work, set up an example(or export your application to) on apex.oracle.com so I (/we) can take a look!

Becky-IT

We have upgraded to 4.2.4.  It is still not working.  I will try to put an example on apex.oracle.com

Becky-IT

Tom,

I got the DA to fire!  It was setting the Event Scope to Dynamic.  Still don't have the second field populated, but working on that!

Becky-IT

Tom,

In the DA (I think), I am getting an error:

Error: parsererror - syntaxError: JSON.parse: unexpected character

I really can't tell if it's in the DA or the AjaxCallBack.

Thanks,

Becky

Becky-IT

Tom,

I guess I should tell where the app is!!  It is

It's in workspace beckyeisen.

Log in with guestEisen

Password gstEisen123

Tom Petrus

Becky,

The error is in the ajax call. You're getting a no-data-found. You can see this by inspecting the ajax call made, the response will show the error. You get the error because a json format is expected, and the error message evidently is not json. This might be because you haven't provided data in all the tables.

And dynamic scope helps, yes. Because with a static bind only elements present in the dom at load of the page will be bound. Dynamic can take care of additional elements inserted in the dom after that.

Becky-IT

Tom,

I FINALLY got it to work.  I believe part of the problem, was my database design was too complicated.  I denormalized some tables and was able to get my head around the queries!!

Thanks so much for all your help!

Becky

Becky-IT

Tom,

I just ran into a MAJOR hiccup.  This does not work in IE 8.  Is there a work around?

Thanks,

Becky

TexasApexDeveloper

Switch to a MODERN browser???

(I understand your client has their standards, they just are not inline with current browser technology, explain to your client that the browser they have you support is 3 MAJOR releases from the current released product from Microsoft..)

Thank you,

Tony Miller
LuvMuffin Software
Ruckersville, VA

Tom Petrus

It should work in IE8, but the code might need some adaptations. Usually the cause is the use of some native javascript functionality not working as you expect, usually in IE. This can be a minor thing, such as ".selected". This is also why you should always prefer to use jQuery in cross-browser applications, and while it may not the holy grail, it takes care of many such issues.

And while I agree with Tony that using a modern browser would be best, there are still plenty and plenty of clients with IE8. It's frustrating, yes, as they NEED it to be ie8 because usually there is old or some or other propietary site or software which has been implemented in the poorest of ways possible or hasn't been updated/looked at for year. Yet at the same time, they want 'cutting edge' website designs.

Oh and hey, IE8 is not THAT bad, but what will make life simply terrible with it is that ALL corporations have the "display intranet websites in compatibility mode" checked on by policy, forcing your sites to IE7 compatibility mode. Geez, go figure...

To determine your issue however you will need to provide more info to us. When you open the dev tools in ie8 and look at the script/console, does it mention an error and a line? Is your demo application to date? If you have a reflecting solution there, we may try to run it, even if it is in a compatibility mode.

Becky-IT

Tony,

This is the Government.  I have absolutely no say in the matter!

Thanks,

Becky

Becky-IT
Answer

Tom,

I was able to get the demo app to work in IE9.  I exported the app to the my customer site and it works in IE8.  However, when I copied the code to the customer app, it does not work.  I am back to the parseerror...unexpected character when run in Firefox!

When I open the dev tools in ie8 I get no errors.  When I run the app, by selecting the first LOV, I receive Error:parseerror - [object Error] which is the same thing.

You have helped my tremendously and I appreciate it!!

The demo app is up to date.

I guess when all else fails, delete and start over!!!  I created another page and recreated the tabular form.  I recopied from the application that works.  On the page where I need the tabular form, I deleted the original one and copied from the newly created page.  It now works.  Very frustrating as I believe you should not have to delete and recreate stuff!!

I think I am done!!!

Thanks so much for all your help in getting me this far!

Becky

Marked as Answer by Becky-IT · Sep 27 2020
TexasApexDeveloper

Becky,

  Understood.. I too work for gov't.. Current version of browsers they support:

Firefox: Version 17..

IE       : Version 8

(Thankfully my group only supports APEX apps on Firefox..)

Thank you,

Tony Miller
LuvMuffin Software
Ruckersville, VA

1 - 27

Post Details

Added on Nov 1 2019
1 comment
1,228 views