Need some help with javascript to Bubble script

My native app communicates to my bubble web app through JS bridging. I have set this up for OneSignal push notifications.

i now have a native QR scanner implemented in my app but I need to publish the scanned value into a Bubble element. I’m trying to copy the OneSignal code, but I cannot figure it out.

This one is for onesignal:

function getOneSignalToken() {
window.bridge.post(‘onesignaltoken’, {}, function(results, error){
id = results.token;
})
}
getOneSignalToken();
setTimeout(function codeAddress() {

bubble_fn_222(id);

    },1000);

This is the QR script that I need to add the javascript to bubble part to.

function scanQR() {
window.bridge.post(‘scanqr’)
var qrHandler = window.bridge.on(‘qr_scan_data’, (parameters)=> {
$(‘#qr_string’).html(parameters.result)
})
}

@vincent56, so from your provided code, parameters.result is the value that you need to pass to bubble.
So add a bubbletojavascript element and give it suffix say, qrvalue

So your run javascript action will become like below:

function scanQR() {
  window.bridge.post(‘scanqr’)
  var qrHandler = window.bridge.on(‘qr_scan_data’, (parameters)=> {
       bubble_fn_qrvalue(parameters.result)
  })
}
   
 scanQR();

Actually you don’t even need to create it as a function but i was trying to make it resemble your existing onesignal code.
You can simply do this:

 window.bridge.post(‘scanqr’)
  var qrHandler = window.bridge.on(‘qr_scan_data’, (parameters)=> {
       bubble_fn_qrvalue(parameters.result)
  })

SHould the last scanQR(); be there? < you already adressed this :slight_smile:

Apparently this code should fire the camera/qr scanner in the iOS device.

This code from the plug bubble plugin actually starts the scanner. I have it fire on button click.

window.bridge.post(‘scanqr’, {}, function(results, error){

})

But combining it in a jstobubble script element, will not start the scanner…

Yes if you’re using the first code. Basically you declared a function called scanQR. So you need to call the function for it to execute. You don’t need to declare the function and call it in this case, you can simply just write the functions statement, hence the reason i propose the second approach.

hm ok. So this code basically does two things: start the scanner and receive the scanned result from the native app.

Would you have any idea why the combined code won’t fire the camera and separating starts indeed the code? But then I need to change the jstobubble code so it only picks up the result or something…

In plain html it works perfectly. Adding the bubble stuff makes it kind of break at the moment.

<a class="button" onClick="scanQR()">button</a>

> <script>
> function scanQR() {
> window.bridge.post('scanqr')
> var qrHandler = window.bridge.on('qr_scan_data', (parameters)=> {
> $('#qr_string').html(parameters.result)
> })
> }
> </script>

Along those lines…

If this code works then you can simply pass the result to the bubble_fn like below

window.bridge.post(‘scanqr’, {}, function(results, error){
  bubble_fn_qrvalue(results)
})

But note that i don’t know the data type results. It might be some complex type that we need to get a field of.
So you may have to try it out

hm no luck yet :frowning:

I had hoped this would work, but it doesnt start the scanner from the jstobubble element action.

function scanQR() {

    window.bridge.post('scanqr')

    var qrHandler = window.bridge.on('qr_scan_data', (parameters)=> {

        bubble_fn_222(parameters.result);

    })

} 

What I don’t understand is that running this code in a plugbubble custom code block will actually run the scanner, but this element doesnt have the ability to publish the results in a Bubble compatible way…

window.bridge.post('scanqr', {}, function(results, error){

})

This is the part in xcode that will handle the scanned result:

NotificationCenter.default.removeObserver(self)
        NotificationCenter.default.addObserver(forName: ViewController.qrNotificationName, object: .none, queue: OperationQueue.main) { (notification) in
            if let urlString = notification.object as? String {
                self.wkWebView?.bridge.post(action: "qr_scan_data", parameters: ["result": urlString])
            }
        }
    }

Did you call the scanQr() after the function block like i did in the first code?

Yes,

function scanQR() {

    window.bridge.post('scanqr')

    var qrHandler = window.bridge.on('qr_scan_data', (parameters)=> {

        bubble_fn_222(parameters.result);

    })

}
scanQR();

How are you calling the code? Do you have a button that say on click you do a run javascript action with the code?
can you add this line before the bubble_fn line and lets see if the function gets called.

console.log("This is the result " + parameters.result)

Then check the console to see if this line got executed.

this part is called on button click. A plugbubble custom code block runs as an action.

window.bridge.post('scanqr', {}, function(results, error){

})

Can you try to write to console what results is. i.e do this:

window.bridge.post('scanqr', {}, function(results, error){
   console.log(results)
})

And let me know what is printed in the console.

Silly question, In what console do I check this? I’m testing on an iPad in the app. In Xcode?

yes! I just had to remove the function part.

window.bridge.post('scanqr')

var qrHandler = window.bridge.on('qr_scan_data', (parameters)=> {

    bubble_fn_qrvalue(parameters.result);

})

Perhaps it helps that there is also script in the header of the page though…

Sorry for dragging you in this, Sean. But thanks for the help, you put me on the right path.

Oh sorry i misunderstood you all this while.
I thought you were running on the web not in an app.

I actually don’t know anything about this js bridging. so all my answers are purely based on the code you provided and how to get the value into bubble.

Are you not including the js bridge library on the page?
What script are you referring to.

Yes, the js bridge library. I could have mentioned its also necessary. But your code knowledge def helped me fix this!

instead of console do alert.

alert("This is the result "+results)

or for the other code

alert("This is the result "+ parameters.result)

I want us to see whether the code is called and its the result that is not being received or the code is not called at all.

OK, I can still do this. But you got the fact that I got it working now? :smiley: