JQuery Mobile not working :/

JQuery Mobile not working :/

  
Hi all,
i have been trying to get a simple popup working in a mobile application and i have tried anything possible.
I searched the forums, and read all i could find about this.

I finnaly realized that as seems the code generated by the platform "disables" the functionality of the javascript.

I tried to include the script files with references, and with the AddJavaScriptTag. Tried with different orders, with CSS, without CSS, everything...
Finally i ran out of possible changes and copied the generated source code, tested it as an independent php file. I removed everything generated by the platform "around" the script, and the it worked.

I attached a very simple example, maybe someone has other ideas.


Thank you,
Rui Molefas
Hi Rui,

The PopUp widget is not supported in Mobile Devices (the description has this information).
Don't you have an alternative? PopUps usually lead to usability issues in mobile devices.

HD


Hélio Dolores wrote:
Hi Rui,

The PopUp widget is not supported in Mobile Devices (the description has this information).
Don't you have an alternative? PopUps usually lead to usability issues in mobile devices.

HD

 
 
 Hi Hélio,
i know the Popup Widget is not supported, but this is not that Popup. Its a "Jquery Mobile" script to Popup some text, exactly to replace that non working Widget.
http://jquerymobile.com/

Check it ;)


Thanks,
Rui Molefas
That's weird... we are not directly avoiding anything from opening.

Isn't that a browser limitation? Have you tried to access a demo from your device in another site?
Do you have any JS error in your console? 

Regards,
HD
Hélio Dolores wrote:
That's weird... we are not directly avoiding anything from opening.

Isn't that a browser limitation? Have you tried to access a demo from your device in another site?
Do you have any JS error in your console? 

Regards,
HD
 
 Doesn't seem so, I tested it last light myself to try and help Rui.

And what I noticed is that the .popup() plugin (jQ Mobile) doesn't seem to be loaded.
If I try to call an object and apply the .popup() method, there's an error saying the object has no such method. Same with dialog boxes.

I tried many approaches, and like Rui's example, the page gets all the right styles and behaviours... so many things are working.
But some plugins don't seem to work properly (popup and dialog so far). Yes, it's probably conflicting with something the platform generates.

Rui, if you really want that text to pop up you can try onclick:
$("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><strong>Yay! Outsystems Mobile Popup!!!</strong></div>")
    .css({ "display":"block", "opacity":0.96, "top": $(window).scrollTop() + 100 })
    .appendTo( $("body") )
    .delay( 2500 )
    .fadeOut( 400, function(){
        $(this).remove();
    });

Since the css and some other jQuery Mobile Stuff are working, this will as well :)
Thanks Hélio!
That particular solution uses only jquery to display the popup itself but, as long as it works in mobile devices, im happy.

What im trying to achieve is to display a popup to show me some information that i can select or interact without leaving the current page. The outcome of that interaction is then returned to the current page without leaving it.
have done something similar using only jquery so it should be ok. Any sugestions on best practices are always welcome though!

Im sorry to keep this post going but, ill take the oportunity to ask if there are any "limitations" or known issues/recommendations for using JQuery in a Agile Platform's mobile application?


Thank you again all,
Rui Molefas
 
 No problem Rui. :)

I noticed you were using the AddJavaScriptTag. Don't, it'll duplicate <script> tags in the header, with each submit. Also, the approach of loading from external websites is cool, but it might fail when you're dealing with closed networks with no access to the internet.

Take a look at this post for the right solution on how to load jQuery (Kudos to João Rosado)

The main/most common problem with jQuery and specifically jQuery Mobile (on the outsystems platform) is ajax refreshes.
Specially jQuery Mobile, that uses a stylesheet and applies the styles through JavaScript.

Changes made to the DOM (client side) are just reverted once you do an ajax refresh. Ajax refresh resets the affected page part of the DOM to the one the platform generated, so anything that was applied in the meanwhile is now gone, because Ajax Refresh downloaded the original HTML.
Test: In that sample eSpace you provided, add a button/link with an action doing Ajax refresh to that button you had before. It will lose the cool jQuery Mobile CSS.

Always keep this in mind: Ajax Refresh = Lose all JavaScript modifications made after the page loaded.
With this in mind, there are two ways you can try avoid the problem.
  1. Avoid ajax refreshes and do all updates client side. The problem with this is you will rely heavily on JavaScript, and I'm sure that isn't your intention since you're using the Agile Platform.
  2. My favorite: Keep the loading/initialization scripts inside the refreshed areas. That way, they will be ran with the ajax Refresh and do the changes all over again with each refresh. Using osjs(document).ready(function () { <your-code-here> }); also seems to help.
Personally, I wouldn't rely too much on jQuery Mobile because it forces you to either use too much JavaScript or to have script tags all around. I like to encapsulate my javascript tightly so I don't have to worry with it further down the road. I even stopped using external jQuery, because the platform already loads it's own instance of it (v1.4.2 with 6.0) and it can always be called using osjs();
Hello, sorry for the late reply.

I have been fooling around with jquery now and, i made a simple test that seems to work the way i want and was way easier than i antecipated. Actualy so easy i must be missing something (!)

Like i said my main goal is to lets say, fill a number of fields like a form but each of these is filled by the input given to a certain popup. One just presses some icon or the inside of the field, popup appears, user gives input, input gets written on the field. 
My original concern was that if i have more than one field, when "refreshing" the page after inserting a second one, the first might be gone. 
Happens that i did a few tests and that doesnt see to happen. I thought that since i pressed a button inside the popup, the whole html would be regenerated.

Im making the connection between the popup and the actual form with JavaScript using a RunJavaScript action with an "arcaic" document.getElementById(), but it seems to get the job done.

Since this is just a learning experiment, please fire any possible sugestion or criticism on some negative point, if you have the time for it.


Thank you all once again,
Rui Molefas