4

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?

2
  • 1
    Please edit your post to be more explicit about what you mean by not rendering properly. – Adrian Larson May 20 '16 at 13:32
  • What you mean by reload? Once the page is loaded, again you want to reload the page or call again the JavaScript functions? And even if you want to call the JavaScript functions, what would it serve as its already done its job one time? – orangeguy May 20 '16 at 14:00
3

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.

1
3

If you just want to reload the page you can use

window.location.reload

2
1

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.