1

I have a view in my rhomobile app where I want to hide and show certain div's, using jQuery and Javascript. The Javascript code is embedded in the view file, but is not getting executed. This piece of code for example doesn't do anything in my app:

<script type="text/javascript">
$(document).ready(function () {
alert("loaded submit.erb...");
showLoadingIndicator();});
</script>

I'm using the standard layout.erb which comes with a freshly generated app project. Any help is highly appreciated.

HTML output:

<script type="text/javascript">
$(document).ready(function () {
alert("loaded submit.erb...");
showLoadingIndicator();});

function showLoadingIndicator(){
    setTimeout(function(){
            $('#loadingPlaceholder').hide();
            <% if @params["body"] == "SUCCESS" %>
            successfull();
            <% elsif @params["body"] == "FAILED" %>
            <%= puts "### FAILED ###" %>
            not_successfull();
            <% else %>
                wait();
            <% end %>
        },6000);
}
function successfull(){
  $('#successfull').show();
}

function not_successfull(){
  $('#not_successfull').show();
}

function wait(){
    <%= puts "+++ body => +++" %>
    <%= puts  @params %>
    <%= puts "++++++++++++++++++" %>
}</script>
<div data-role="page">
    <div id="loadingPlaceholder" style="width: 100%; height: 250px; text-align: center;  position: absolute; display: block">
            <div>
                Ihre Anfrage wird gesendet...
            </div>
    </div>  

    <div id="successfull" style="width: 100%; height: 250px; text-align: left;  position: absolute; display: none">

        Ihre Anfrage wurde gesendet.<br>
        Wir setzen uns umgehend mit Ihnen in Verbindung.
    </div>

    <div id="not_successfull"  style="width: 100%; height: 250px; text-align: left;  position: absolute; display: none;">
        Leider konnte Ihre Anfrage nicht versendet werden.<br><br>
        Bitte versuchen Sie es später noch einmal.<br> 

    </div>
</div>
Oliver Schobel
  • 377
  • 4
  • 20

1 Answers1

0

Most likely there is a js error that is preventing the rest of the script from being loaded.
Another couple things we need to know are:

  1. What UI framework are you using? (jquery mobile, jqui, etc)

  2. Is this happening in the rhodes simulator, on a device, on an emulator?

To figure out what is going on:

  1. Check the console log in rhosimulator and the rhodes log, look for any errors there.
  2. Attach an alert to the window.onerror event in the layout page and see if anything is showing up.
  3. It is unlikely everything in the script is failing (that would point to a UI framework problem), try adding some alerts or console logs to the top of the script in your page, or even better use log4js and start adding debug code that you can manage.
Raul Vejar
  • 837
  • 8
  • 14
  • Hi Raul, thanks for the hints. I meanwhile kind of made it work. I put the Javascript code in an extra file "request.js" and included it in layout.erb. This way the code is being executed. But when I insert a script block in the request.erb file, it still doesn't work. I'm using jquery mobile and I'm testing in the android emulator and chrome webbrowser. – Oliver Schobel Feb 06 '13 at 10:56
  • Have you tried opening the console in Chrome and see if any js errors pop up when you put the script in the view file? – Raul Vejar Feb 07 '13 at 14:51
  • Yes, I tried that. I put an alert and a function "doAlert()" in the a script block in the view file. I tried to call the function with an onClick() function. By doing this, the console says: "Uncaught ReferenceError: doAlert is not defined". It seems as if the view file is not aware about this function at all... – Oliver Schobel Feb 08 '13 at 16:44
  • Where are you defining that doAlert function? It really sounds like a js error somewhere in your view... Take into account that the js inside a view is loaded by whatever framework you are using for transitions and run dynamically when the page is loaded, you need to make sure that process is going smoothly (not throwing any interpretation errors in your script) – Raul Vejar Feb 11 '13 at 15:04
  • I defined the Javascript at the very top of my view file. I meanwhile tried something new and the Javascript code is working now. My View basically consists of three divs with different data roles. data-role="page", data-role="header" and data-role="content". Now that I have the script block within the data-role="page" div, the code is being executed. I assume this is a jQueryMobile specific thing... – Oliver Schobel Feb 13 '13 at 08:53
  • Yes, any code you want making into the page needs to be inside the div tags, otherwise jquery mobile will not parse it – Raul Vejar Feb 14 '13 at 15:08
  • Yes, I didn't know that. Thanks for the hints which finally lead me there. – Oliver Schobel Feb 15 '13 at 13:32