B4J Question WebApp: SetHTML loses jQueryElement connection?

alwaysbusy · Sep 11, 2015

I'm only playing with B4J for WebApps for a only a couple of days and I love it! Sorry, just had to tell someone

I'm writing a framework to simplify creating WebApps with B4J for people without any HTML/CSS knowledge. One of the things I do is 'rewrite' the generated HTML when an action happens.

In my framework I would like to 'rewrite' whole blocks (containing buttons, text areas etc) using SetHTML. However, this HTML contains elements that are attached to B4J via JQueryElement. Although they have the same ID as the original on (e.g. only the color has changed), once I 'rewrite' the html, the connection with B4J seems to be lost. (e.g. the button_click is never been fired again. I've tried using ws.flush(), but that does not seem to help. The not rewritten elements keep working so the WebSocket is still active.

Attached is a simplified demo of what I'm talking about. I know in this case I could use SetProp() to change the color, but this is just to show the issue.

1. fill in two valid values in the top edit fields. click calculate: the result is in green
2. fill in invalid values in the top edit fields. click calculate: the result is in orange
3. do step 1 again and nothing happens
4. in the bottom edit fields (not rewritten), everything keeps working fine.

Note: I also tried 'resetting' the btnCalcb by adding this after maindiv2.SetHTML("...")

B4X:

Dim btnCalcb As JQueryElement = ws.GetElementById("btncalcb")

or

B4X:

Dim btnCalcb As JQueryElement = ws.GetElementBySelector("btncalcb")

but with no effect.

Probably something stupid I'm missing...

rwblinn · Sep 11, 2015

Hi,

think the issue is in index.html with the end </div> of <div id="maindiv"> as the id span other divs with id's.
I have tested the app by taking out both maindivs and the app is running fine.

johnerikson · Jan 20, 2016

Hi rwblinn!
I misunderstand your response. I have try most of possible changes, but can't get the app to work!
How do the file index.html look after the changes you specified?

rwblinn · Jan 20, 2016

Hi,

try like

B4X:

<body>
  <div id="maindiv"></div>
  First Number: <input id="text1" type="text"></input><br/>
  Second Number: <input id="text2" type="text"></input><br/>
  <button id="btncalc">Calculate</button><br/>
  <p id="result"></p>
  <hr>
  <div id="maindivb"></div>
  First Numberb: <input id="text1b" type="text"></input><br/>
  Second Numberb: <input id="text2b" type="text"></input><br/>
  <button id="btncalcb">Calculate</button><br/>
  <p id="resultb" style="color:green"></p>

  <script>
    //connect to the web socket when the page is ready.
    $( document ).ready(function() {
      b4j_connect("/ws2");
    });
  </script>
</body>

johnerikson · Jan 20, 2016

Thanks!
Works, but with some strange behavior!

I get new number fields and Calculate button after having entered the incorrect numbers.
To continue enter new numbers after that, do I need to use the source fields together with the last newly created Calculate button because the ordinary is not useful.
But it works that way in the future!

rwblinn · Jan 20, 2016

In your code, take out

B4X:

Dim maindiv2 As JQueryElement = ws.GetElementById("maindivb") ' the parent
id='btncalcb'>Calculate</button><br/><p id='resultb' style='color:green'></p>"
     maindiv2.SetHtml("First Numberb: <input id='text1b' Type='text'></input><br/>Second Numberb: <input id='text2b' Type='text'></input><br/><button id='btncalcb'>Calculate</button><br/><p id='resultb' style='color:orange'></p>")

and use like you did for the first number pair.

B4X:

If IsNumber(ft1b.Value) And IsNumber(ft2b.Value) Then
     Resultb.SetText("Result: " & (ft1b.Value + ft2b.Value))
Else
     Resultb.SetText("Invalid numbers")
End If

johnerikson · Jan 20, 2016

If you mean by ' take out ' that I'm going to remove the code that you show, in that case I never use SetHTML (jQueryElement).
The point is that change color from green to orange on the output text for incorrect numbers, if is entered.

If you mean to move the code outside btnCalcb_Click, it looks like it will not work! I get the same behavior.

Complicated
/jeh

rwblinn · Jan 20, 2016

Hi,

if you want to change the color, you can use sethtml instead of settext, something like:

B4X:

If IsNumber(ft1b.Value) And IsNumber(ft2b.Value) Then
     Resultb.SetText("Result: " & (ft1b.Value + ft2b.Value))
Else
     Resultb.SetHtml("<font color=red>Invalid numbers</font>")
     'Resultb.SetText("Invalid numbers")
End If

johnerikson · Jan 20, 2016

Unfortunately it does not work unless I put the text in the index.html.

I think we will end the thread here, then we begin to be too far from that I ask for.
Thanks for the time you spent on this

B4J Question WebApp: SetHTML loses jQueryElement connection?

alwaysbusy

Expert

Attachments

rwblinn

Well-Known Member

johnerikson

Active Member

rwblinn

Well-Known Member

johnerikson

Active Member

Attachments

rwblinn

Well-Known Member

johnerikson

Active Member

rwblinn

Well-Known Member

johnerikson

Active Member

Similar Threads