how to use raw data in js editor

This thread is resolved. Here is a description of the problem and solution.

Problem:

A user reported that he is trying to get the values from Types Fields API in a custom script, but it doesn't seem to work.

Solution:

Suggested to output those custom field values in hidden HTML elements on the page and then read them in the custom script, as needed.

Relevant Documentation:

https://toolset.com/documentation/customizing-sites-using-php/functions/

This support ticket is created 2 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: Content Templates, Toolset Blocks, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by kimheleek 2 years, 10 months ago.

Assisted by: Waqar.

Author

Posts

March 25, 2022 at 3:16 am #2326545

kimheleek

Tell us what you are trying to do?
I'm trying to make chart in content template

my html
<ul class="port-charts-wrap">

my js

new Chart(document.getElementById("doughnut-chart1"), {
type: 'doughnut',
data: {
datasets: [{
backgroundColor: ["#3e95cd", "#232323"],
borderColor: "#000",
borderWidth: "1px",
data: ["[types field='s-charts' output='raw'][/types]",60] !!!!!!<< this is not work
}]
},
options: {
title: {
display: true,
text: '스튜디오'
}
}
});
new Chart(document.getElementById("doughnut-chart2"), {
type: 'doughnut',
data: {
datasets: [{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#232323"],
borderColor: "#000",
borderWidth: "1px",
data: ["[types field='d-charts' output='raw'][/types]",40] !!!!!!<< this is not work
}]
},
options: {
title: {
display: true,
text: '드레스'
}
}
});
new Chart(document.getElementById("doughnut-chart3"), {
type: 'doughnut',
data: {
datasets: [{
height:"0",
backgroundColor: ["#3e95cd", "#232323"],
borderColor: "#000",
borderWidth: "1px",
data: ["[types field='m-charts' output='raw'][/types]",90] !!!!!!<< this is not work
}]
},
options: {
title: {
display: true,
text: '헤어메이크업'
}

}
});

What is the link to your site?
hidden link

March 25, 2022 at 6:07 am #2326643

Waqar

Hi,

Thank you for contacting us and I'd be happy to assist.

The shortcodes, like the 'types' shortcode for the fields, can't be used directly inside the JS editor scripts.

As a workaround, you can output these field values in the content template's content part, inside special hidden span tags, for example:


<span id="s-charts-value" style="display:none;">[types field='s-charts' output='raw'][/types]</span>
<span id="d-charts-value" style="display:none;">[types field='d-charts' output='raw'][/types]</span>
<span id="m-charts-value" style="display:none;">[types field='m-charts' output='raw'][/types]</span>

Next, these values from the hidden span tags can be used in the script, like this:


var sChartVal = jQuery("span#s-charts-value").text();
var dChartVal = jQuery("span#d-charts-value").text();
var mChartVal = jQuery("span#m-charts-value").text();

new Chart(document.getElementById("doughnut-chart1"), {
    type: 'doughnut',
    data: {
      datasets: [{
        backgroundColor: ["#3e95cd", "#efefef"],
         borderColor: "#efefef",
        borderWidth: "0px",
        data: [sChartVal,60]
      }]
    },
    options: {
      title: {
        display: true,
        text: '스튜디오'
      }
    }
});
new Chart(document.getElementById("doughnut-chart2"), {
    type: 'doughnut',
    data: {
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#3e95cd", "#efefef"],
        borderColor: "#efefef",
        borderWidth: "0px",
        data: [dChartVal,40]
      }]
    },
    options: {
      title: {
        display: true,
        text: '드레스'
      }
    }
});
new Chart(document.getElementById("doughnut-chart3"), {
    type: 'doughnut',
    data: {
      datasets: [{
        height:"0",
        backgroundColor: ["#3e95cd", "#efefef"],
        borderColor: "#efefef",
        borderWidth: "0px",
        data: [mChartVal,90]
      }]
    },
    options: {
      title: {
        display: true,
        text: '헤어메이크업'
      }  
   
    }
});

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

March 25, 2022 at 7:22 am #2326677

kimheleek

My issue is resolved now. Thank you!
Easy and fast