时间戳

首页 > 解决方案 > .load() jQuery 函数返回空白 div

javascript - .load() jQuery 函数返回空白 div

问题描述

提前感谢您的任何帮助！

我正在使用Crypto Charts库构建一个加密相对强弱指标工具。我已经在开始的 90 天时间范围内加载了一些硬币的图表。最终目标是从用户那里获得两个输入：

  1. 将新硬币添加到相对强弱工具中
  2. 更改相对强弱工具的时间范围

现在，我可以向 altcoin 数组添加一个新硬币addedAlt，以及更改timeframe变量的时间范围。我现在遇到的问题是，当使用 jQuery函数仅刷新div时，加密图表 <div id="mychart"></div>没有加载回来。$( "#mychart" ).load(window.location.href + " #mychart" );#mychart

我能够成功地更改数据（通过检查console.log()），但我无法弄清楚如何仅更新/刷新#mychartdiv，以便用户可以看到他们在时间范围内所做的更改并将他们最喜欢的 alt 添加到图表中以查看它的相关性强/弱。

非常感谢任何帮助！

HTML：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Relative Strength/Weakness Tool</title>

    <link rel="stylesheet" href="/style.css">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/cryptocharts"></script>

</head>

<body>

    <div class="btn-div"><button class="back-btn"><a href="https://www.binance.com/">Home</a></button></div>
    <h1>Relative Strength/Weakness Tool</h1>
    
    <div id="mychart"></div>

    <form class="timeframe-form">

        <input type="number" class="timeframe" placeholder="90">
        <br>
        <input type="button", class="timeframe-btn" value="Change Timeframe (# of days)" onclick="changeTimeframe()">

    </form>

    <div class="rswtest">

        <p class="rswtest-title">Add Your Favourite Crypto In The Box Below</p>

        <form class="addAltform">

            <input type="numbers" placeholder="XRP" id="submitbox">

            <input type="button" onclick="newData()" id="submit-btn" value="Add Altcoin">

        </form>

    </div>

    <script src="/chart.js"></script>

</body>

</html>

Javascript

// This is the list of default alts that we have on the chart
var defaultAlts = ["BTC", "ETH", "ADA", "BNB", "XRP", "UNI", ];


// This is the code to add the defaultAlts and submittedAlts together to form the totalList, which is what is showing on the chart.

var addedAlt = [];

var totalList = addedAlt.concat(defaultAlts);

function newData() {
    var newAlt = document.getElementById("submitbox").value;

    var addedAlt = [newAlt];
    
    var totalList = addedAlt.concat(defaultAlts);

    console.log(totalList);

    $( "#mychart" ).load(window.location.href + " #mychart" );

};


// This is where I am creating the timeframe button so the user can change the timeframe of the tool

var timeframe = [90];

function changeTimeframe() 
{
    var newTimeframe = document.getElementsByClassName("timeframe")[0].value;
    var timeframeInteger = parseInt(newTimeframe);
    timeframe.splice(0, 1, timeframeInteger);

    console.log(timeframe);


    // I am currently struggling to find a way to reload the page in order to update the div #mychart. The function below is using jQuery & AJAX to be able to use the $ feature which allowes me to select a particular object/ID/class. I almost have it, I can reload the mychart ID, I just can't get it to pop up again. It just shows a blank screen

    // $( "#mychart" ).load(window.location.href + " #mychart" );

};

// This is the code to retreive the data, as well as the charting library for the relative strnegth/weakness chart. You can find more detail here: icnhodler.github.io/CryptoCharts/#/roi-charts/demos
//person.firstName

CryptoCharts.roiComparison({
    chart_id: "mychart",
    cryptocompare_tickers: totalList,
    last_days: timeframe,
    options: {
      colors: ["#88AA24","#EF1273","#122673","#000000"],
      title: true,
      chart: {
        type: 'line'
      }
    }
});

标签： javascripthtmljquery

解决方案

当您更改数据时，您将不得不重新创建图表。#mychart是一个空的 div，所以重新加载它什么都不做。

function newData() {
    var newAlt = document.getElementById("submitbox").value;

    var addedAlt = [newAlt];
    
    var totalList = addedAlt.concat(defaultAlts);

    console.log(totalList);
    $( "#mychart" ).empty();// empty div to be safe
    CryptoCharts.roiComparison({
        chart_id: "mychart",
        cryptocompare_tickers: totalList,
        last_days: timeframe,
        options: {
            colors: ["#88AA24","#EF1273","#122673","#000000"],
            title: true,
            chart: {
                type: 'line'
            }
        }
    });

}

推荐阅读