unable to trigger the onchange function upon the loading of the window

window.onload = function (){
    $("#work_sanctioned_year").change();
};
    
$(document).ready(function(){
    $("#work_sanctioned_year").change();
}); 
    
    $("#work-sanctioned-year").change(function(){
        var work_sanctioned_year = $(this).val();
        alert(work_sanctioned_year);
        $.ajax({
            url: 'get_data.php',
                    type: 'post',
                    data: {work_sanctioned_year:work_sanctioned_year},
                    dataType: 'json',
                    
                    success:function(response){
                    FusionCharts.ready();
                    }
        });
        FusionCharts.ready(function() {
  var dataChart = new FusionCharts({
      "type": "overlappedBar2d",
      "renderAt": "chart-5",
      "width": '100%',
      "height": '400',
      "dataFormat": "json",
      "dataSource": {
        "chart": {
          "caption": "Major League Baseball - Season Rankings",
          "subCaption": "Teams in the Lead",
          "xAxisName": "Team",
          "yAxisName": "Position",
          "theme": "fusion",
          "showValues": "0"
        },
        "categories": [{
            "labelFontSize": "13",
          "category": [{
            "label": "Boston Red Sox"
          }, {
            "label": "New York Yankees"
          }, {
            "label": "Tampa Bay Rays"
          }, {
            "label": "Toronto Blue Jays"
          }, {
            "label": "Baltimore Orioles"
          }, {
            "label": "Cleveland Indians"
          }, {
            "label": "Detroit Tigers"
          }, {
            "label": "Minnesota Twins"
          }, {
            "label": "Chicago White Sox"
          }, {
            "label": "Kansas City Royals"
          }, {
            "label": "Cleveland Indians"
          }, {
            "label": "Detroit Tigers"
          }, {
            "label": "Minnesota Twins"
          }, {
            "label": "Chicago White Sox"
          }]
        }],
        "dataset": [{
          "seriesname": "Matches",
          "data": [{
            "value": parseInt(document.getElementById("work_sanctioned").value)-4650
          }, {
            "value": "84"
          }, {
            "value": "86"
          }, {
            "value": "86"
          }, {
            "value": "85"
          }, {
            "value": "85"
          }, {
            "value": "88"
          }, {
            "value": "83"
          }, {
            "value": "86"
          }, {
            "value": "86"
          }, {
            "value": "85"
          }, {
            "value": "88"
          }, {
            "value": "83"
          }, {
            "value": "86"
          }]
        }, {
          "seriesname": "Wins",
          "data": [{
            "value": "57"
          }, {
            "value": "54"
          }, {
            "value": "42"
          }, {
            "value": "39"
          }, {
            "value": "24"
          }, {
            "value": "46"
          }, {
            "value": "38"
          }, {
            "value": "35"
          }, {
            "value": "29"
          }, {
            "value": "25"
          }, {
            "value": "46"
          }, {
            "value": "38"
          }, {
            "value": "35"
          }, {
            "value": "29"
          }, {
            "value": "25"
          }]
        }]
      }
    })
    .render();
});

    });

After selecting an option from the dropdown, everything works fine. However, I am facing an issue when trying to call the function with the default value initially. I have attempted using both the window.onload method and the .ready function separately, but the function is still not being executed. Furthermore, there are no errors appearing in the console related to this problem, making it difficult to identify the root cause.

javascriptajax

