B4J Question [B4J] Interact with bootstrap

jinyistudio · Apr 30, 2016

Hi

Do you know how to interact with bootstrap about Event,Value ?

BootStrap Switch http://www.bootstrap-switch.org/

I have put a checkbox switch in page, it work OK !

B4X:

<input type="checkbox" id="checkbox1" checked></td>

<script>
       //connect to the web socket when the page is ready.
       $( document ).ready(function() {       
         $("[id='checkbox1']").bootstrapSwitch();
       b4j_connect("/param/msg/ws");
     });
</script>

This element property:state and event:switchChange but i cann't access them in server side

B4X:

Dim ft1 As Future = ws.GetElementByID("checkbox1").GetProp("state")

following event isn't respones.

B4X:

Sub checkbox1_switchChange(Params As Map)
   Log("checkbox1 click")
End Sub

Erel · May 1, 2016

A simple way to handle custom events is with JavaScript such as:

B4X:

$('.toggle').on('toggle', function (e, active) {
   b4j_raiseEvent("led_toggle", {"id": this.id, "active": active});
});

rwblinn · May 1, 2016

Wrote a small sample application as B4J HowTo.

jinyistudio · May 2, 2016

Hi

Thank's your example first. if i have lots of checkbox componenet in one page, I must write lots of javascript code or you have idea to help us reducing the huge code !

jinyistudio · May 2, 2016

Hi

I forget this one. Could i use JQueryElement to access the checkbox's state ? If i can, How to ?

B4X:

Dim ft1 As Future = ws.GetElementByID("checkbox1").GetProp("state")

Erel · May 2, 2016

jinyistudio said:
I must write lots of javascript code or you have idea to help us reducing the huge code !

No.

Modified body code:

B4X:

<!-- Define the body as a bootstrap container -->
   <body>
     <div class="container">
       Checkbox1: <input type="checkbox" name="checkbox1" id="checkbox1" checked><br/>
       Checkbox2: <input type="checkbox" name="checkbox2" id="checkbox2" checked><br/>
       Checkbox3: <input type="checkbox" name="checkbox3" id="checkbox3" checked><br/>
       Checkbox4: <input type="checkbox" name="checkbox4" id="checkbox4" checked><br/>
       Checkbox5: <input type="checkbox" name="checkbox5" id="checkbox5" checked><br/>
     </div>

     <!-- Script Area -->
     <script>
     $( document ).ready(function() {
     $(":checkbox").bootstrapSwitch();
  b4j_connect("/ws");
     });

     </script>

     <script>
       $(":checkbox").on('switchChange.bootstrapSwitch', function(event, state) {
         console.log(this); // DOM element
         console.log(event); // jQuery event
         console.log(state); // true | false
         b4j_raiseEvent("checkbox1_event", {"id": this.id, "state": state});
       });
     </script>

   </body>

You can get the checked state with:

B4X:

checkbox1.GetProp("checked")

jinyistudio · May 2, 2016

Hi

I can checkbox1.GetProp("checked") but i cann't checkbox1.SetProp("checked",False) ??

B4X:

       e8d.SetProp("checked",Main.sms_used)   
    revert1.SetProp("checked",Main.sms_revert1)
    mqtt.SetProp("checked",Main.mqtt_used)
       
    ws.Flush

Erel · May 2, 2016

Found the answer with the help of Google: http://jsfiddle.net/sumw4/13/

B4X:

checkbox1.RunMethod("bootstrapSwitch",Array("state", False))

jinyistudio · May 2, 2016

rwblinn · May 2, 2016

Great - Have the example enhanced with multiple checkboxes and a button to show change state checkbox5.

B4J Question [B4J] Interact with bootstrap

jinyistudio

Well-Known Member

Erel

B4X founder

rwblinn

Well-Known Member

Attachments

jinyistudio

Well-Known Member

jinyistudio

Well-Known Member

Erel

B4X founder

jinyistudio

Well-Known Member

Erel

B4X founder

jinyistudio

Well-Known Member

rwblinn

Well-Known Member

Attachments

Similar Threads