javascript — создает canvasjs при отправке на динамически генерируемом элементе

Создать canvasjs при отправке на динамически сгенерированном элементе

НОВИНКА для javascript, jquery и CanvasJS!

Вот моя проблема:

Как вы можете заметить, я собираюсь представить кучу данных с помощью ajax. Поскольку некоторые из них не существуют, я собираюсь прикрепить событие к отправке, чтобы оно заработало.

Теперь моя проблема с диаграммой: я использую CanvasJS для создания своей диаграммы, и непосредственно перед созданием кода я динамически создал div с помощью id chartContainer, и сразу после этого я инициирую корзину с функцией CanvasJS. .Диаграмма().

Проблема в том, что, если я создаю div в html-файле, код будет работать, но если я создам div в скрипте, код завершится ошибкой, потому что:

Ошибка CanvasJS: Контейнер диаграммы с идентификатором «chartContainer» не найден.

Как я могу преодолеть проблему?

 $(document).ready(function() { $(document).on('submit', 'form', function(event) { $.ajax({ type: 'POST', url: $(this).attr("action"), data: $(this).serialize(), dataType: 'json', encode: true }).done(function(data) { var result = data.kg / Math.pow((data.centimeter / 100), 2); var result3 = result.toFixed(2); var result2 = '{amp}lt;div class="results"{amp}gt;'   result.toFixed(2); result2  = '{amp}lt;div id="clickhere"{amp}gt;back{amp}lt;/div{amp}gt;'; if (result {amp}gt; 25) { result2  = '{amp}lt;div{amp}gt;Your should loose at least the 5% of your weight{amp}lt;/div{amp}gt;' } else if (result {amp}gt; 18.5) { result2  = '{amp}lt;div{amp}gt;Your weight is ideal{amp}lt;/div{amp}gt;' } else { result2  = '{amp}lt;div{amp}gt;You're underweight, you should take integrate your diet with different food and eat more often{amp}lt;/div{amp}gt;' } result2  = '{amp}lt;div id="chartContainer"{amp}gt;{amp}lt;/div{amp}gt;' var gauge = { title: { text: "BMI" }, data: { y: result3 }, maximum: 30 }; var chart = new CanvasJS.Chart("chartContainer"); createGauge(chart); function createGauge(chart) { gauge.unoccupied = { y: gauge.maximum - gauge.data.y, color: "#e3e3e3", toolTipContent: null, highlightEnabled: false, click: function() { gauge.unoccupied.exploded = true; } } gauge.data.click = function() { gauge.data.exploded = true; }; if (!gauge.data.color) gauge.data.color = "#6b58f2"; gauge.valueText = { text: gauge.data.y.toString(), verticalAlign: "center" }; var data = { type: "doughnut", dataPoints: [{ y: gauge.maximum, color: "transparent", toolTipContent: null }, gauge.data, gauge.unoccupied ], }; if (!chart.options.data) chart.options.data = []; chart.options.data.push(data); if (gauge.title) { chart.options.title = gauge.title; } if (!chart.options.subtitles) chart.options.subtitles = []; chart.options.subtitles.push(gauge.valueText); chart.render(); } result2  = '{amp}lt;/div{amp}gt;'; var clickhere = $('#clickhere'); var form = $('form'); $('form').replaceWith(result2); $(document).on("click", "#clickhere", function() { $('.results').remove(); }); }); event.preventDefault(); }); }); 
 {amp}lt;form action="/send.php" id="formid" method="post"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;h3 class="col-md-9"{amp}gt;Height{amp}lt;/h3{amp}gt; {amp}lt;p class="switch col-md-3"{amp}gt;cm{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="antbits-bmi-form_section_layer antbits-bmi-metric"{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label for="antbits-bmi-cm" class="antbits-bmi-form_section_label"{amp}gt;Centimetres{amp}lt;/label{amp}gt; {amp}lt;input class="form-control" id="antbits-bmi-cm" aria-describedby="antbits-bmi-form_height-error" alt="height, centimeters" inputmode="numeric" type="text" step="0.1" min="0" maxlength="5" name="centimeter" placeholder="cm" required=""{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;h3 class="col-md-9"{amp}gt;Weight{amp}lt;/h3{amp}gt; {amp}lt;p class="col-md-3 switch"{amp}gt;st, lb{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="antbits-bmi-form_section_layer antbits-bmi-imperial"{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label for="antbits-bmi-kg" class="antbits-bmi-form_section_label"{amp}gt;Kg{amp}lt;/label{amp}gt; {amp}lt;input class="form-control" id="antbits-bmi-kg" placeholder="Kg" alt="kg" type="text" inputmode="numeric" min="0" maxlength="2" name="kg" required=""{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;h3{amp}gt;Age{amp}lt;/h3{amp}gt; {amp}lt;div class="antbits-bmi-form_section_inner"{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label for="antbits-bmi-age" class="antbits-bmi-form_section_label antbits-accessible_hidden"{amp}gt;Age in years{amp}lt;/label{amp}gt; {amp}lt;select class="form-control" id="age" name="age" required=""{amp}gt;{amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;h3{amp}gt;Sex{amp}lt;small{amp}gt;?{amp}lt;/small{amp}gt;{amp}lt;/h3{amp}gt; {amp}lt;div class="info hide"{amp}gt; {amp}lt;h3{amp}gt;Sex{amp}lt;small{amp}gt;?{amp}lt;/small{amp}gt;{amp}lt;/h3{amp}gt; {amp}lt;p{amp}gt;For children, BMI centile is gender specific. For both children and adults, we give more personalised information based on whether you are male or female.{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="radio-click row height"{amp}gt; {amp}lt;div class="radio-inline col-md-6 checked" id="male"{amp}gt; {amp}lt;input type="radio" name="optradio" value="male"{amp}gt;Male {amp}lt;/div{amp}gt; {amp}lt;div class="radio-inline col-md-6" id="female"{amp}gt; {amp}lt;input type="radio" name="optradio" value="female"{amp}gt;Female {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;h3{amp}gt;Ethnic Group (optional){amp}lt;small{amp}gt;?{amp}lt;/small{amp}gt;{amp}lt;/h3{amp}gt; {amp}lt;div class="info hide"{amp}gt; {amp}lt;h3{amp}gt;Ethnic{amp}lt;/h3{amp}gt; {amp}lt;p{amp}gt;Black, Asian and other minority ethnic groups with a BMI of 23 or more have a higher risk of getting type 2 diabetes and other long term illnesses.{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;select class="form-control" id="antbits-bmi-ethnicity" alt="Ethnic group" name="ethnic" required=""{amp}gt; {amp}lt;option disabled selected value class="antbits-bmi-form_option"{amp}gt;Not stated{amp}lt;/option{amp}gt; {amp}lt;option value="2" class="antbits-bmi-form_option"{amp}gt;White{amp}lt;/option{amp}gt; {amp}lt;option value="3" class="antbits-bmi-form_option"{amp}gt;Black Caribbean{amp}lt;/option{amp}gt; {amp}lt;option value="4" class="antbits-bmi-form_option"{amp}gt;Black African{amp}lt;/option{amp}gt; {amp}lt;option value="5" class="antbits-bmi-form_option"{amp}gt;Indian{amp}lt;/option{amp}gt; {amp}lt;option value="6" class="antbits-bmi-form_option"{amp}gt;Pakistani{amp}lt;/option{amp}gt; {amp}lt;option value="7" class="antbits-bmi-form_option"{amp}gt;Bangladeshi{amp}lt;/option{amp}gt; {amp}lt;option value="8" class="antbits-bmi-form_option"{amp}gt;Chinese{amp}lt;/option{amp}gt; {amp}lt;option value="9" class="antbits-bmi-form_option"{amp}gt;Middle Eastern{amp}lt;/option{amp}gt; {amp}lt;option value="10" class="antbits-bmi-form_option"{amp}gt;Mixed{amp}lt;/option{amp}gt; {amp}lt;option value="11" class="antbits-bmi-form_option"{amp}gt;Other{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-md-12"{amp}gt; {amp}lt;h3{amp}gt;Activity Level{amp}lt;/h3{amp}gt; {amp}lt;p{amp}gt;So we can personalize your results{amp}lt;/p{amp}gt; {amp}lt;div class="slidercontainer"{amp}gt; {amp}lt;input type="range" min="0" max="150" value="75" class="slider" id="myRange" name="range"{amp}gt; {amp}lt;div class="row center height activity"{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;p{amp}gt;Inactive{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;p{amp}gt;Moderate Active{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;p{amp}gt;Active{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="row center height"{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;p{amp}gt;Less than 30 minutes a week{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;p{amp}gt;Between 30 and 60 minutes a week{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;p{amp}gt;Between 60 and 150 minutes a week{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;p{amp}gt;Value: {amp}lt;span id="demo"{amp}gt;{amp}lt;/span{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!-- {amp}lt;div id="chartContainer"{amp}gt;{amp}lt;/div{amp}gt; --{amp}gt; {amp}lt;div class="center"{amp}gt; {amp}lt;input type="submit" value="Calculate"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/form{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector