Utilizing function arguments to retrieve values in JavaScript within the framework of CodeIgniter

I'm having an issue in my Ajax code where the values are not being stored in the items variable even though they are properly fetched and assigned to the values variable. Can anyone spot what I might be doing wrong?

Specifically, within the onload function, the values variable is showing up as undefined when alerted. Any assistance would be greatly appreciated. Thank you!

The code snippet in question is shown below:

<script type="text/javascript" language="javascript">
       var values;
     $.ajax({
                cache : false,
                type: "GET",
                url: 'chartvalues',
                format:'json',
                success: function(response)
                {
                    //alert(response);
                    values = response;
                    //alert (values);
                }
            });


    window.onload = function () {
            onLoadDoc();
    }

    var chart1;


    function onLoadDoc() {
            chart1 = new cfx.Chart();chart1.getAnimations().getLoad().setEnabled(true);


            var axisY = chart1.getAxisY();
            axisY.setMin(0);
            axisY.setMax(30);

            //----Assign data fields--------

            var fields = chart1.getDataSourceSettings().getFields();
            var field1 = new cfx.FieldMap();
            field1.setName("Value");
            field1.setUsage(cfx.FieldUsage.Value);
            fields.add(field1);
            var field2 = new cfx.FieldMap();
            field2.setName("Date");
            field2.setUsage(cfx.FieldUsage.XValue);
            fields.add(field2);

            chart1.setGallery(cfx.Gallery.Bar);

            //----Set Sample Data------------
            alert (values);
            var items = values;
            //alert (items);

            chart1.setDataSource(items);
            chart1.getView3D().setEnabled(true);



            var chartDiv = document.getElementById('ChartDiv1');
            chart1.create(chartDiv);
    }



    </script>

Answer โ„–1

There seems to be an issue with the current implementation. Please refer to the following example for a possible solution.

<script type="text/javascript" language="javascript">

  // Step 1
  // Retrieve data using ajax upon window load
  window.onload = function () {
    getAjaxData();
  }

  // Step 2
  // Call chart function after data retrieval
  function getAjaxData() {
    var values;
    $.ajax({
      cache : false,
      type  : "GET",
      url   : 'chartvalues',
      format:'json',
      success: function(values) {
        onLoadDoc(values);
      }
    });
  }

  // Step 3
  // Process the chart with the provided data
  function onLoadDoc(values) {
    var chart1;
    chart1 = new cfx.Chart();chart1.getAnimations().getLoad().setEnabled(true);
    var axisY = chart1.getAxisY();
    axisY.setMin(0);
    axisY.setMax(30);

    //----Assign data fields--------
    var fields = chart1.getDataSourceSettings().getFields();
    var field1 = new cfx.FieldMap();
    field1.setName("Value");
    field1.setUsage(cfx.FieldUsage.Value);
    fields.add(field1);
    var field2 = new cfx.FieldMap();
    field2.setName("Date");
    field2.setUsage(cfx.FieldUsage.XValue);
    fields.add(field2);

    chart1.setGallery(cfx.Gallery.Bar);

    //----Set Sample Data------------
    var items = values;
    chart1.setDataSource(items);
    chart1.getView3D().setEnabled(true);

    var chartDiv = document.getElementById('ChartDiv1');
    chart1.create(chartDiv);
  }

</script>

Answer โ„–2

Here's a helpful tip for you. To create a hidden field on your page, simply add the following code:

<input type="hidden" id="hidden_values">

Next, in the success section of your ajax function:

success: function(response)
{
    //alert(response);
    values = response;
    //alert (values);
    $("#hidden_values").val(values);  //store the values in the hidden field for later use
}

Within the onLoadDoc function:

alert ( $("#hidden_values").val(); );
var items = $("#hidden_values").val();

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

Facing issues with debugging JavaScript using WebStorm lately

Previously, I had no issues debugging JavaScript from WebStorm with the help of the JetBrains Chrome extension. It would effortlessly open a new tab in Chrome and launch my site without any trouble. However, after rebooting my computer due to a Windows up ...

Locate and eliminate the item containing specific content

There are many <p> &nbsp </p> tags scattered throughout the description. I need to locate and delete any tags that contain only &nbsp. The description is enclosed in a container with the class name of desc_container. Below is an exampl ...

Can the AJAX URL be loaded onto a new page?

https://i.stack.imgur.com/5l63v.pngPardon the poorly phrased question, but I need some guidance on a specific requirement regarding opening a URL in a new page. Currently, I have designed an AJAX URL and I'm wondering if it's possible to open thi ...

