Set textbox value on child page from master page

Question

I am using the following jQuery codeto detect barcode scans and place the barcode data into a textbox on a child page. Right now this code is in the child page and it works as expected:

        <script type="text/javascript" src="Scripts/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.scannerdetection.js"></script>
    <script type="text/javascript">
        $(document).scannerDetection({
            minLength: 5,    // override the default minLength of 6 since barrel numbers are 5 digits - otherwise onError is triggered
            timeBeforeScanTest: 200, // wait for the next character for upto 200ms
            endChar: [13], // be sure the scan is complete if key 13 (enter) is detected
            avgTimeByChar: 40, // it's not a barcode if a character takes longer than 40ms
            ignoreIfFocusOn: 'input', // turn off scanner detection if an input has focus
            onComplete: function (barcode, qty) {
                $('#<%= txtBarcode.ClientID%>').val(barcode);
                $('#<%= btnRefresh.ClientID%>').click();
            },// main callback function
            scanButtonKeyCode: 116, // the hardware scan button acts as key 116 (F5)
            scanButtonLongPressThreshold: 5, // assume a long press if 5 or more events come in sequence
            onError: function (string) { alert('Error ' + string); }
        });
    </script>

I need to move this jQuery to my master page but I can't figure out how to reference the txtBarcode and btnRefresh controls that are on the child page from the master page. Can anyone give me some sample code for the onComplete callback function that would allow me to fill the controls on the child page from the master page?

            onComplete: function (barcode, qty) {
                $('#<%= txtBarcode.ClientID%>').val(barcode);
                $('#<%= btnRefresh.ClientID%>').click();
            },// main callback function

Thanks!

Answer 1

Put the method in the child-page as before, but named like this:

function detectionCompleted (barcode, qty) {
    $('#<%= txtBarcode.ClientID%>').val(barcode);
    $('#<%= btnRefresh.ClientID%>').click();
}

Now, just use that name in the master page like this:

...
onComplete: detectionCompleted
...

Alternatively, you can rely on css-class. Just use unique css class name for txtBarcode and btnRefresh and then use jQuery like this:

On the child page, add css-class txtBarcode and btnRefresh controls:

<asp:TextBox id="txtBarcode" class="barcode-textbox" />
<asp:Button id="btnRefresh" class="barcode-btn" />

Now, call in the master-page:

onComplete: function (barcode, qty) {
    $('.barcode-textbox').val(barcode);
    $('.barcode-btn').click();
}