Answer №1

    <script>
    function process_work(){
        console.log('onchange');
        var work_year = $("#work-year").val();
        alert(work_year);
        $.ajax({
            url: 'retrieve_data.php',
                    type: 'post',
                    data: {work_year:work_year},
                    dataType: 'json',
                    
                    success:function(response){
                    FusionCharts.ready();
                    }
        });
        FusionCharts.ready(function() {
  var dataChart = new FusionCharts({
      "type": "overlappedBar2d",
      "renderAt": "chart-5",
      "width": '100%',
      "height": '400',
      "dataFormat": "json",
      "dataSource": {
        "chart": {
          "caption": "Major League Baseball - Season Rankings",
          "subCaption": "Teams in the Lead",
          "xAxisName": "Team",
          "yAxisName": "Position",
          "theme": "fusion",
          "showValues": "0"
        },
        "categories": [{
            "labelFontSize": "13",
          "category": [{
            "label": "Boston Red Sox"
          }, {
            "label": "New York Yankees"
          }, {
            "label": "Tampa Bay Rays"
          }, {
            "label": "Toronto Blue Jays"
          }, {
            "label": "Baltimore Orioles"
          }, {
            "label": "Cleveland Indians"
          }, {
            "label": "Detroit Tigers"
          }, {
            "label": "Minnesota Twins"
          }, {
            "label": "Chicago White Sox"
          }, {
            "label": "Kansas City Royals"
          }, {
            "label": "Cleveland Indians"
          }, {
            "label": "Detroit Tigers"
          }, {
            "label": "Minnesota Twins"
          }, {
            "label": "Chicago White Sox"
          }]
        }],
        "dataset": [{
          "seriesname": "Matches",
          "data": [{
            "value": parseInt(document.getElementById("process_work").value)-4650
          }, {
            "value": "84"
          }, {
            &

quot;value": "86"
          }, {
            "value": "86"
          }, {
            "value": "85"
          }, {
            "value": "85"
          }, {
            "value": "88"
          }, {
            "value": "83"
          }, {
            "value": "86"
          }, {
            "value": "86"
          }, {
            "value": "85"
          }, {
            "value": "88"
          }, {
            "value": "83"
          }, {
            "value": "86"
          }]
        }, {
          "seriesname": "Wins",
          "data": [{
            "value": "57"
          }, {
            "value": "54"
          }, {
            "value": "42"
          }, {
            "value": "39"
          }, {
            &

quot;value": "24"
          }, {
            "value": "46"
          }, {
            "value": "38"
          }, {
            "value": "35"
          }, {
            "value": "29"
          }, {
            "value": "25"
          }, {
            "value": "46"
          }, {
            "value": "38"
          }, {
            "value": "35"
          }, {
            "value": "29"
          }, {
            "value": "25"
          }]
        }]
      }
    })
    .render();
});

    }
</script>

and then triggered this on window.onload as well as on select property onchange

<select id="process_work-year" onChange="process_work()" style="max-width:40%;min-width:20%; margin:auto;">
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
    </select>

lastly, on window.onload

  <script>
    window.onload = function (){
    
      process_work();
    };
    
    </script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering the art of smooth transitions between three animation sequence states using three.js in the animate loop

I want to achieve smooth transitions for the three different wing flapping sequences within a short period of time. Currently, the transitions appear abrupt as they jump from one state to another. The wings have 3 distinct states: 1) On the ground, 2) Flyi ...

javascriptcanvasthree.js

Using ng-repeat data to populate another function

I am looking to transfer the details of an order shown in an ng-repeat to another function within my controller. Currently, it works for the first item in the array. How can I extend this functionality to display any order currently visible on the page? W ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

When there is content behind the list, the Autosuggest Ajax does not function properly

I have successfully implemented an ajax/jquery dropdown/list feature that retrieves results from the database based on user input. For each result in the database, it generates a <li> element and converts it into a clickable link to redirect users t ...

javascriptphpjquerymysqlajax

Removing an article from a Vue.js localStorage array using its index position

I am facing an issue while trying to remove an item from localStorage. I have created a table to store all the added items, and I would like to delete a specific article either by its index or ideally by its unique id. Your assistance is greatly apprecia ...

javascriptvue.jslocal-storage

Purge existing files from the directory, generate fresh files, and retrieve the newly generated files using Node.js

For my latest project, I am working on a node application with a unique goal: The concept is simple - the user provides a link to a webpage and specifies some keywords. The application then generates new web pages based on these keywords. For example, if ...

javascriptnode.jsasync-awaitpromisesettimeout

Tips for dynamically populating a mat-table dataSource

While working with backend data streaming, I encountered an issue where trying to push an event to dataSource resulted in an error stating that dataSource is not defined. Can anyone provide guidance on how to dynamically add data to a materialize table? s ...

javascriptangularangular-material2angular5