Enhance the appearance of Ionic popups

Can someone help me with resizing a pop up? I've been struggling to get it right. This is the popup template in question: <ion-view> <ion-content scroll="false" class=""> test </ion-content> < ...

Using Node.js to send instructions to an HTTP server in order to highlight or add color to specific elements within

I have set up a server that receives data from a gaze sensor, as well as an HTTP server that serves an HTML page. I am looking for a way to dynamically highlight elements in the HTML based on the incoming data. Any suggestions on what resources or techniqu ...

Having trouble with the dropdown feature on AngularJs?

Encountering an issue while trying to display the dropdown list. Upon inspecting in Chrome, it seems like the data is loading correctly but when clicked, the dropdown menu does not show up. The data is fetched from the BooksController and all options are ...

Tips for setting up an environmental variable in a node.js environment

I am a big fan of node.js, to the point where I want to incorporate it into my bash start up script ~/.bashrc. However, I am unsure of how to properly export variables. As of now, I am using this method: export PS1=`node ~/PS1.js` export PS2=`node ~/PS2. ...

Continue running the ajax request repeatedly until it successfully retrieves results

At the moment, I am using a basic ajax call to retrieve data from our query service api. Unfortunately, this api is not very reliable and sometimes returns an empty result set. That's why I want to keep retrying the ajax call until there are results ( ...

Is there a way to link a React component with cucumber.js?

I am looking to integrate React with Cucumberjs by creating a Word class that connects the App component. import { setWorldConstructor } from 'cucumber' import {render } from '@testing-library/react' import React from 'rea ...

using selenium to interact with elements within the window object

I'm a newcomer to selenium and javascript and looking to incorporate the VisualEvent javascript into pages opened in a selenium-controlled browser. My goal is to access its variables from selenium in java. I've successfully completed the first ph ...

The scale configuration for scale: x is not valid for creating a time scale chart using chart.js

I am currently utilizing VueJS and attempting to integrate a time scale chart using Chart.js. However, I encountered the following error: Invalid scale configuration for scale: x Below is my configuration : First, I have a component named Chart.vue with ...

"Efficiently refreshing multiple elements on a webpage using JSF (with Primefaces) through AJAX calls based on

Could you help with a JSF question, specifically regarding Primefaces? I am encountering an issue with updating elements using ajax by their ids simultaneously. When the elements on the page are processed one after another, the ajax updates work fine: & ...

The lightbox is triggered by clicking on a different div to display its content

Great news - my lightbox is up and running! Each image on my website corresponds to a different organization, and clicking on the image opens a specific lightbox. My question is: how can I have a lightbox configured so that only the trigger image is displ ...

Incorporating a fixed header title when creating a customizable table

I am working on creating a dynamic table with rows and columns based on JSON data. JSON: $scope.dataToShow=[ tableHeder=["First Name","Age"], { name:"rahim", age:23 }, ...

What is the best method for finding a button with an empty class name?

To access the search button on this page, follow this link: . Despite trying dr.findElement(By.cssSelector("button.button.cw-icon")), I was unable to locate the button labeled "ๆœ็ดข". Any suggestions on how to successfully locate it? ...

Using Javascript to dynamically update custom CSS properties

I am currently utilizing the paper-scroll-header-panel along with a custom CSS property paper-scroll-header-panel { --paper-scroll-header-panel-full-header: { background-image: url(images/abcd.jpg); }; } in order to customize th ...

What are the best practices for implementing React Hooks in a standalone React application?

Trying to incorporate React Hooks in a standalone UMD environment is proving to be challenging. The error message I am encountering reads: Uncaught Invariant Violation: Minified React error #307; This error leads me to the following link: https://react ...

JavaScript URL Redirect

How to redirect a URL using JavaScript? Here's the code I've been working on: function enter() { var continuePrompt = true; var url; while (continuePrompt) { continuePrompt = false; url = prompt("Please Ent ...

Leveraging CSS Modules alongside external packages

Below is the important section from my webpack.config.js file: module: { loaders: [ { test: /\.css$/, exclude: /node_modules/, loaders: [ "style-loader?sourceMap", "css-l ...

Implementing dynamic component swapping in Vue 3 using components from another component

I currently have a display component called app-display, which contains a dynamic component inside (by default, it is set to app-empty): app.component('appDisplay', { template: `<component :is="currentComponent"></c ...