How do I reload all JavaScript on the page using oncomplete?

Question

I want to reload all this javascript/jquery. I tried sticking it in a function but it doesn't seem to be rendering properly.

<script type="text/javascript">
    var $ = jQuery.noConflict();
    console.log('jQuery loaded successfully');

    $(document).ready(function()
    {
        $('[id$=opportunityTable]').dataTable(
        {
            "bJQueryUI": true
        });
    });

    //var $ = jQuery.noConflict();
    console.log('{!dataString}');
    var tooltipMap = $.parseJSON('{!mapJSON}');
    console.log('tooltipMap');

    $(function()
    {

        $('#from').datepicker(
        {
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function(selectedDate)
            {
                $('#to').datepicker("option", "minDate", selectedDate);
            }
        });

        $('#to').datepicker(
        {
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function(selectedDate)
            {
                $('#from').datepicker("option", "maxDate", selectedDate);
            }
        });
        console.log('Datepicker configuration loaded successfully');

        /*setting Default jQuery Dates*/
        $('#from').datepicker('setDate', '0');
        $('#to').datepicker('setDate', '+90d');
        console.log('Datepicker default dates loaded successfully');


        /*jQuery to handle filter Click*/
        $("#filterButton").click(function()
        {
            passDateValues($('#from').val(), $('#to').val());
            console.log('Filter Button click event got fired');
            console.log('Parameters Passed: ' + 'From: ' + $('#from').val() + '  To: ' + $('#to').val());
        });

        $('[id$=filterHelpTextID]').tooltip();
        console.log('Tooltip loaded successfully');

        //heatMap();

        $('#container').highcharts(
        {

            chart:
            {
                type: 'heatmap',
                marginTop: 100,
                marginBottom: 25,
                plotBorderWidth: 1
            },


            title:
            {
                text: ' '

            },

            exporting:
            {
                sourceWidth: 2000,
                sourceHeight: 700,
            },

            xAxis: [
            {
                categories:
                {!fieldLabels
                },
                gridLineWidth: 1,
                gridZIndex: 4,
                opposite: true,

                labels:
                {
                    autoRotation: false
                }
            }],

            yAxis:
            {
                gridLineWidth: 1,
                gridZIndex: 4,
                categories:
                {!OpportunityNames
                },
                title:
                {
                    text: 'Opportunity'
                },


            },

            plotOptions:
            {
                series:
                {
                    colorByPoint: true,
                    colors: ['#FFFFFF', '#9BC2E6', '#FFE699', '#A9D08E', '#AEAAAA', '#CC66FF'],
                    states:
                    {
                        hover:
                        {
                            enabled: false
                        }
                    }
                }

            },

            legend:
            {
                enabled: false,
            },

            series: [
            {
                name: 'Heat Map Values',
                borderWidth: 1,
                data:
                {!dataString
                },
            }],


            credits:
            {
                enabled: false
            }


        });
    });
</script>

As mentioned, I tried putting all the code into one javascript function and calling it during oncomplete.Does the no.Conflict() affect this?

Answer 1

As per the title, you're looking to call a JS function on a VF page. Try this if it helps if you're looking for calling the JS function one time.

<apex:actionSupport oncomplete="callJSfunction();" event="onchange" action="{!SomeApexMethodIfAny}" rerender="SomeId" />

<script>

function callJSfunction()
{

//Your whole above JS code

}

<script>
</apex>

If you're looking to call the JavaScript one time, above way should help you.

Answer 2

If you just want to reload the page you can use

window.location.reload

Answer 3

You can try putting all script in <apex:outputpanel> and try rerendering that panel instead of using oncomplete.