Revise your script to use the element "ID" or "name" attribute instead.

This is required because AJAX DataPages have wrappers around the rendered content. For example:

<div id="cbOuterAjaxCtnr_123456789">
</div>

Revise your code to refer to the "name" attribute. For example:

• If your JavaScript uses document.getElementById("SearchID") to refer to the search button, change it to document.getElementsByName("SearchID")[0].
• If you are using jQuery, you can refer to the "name" attribute using $("[name=’value’]").
• If you are using CSS, you can refer to the "name" attribute using input[name="button name"] { }.

Note: Alternatively, if you want to continue using “ID” attributes, you can perform additional updates to account for ID values containing dynamic suffixes.

If your script contains an onsubmit event, for example:

<script type="text/javascript">
window.onsubmit = function() {
// do something
};
</script>

replace the onsubmit event in your script with Caspio’s built-in event handler:

<script type="text/javascript">
document.addEventListener('BeforeFormSubmit', function (event) {
// do something
});
</script>

If your script contains an onload event (using JavaScript or jQuery), for example:

<script type="text/javascript">
window.onload = function() {
// do something
};
</script>

Or

<script type="text/javascript">
$( document ).ready(function(){
// do something
});
</script>

replace the onload event with Caspio’s built-in event handler:

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
// do something  
});
</script>

You can also use event.detail.appKey or event.detail.uniqueSuffix to define the DataPage event for executing specific functions:

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
       if (event.detail.appKey == 'MY_DATAPAGE_APPKEY') {
              //do something 
       } else if (event.detail.appKey == 'MY_WEB_FORM_APPKEY')    {
              //do something
    }
});
</script>