"Sliding through pictures with Bootstrap carousel placed beneath the

Currently, I am working on a website that requires a background image, although I personally do not prefer it. The client's preference is to have the navbar transparent so that the background image shows through it. Now, I would like to incorporate a ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unraveling base64 information to display an image in Django using JavaScript

Why is the captured image only saving as a blank image when trying to encode and store it in a database from a canvas? Take a look at the following code snippet: const player = document.getElementById('player'); const docs = docu ...

javascriptdjangobase64video-capture

Total Tally of All UL Elements - Including Those Within Others

I'm currently working on using jQuery to count all <li> tags within a list, including the nested ones inside a separate <ul>. However, I have been unsuccessful so far and I haven't found a solution to this issue. In the example below, ...

javascripthtmljquery

How to bring RxJS 6 into your browser?

With the widespread support for JavaScript modules in all modern browsers, I am experimenting with importing code directly in the browser using import. Utilizing unpkg.com for npm modules and exploring the jspm project that converts npm modules into a form ...

javascriptnpmrxjsjspmunpkg

The function $(window).hashchange() is not functioning properly

Hey there, I've been exploring how to make use of the browser back button feature, and I've figured out how to capture the event using the hashchange plugin: $(window).hashchange( function(){ alert( location.hash ); });$(window).hashchange( ...

javascriptjqueryajax

Python and Javascript clashing with one another

(Updated question for clarity). I am currently developing a flask app game that involves users inputting guesses via the web browser. The backend, which runs on Python, checks these guesses and provides feedback to the user about their accuracy. Additional ...

javascriptpythonflask

Tips for saving the circular slider value to a variable and showcasing it in the console

I have coded a round slider and need assistance with storing the slider value in a variable and displaying it in the console using JavaScript. I want to store the tooltip value in a variable for future use. $("#slider").roundSlider({ radius: 180, min ...

javascripthtmlcssconsoleround-slider

What could be causing the minimal Angular setup with Lexical.dev to malfunction?

I recently tried to follow the guide on It all seemed pretty clear. import { createEditor } from 'lexical'; @Component({ selector: 'app-root', standalone: true, template: ` <div contenteditable="true" #editable& ...

javascriptangulartypescriptlexicaljs

JavaScript-enabled tests encountering issues (Bootstrap 3, Rails 4, Travis CI)

I'm encountering a strange error that only shows up in my CI environment. This error doesn't occur in development, production, or local test environments. ActionController::RoutingError: No route matches [GET] "/fonts/bootstrap/glyphicons-halfli ...

javascriptruby-on-railsruby-on-rails-4twitter-bootstrap-3travis-ci

Showing specific XML data from a node when a button is clicked in an HTML document

<script> $(document).ready(function(){ $.ajax({ type: "GET", url: "data.xml", dataType: "xml", success: function(xmlData) { $("POS", xmlData).each(function(){ var sr = $(this).find(&apos ...

javascriptajaxxml

Vuejs: Limiting the number of items in an li tag to 5

selectPreviousSearch(index) { this.search = this.searchHistory[index]; this.showSearchHistory = false; }, <input class="form-control bg-light-blue" id="SearchText" type="text" v-model="search" @keydown.enter = 'ent ...

javascriptvue.js

Extract information from Excel files using the js-xlsx library

I am currently utilizing the js-xlsx library. If necessary, you can access my excel sheet here. The code I have implemented is as follows: /* setting up XMLHttpRequest */ var url = "Test.xlsx"; var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); ...

javascriptarraysjsonexcel

Fetch data from an API using JavaScript and load a JSON file

I'm currently facing an issue with this specific problem: I am attempting to retrieve the JSON file from using the following code: $("document").ready(function () { // Triggering function reLoad(); function reLoad() { $.getJSON( ...

javascriptjsonapiget

What methods can be used to ensure that Django views only accept ajax requests?

I am trying to restrict general POST requests and only accept ajax requests. class CustomerInfoCheckView(View): def post(self, request, *args, **kwargs): # Handling Customer Info Form using ajax request if request.is_ajax(): ...

ajaxdjango