B4J Question [B4J] Interact with bootstrap

jinyistudio

Well-Known Member
Licensed User
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
 
Last edited:

jinyistudio

Well-Known Member
Licensed User
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 ! :oops:
 
Upvote 0

jinyistudio

Well-Known Member
Licensed User
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")
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
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")
 
Upvote 0

jinyistudio

Well-Known Member
Licensed User
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
 
Upvote 0

jinyistudio

Well-Known Member
Licensed User
Wow-face1-300x231.jpg
 
Upvote 0
Top