B4J Question [WebApp] Dialog not working

ziovec · Sep 21, 2020

Hi there!

Following the Date Picker example I'm trying to have a simple dialog pop-up as I press a button.

B4X:

Sub Class_Globals
    Private ws As WebSocket
    Private Dialog As JQueryElement
[....]
End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
    ws = WebSocket1
    Dialog.RunMethod("dialog", Array As Object(CreateMap("autoOpen": False, "modal": True)))
End Sub

Sub ShowDialog(Message As String, Title As String)
    Dialog.SetHtml(Message)
    Dialog.RunMethod("dialog", Array As Object("option", "title", Title))
    Dialog.RunMethod("dialog", Array As Object("open"))
End Sub


Sub btnmail_Click (Params As Map)
    Log("Bravo!")
    ShowDialog("Hai premuto un bottone!","B4J Dialog")
End Sub

The button btnmail is properly working.
I mean, at least I'm sure it's connected because the log message is shown everytime I click it.
I don't know what is wrong with the dialog...can someone help and explain me? ?

alwaysbusy · Sep 21, 2020

Have you checked the browser logs? Chrome - F12 - Console Tab. They may give you a clue.

ziovec · Sep 23, 2020

alwaysbusy said:
Have you checked the browser logs? Chrome - F12 - Console Tab. They may give you a clue.

Here I'm back, sorry for the tardiness ^^

Checked logs and found that (screenshots attached).
I need help reading it

alwaysbusy · Sep 23, 2020

Hmm, no problem here when I click the open button:

added this in the index.html (datepicker)

B4X:

<div id="maindiv">
        <p>Enter your birthday: <input type="text" id="datepicker"></p>
        <div id="dialog" style="display: none;"></div>
        <button id="btnmail">Open</button> '<-----------------------------
     </div>

And this in the DatePicker class in B4J:

B4X:

Sub btnmail_Click (Params As Map)
    Log("Bravo!")
    ShowDialog("Hai premuto un bottone!","B4J Dialog")
End Sub

Result:

The error you get in b4j_ws.js in the Browser console is saying it doesn't find the ed.method. So in b4j_ws.js, try adding the following console lines, rerun and check the console in the browser again:

B4X:

...
if (ed.etype === "runmethod") {
            console.log(ed.method); <----------------------
            console.log(ed.id); <----------------------
            console.log(ed.params); <----------------------
            $(ed.id)[ed.method].apply($(ed.id), ed.params);
} else if (ed.etype === "runmethodWithResult") {
...

For me it returns something like this:

Alwaysbusy

ziovec · Sep 23, 2020

Ok, I'm starting to suspect I messed up something in the html page.

Console log now looks like yours, but no UI dialog is shown!

I checked again the html file and it seems ok. Div id is lowercase, everything seems fine.
Can you please give a look to yourself?

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>InfoDB</title>
    <meta property="og:type" content="website">
    <link rel="icon" type="image/png" sizes="512x512" href="/assets/img/logo-giallo512x512%20(2).png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Aldrich">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="/b4j_ws.js"></script>
    <script>
    //connect to the web socket when the page is ready.
    $( document ).ready(function() {
        b4j_connect("/ws");
    });</script>
</head>

<body>
    <nav class="navbar navbar-dark navbar-expand-md text-white bg-dark text-monospace text-uppercase text-center border rounded shadow-sm" style="background: #000000;color: rgb(255,255,255);">
        <div class="container-fluid"><a class="navbar-brand" id="titolo" href="/index.html" style="color: rgba(255,253,253,0.9);"><i class="fa fa-database"></i>&nbsp;Database Info</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div
                class="collapse navbar-collapse" id="navcol-1">
                <ul class="nav navbar-nav">
                    <li class="nav-item"><a class="nav-link" id="primo_link" href="/about.html">About</a></li>
                    <li class="nav-item"><a class="nav-link" id="secondo_link" href="/contactus.html">Contatti</a></li>
                    <li class="nav-item"></li>
                </ul>
        </div>
        </div>
    </nav>
    <div id="dialog" style="display: none;"></div>
    <div class="contact-clean">
        <form method="post">
            <h2 class="text-center">Contattaci</h2>
            <div class="form-group"><input class="form-control" type="text" name="name" placeholder="Nome"></div>
            <div class="form-group"><input class="form-control is-invalid" type="email" name="email" placeholder="Indirizzo Email"><small class="form-text text-danger">Inserire indirizzo Email valido</small></div>
            <div class="form-group"><textarea class="form-control" name="message" placeholder="Messaggio" rows="14"></textarea></div>
            <div class="form-group"><button class="btn btn-secondary btn-block" id="btnmail" type="button" style="background: #288c0e;">INVIA</button></div>
        </form>
    </div>
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
</body>

</html>

alwaysbusy · Sep 23, 2020

looks fine to me too.

ziovec said:
Console log now looks like yours, but no UI dialog is shown!

So no more errors?

One thing that is different in yours compare with mine is the use of Bootstrap. Maybe it takes over some of the 'dialog' functionality?

alwaysbusy · Sep 23, 2020

You are indeed missing this line:

B4X:

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

This is probably where the dialog is in.

ziovec · Sep 23, 2020

alwaysbusy said:
You are indeed missing this line:

B4X:

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

This is probably where the dialog is in.

?‍

I'm feeling really dumb right now.

...but it's not over! Why the dialog looks so weird?
?

alwaysbusy · Sep 23, 2020

ziovec said:
Why the dialog looks so weird

You will have to add this line too probably (containing the css of the dialog):

B4X:

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
' and maybe even this one:
<link rel="stylesheet" type="text/css" href="index.css" />

ziovec · Sep 23, 2020

alwaysbusy said:
You will have to add this line too probably (containing the css of the dialog):

B4X:

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> ' and maybe even this one: <link rel="stylesheet" type="text/css" href="index.css" />

Tried, but didn't solved the problem.

What actually SOLVED the whole thing was this incredible discovery:
I noticed that pages made with Bootstrap studio have a jquey.js file in the assets folder.
Every code found on this forum (included the date picker one) is based on jquery 2.1.0, while the local bootstrap one is jquery 3.5.1

Using ONLY jquery 2.1.0 solves the issue

alwaysbusy · Sep 23, 2020

Ah, yes, I see it now too. You loaded two different jquery.min.js scripts in your html

ziovec · Sep 23, 2020

alwaysbusy said:
Ah, yes, I see it now too. You loaded two different jquery.min.js scripts in your html

Yes, but the point is not in having two of them...the point is that jquery-ui seems not to work with jquery 3.5.1
?‍

I'm doing other stuff with other pages built with bootstrap that also have 3.5.1 but never experienced issue.

I'm going to "clean" everything ^^

Thanks for your help, mate!

B4J Question [WebApp] Dialog not working

ziovec

Member

alwaysbusy

Expert

ziovec

Member

Attachments

alwaysbusy

Expert

Attachments

ziovec

Member

alwaysbusy

Expert

alwaysbusy

Expert

ziovec

Member

alwaysbusy

Expert

ziovec

Member

alwaysbusy

Expert

ziovec

Member

Similar Threads