I'm trying to make a button to a function. When I click the button, it won't display the output
Here is my button view
<button wire:click="edit({{ $data->id }})" class="btn btn-primary btn-sm">Edit</button>
Here is my function
public function edit($id){ dd('$id');}
and here is my layout
<div class="container-fluid">
#yield('page')
#yield('update')
</div>
<script>var HOST_URL = "https://keenthemes.com/metronic/tools/preview";</script>
<script>var KTAppSettings = { "breakpoints": { "sm": 576, "md": 768, "lg": 992, "xl": 1200, "xxl": 1200 }, "colors": { "theme": { "base": { "white": "#ffffff", "primary": "#8950FC", "secondary": "#E5EAEE", "success": "#1BC5BD", "info": "#8950FC", "warning": "#FFA800", "danger": "#F64E60", "light": "#F3F6F9", "dark": "#212121" }, "light": { "white": "#ffffff", "primary": "#E1E9FF", "secondary": "#ECF0F3", "success": "#C9F7F5", "info": "#EEE5FF", "warning": "#FFF4DE", "danger": "#FFE2E5", "light": "#F3F6F9", "dark": "#D6D6E0" }, "inverse": { "white": "#ffffff", "primary": "#ffffff", "secondary": "#212121", "success": "#ffffff", "info": "#ffffff", "warning": "#ffffff", "danger": "#ffffff", "light": "#464E5F", "dark": "#ffffff" } }, "gray": { "gray-100": "#F3F6F9", "gray-200": "#ECF0F3", "gray-300": "#E5EAEE", "gray-400": "#D6D6E0", "gray-500": "#B5B5C3", "gray-600": "#80808F", "gray-700": "#464E5F", "gray-800": "#1B283F", "gray-900": "#212121" } }, "font-family": "Poppins" };</script>
<script src="dist/assets/plugins/global/plugins.bundle.js?v=7.0.4"></script>
<script src="dist/assets/plugins/custom/prismjs/prismjs.bundle.js?v=7.0.4"></script>
<script src="dist/assets/js/scripts.bundle.js?v=7.0.4"></script>
<script src="dist/assets/plugins/custom/fullcalendar/fullcalendar.bundle.js?v=7.0.4"></script>
<script src="//maps.google.com/maps/api/js?key=AIzaSyBTGnKT7dt597vo9QgeQ7BFhvSRP4eiMSM?v=7.0.4"></script>
<script src="dist/assets/plugins/custom/gmaps/gmaps.js?v=7.0.4"></script>
<script src="dist/assets/js/pages/widgets.js?v=7.0.4"></script>
#livewireScripts
Related
I have an issue when I want to display a chart on my web page using django and highcharts. This is my detail.html file.
I have an error called property assignment expected on the side of my curly brackets here :
_dateList={{dateList|safe}};
_price={{price.room.actual_rate.amount}};
_availability={{availability}};
Here is the all file
<h1>{{property.name}}</h1>
<h2>{{roomtype.name}}</h2>
<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script>
_dateList={{dateList|safe}};
_price={{price.room.actual_rate.amount}};
_availability={{availability}};
Highcharts.chart('container', {
title: {
text: 'Pricing model prevision'
},
xAxis: {
categories: _dateList
},
yAxis: [{
title: {
text: 'Price',
style: {
color: Highcharts.getOptions().colors[2]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[2]
}
}
}, {
title:{
text:'Occupancy',
style:{
color: Highcharts.getOptions().colors[0]
}
},
labels:{
style:{
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'price',
data: _price
}, {
name: 'availabilty',
data: _availability
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
<ul>
{% for day in dayList %}
{% if day.availability.room %}
<li>{{day.date}}:{{day.allotment}}:{{day.pricing.room.actual_rate.amount}} </li>
{% else %}
<li>{{day.date}}:0 </li>
{% endif %}
{% endfor %}
</ul>
Can you help me with this issue?
thank you for your help,
Best
If you add quotation marks, as shown below, it should work:
_dateList='{{dateList|safe}}';
Without quotation marks, it is interpreted as a variable. With quotation marks, it is interpreted as a string.
My server is returning a json data and I have no problem loading the models (page.js, event.js, choice.js) with Ember Data. But when the form is submitted, the JSON data submitted to the server doesn't contain the related models (event.js, choice.js).
Below are my files and the json data.
Json data returned by backend api:
{
"data": {
"type": "pages",
"id": "12345",
"attributes": {
"guest_id": null,
"name": null,
"email": null,
"address": null
},
"relationships": {"events": {"data": [
{
"type": "events",
"id": "67891"
},
{
"type": "events",
"id": "90908"
}
]}}
},
"included": [
{
"type": "events",
"id": "67891",
"attributes": {
"event_id": "67891",
"name": "Event 1"
},
"relationships": {"choices": {"data": [
{
"type": "choices",
"id": "67891-11111"
},
{
"type": "choices",
"id": "67891-22222"
}
]}}
},
{
"type": "events",
"id": "90908",
"attributes": {
"event_id": "90908",
"name": "Event 2"
},
"relationships": {"choices": {"data": [
{
"type": "choices",
"id": "90908-11111"
},
{
"type": "choices",
"id": "90908-22222"
}
]}}
},
{
"type": "choices",
"id": "67891-11111",
"attributes": {
"choice_id": "67891-11111",
"name": "Diet choice",
"value": "0"
},
"relationships": null
},
{
"type": "choices",
"id": "",
"attributes": {
"choice_id": "67891-22222",
"name": "No. of adult guest",
"value": "0"
},
"relationships": null
}
{
"type": "choices",
"id": "90908-11111",
"attributes": {
"choice_id": "90908-11111",
"name": "Diet choice",
"value": "0"
},
"relationships": null
},
{
"type": "choices",
"id": "90908-22222",
"attributes": {
"choice_id": "90908-22222",
"name": "No. of adult guest",
"value": "0"
},
"relationships": null
}
]
}
JSON data submitted to the server
{
"data": {
"id":"e47e8358-0f18-4607-b958-2877155bf5be",
"attributes":{
"guest_id":null,
"name":"my name",
"email":"myemail#gmail.com",
"address":"myaddress"
},
"relationships":{
"events":{
"data":[
{
"type":"events",
"id":"67891"
},
{
"type":"events",
"id":"90908"
}
]
}
},
"type":"pages"
}
}
/pages/show.hbs
<p>
<label>Name: </label>
{{input type="text" value=model.name id="name"}}
</p>
{{#each model.events as |event|}}
<h3>
{{event.name}}
<!-- Rounded switch -->
<label class="switch">
<input type="checkbox" class="switch_input" id="{{event.id}}">
<span class="slider round"></span>
</label>
</h3>
{{#each event.choices as |choice|}}
{{#if (is-equal choice.name "Diet choice")}}
<p>
<label for="diet_choice">{{choice.name}}:</label>
<select id="diet_choice" value=choice.value>
<option value="anything">Anything and Everything</option>
<option value="vegetarian">Vegetarian</option>
<option value="hala">Hala</option>
</select>
</p>
{{/if}}
{{#if (is-equal choice.name "No. of adult guest")}}
<p>
Adult guest
<div>
<button type="button" name="btnMinusGuest" {{action "minusCounter" choice 0 "Minimum 0 guest"}}>-</button>
{{input type="text" value=choice.value}}
<button type="button" name="btnPlusGuest" {{action "addCounter" choice 1 "Maximum 1 guest"}}>+</button>
</div>
</p>
{{/if}}
{{/each}}
{{/each}}
<p>
<label for="email">Email:</label>
{{input type="text" value=model.email}}
</p>
<p>
<label for="address">Address:</label>
{{input type="text" value=model.address}}
</p>
<p>
<input type="submit" name="btnSubmit" value="Submit" {{action "submit"}} />
<input type="submit" name="btnCancel" value="Cancel" {{action "cancel"}} />
</p>
{{outlet}}
/routes/pages/show.js
import Route from '#ember/routing/route';
export default Route.extend({
queryParams: {
event: ''
},
model(params) {
return this.get('store').findRecord('page', params.page_id, { adapterOptions: {query: {'event': params.event}}});
},
actions: {
submit() {
// Create rec
page.save().then(function() {
console.log('submitted');
}).catch(function(reason) {
console.log(reason);
});
},
cancel() {
alert("Are you sure?");
},
addCounter(item, max_val, msg) {
let current_val = parseInt(item.get('value'));
if (current_val >= max_val) {
alert(msg)
} else {
item.set('value', current_val + 1);
}
},
minusCounter(item, min_val, msg) {
let current_val = parseInt(item.get('value'));
if (current_val <= min_val) {
alert(msg);
} else {
item.set('value', current_val - 1)
}
},
}
});
/models/page.js
import DS from 'ember-data';
export default DS.Model.extend({
guest_id: DS.attr(),
name: DS.attr(),
email: DS.attr(),
address: DS.attr(),
is_e_invite: DS.attr(),
data_time_submitted: DS.attr(),
events: DS.hasMany('event')
});
/models/event.js
import DS from 'ember-data';
export default DS.Model.extend({
event_id: DS.attr(),
name: DS.attr(),
choices: DS.hasMany('choice')
});
/models/choice.js
import DS from 'ember-data';
export default DS.Model.extend({
choice_id: DS.attr(),
name: DS.attr(),
value: DS.attr()
});
One way to solve it, is to save each model independently, as #Lux has said in a comment, but you can also write a custom serializer which will semi-manually prepare a data to be pushed after saving a parent model.
Assuming you're using ember-data, it should probably look something like this (see https://guides.emberjs.com/v3.0.0/models/customizing-serializers/):
Create a file called serializers/page.js and put there:
import DS from 'ember-data';
export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
attrs: {
events: {embedded: 'save'}
},
serializeIntoHash: function (data, type, record, options) {
const object = this.serialize(record, options);
for (let key in object) {
data[key] = object[key];
}
},
serializeHasMany: function (record, json, relationship) {
const key = relationship.key;
const hasManyRecords = record.hasMany(key);
if (!hasManyRecords || !this.attrs[key] || this.attrs[key].embedded !== 'save') {
return this._super(record, json, relationship);
}
json[key] = [];
hasManyRecords.forEach(item => {
let recordData = item.serialize({includeId: true});
if (relationship.options.deepEmbedded) {
relationship.options.deepEmbedded.forEach(deepKey => {
if (!item.hasMany(deepKey)) {
return true;
}
const deepRecords = item.hasMany(deepKey);
recordData[deepKey] = [];
deepRecords.forEach(deepRecord => {
recordData[deepKey].push(deepRecord.serialize({includeId: true}));
});
});
}
json[key].push(recordData);
});
}
});
and in your page model change events: DS.hasMany('event') to events: DS.hasMany('event', {deepEmbedded: ['choices']}).
Above serializer tells ember-data to put each event of a page as a serialized map into output map of a page. In addition, for each event, it also walks through each deepEmbedded model of a relationship - choices in this case - and also serializes them.
Note: the deepEmbedded option is not part of ember-data and I created it for my specific needs, so it may not work perfectly in every case.
The objective is to show a filtered list of items for each possible state. I'm trying a template because such a list may need to display in many places. The template calls filterItems to get its particular list of items.
The filterItems code below uses a field in the viewModel (current_filter), so all the lists have the same items (3 and 8 which are in a ready state) :( That's not the idea. Each template instance has $data which contains the correct filter value. Is there a way to make this filter value available to the filterItems function?
<script>
var viewModel = {
items: ko.observableArray(
[
{ "iid": 1, "state": "entered" },
{ "iid": 3, "state": "ready" },
{ "iid": 4, "state": "delivered" },
{ "iid": 8, "state": "ready" },
{ "iid": 13, "state": "entered" }
]),
states: ko.observableArray(
[
{ "sid": 1, "filter": "entered", "color": "yellow" },
{ "sid": 2, "filter": "ready", "color": "red" },
{ "sid": 3, "filter": "delivered", "color": "blue" }
]),
current_filter: 'ready'
}
viewModel.filterItems = ko.computed(function () {
var filtered_items = [];
for (var i = 0; i < viewModel.items().length; ++i)
if(viewModel.items()[i].state == viewModel.current_filter)
filtered_items.push(viewModel.items()[i]);
return filtered_items;
}, viewModel);
</script>
<div data-bind="foreach: states">
<div data-bind="template: {name: 'state', data: $data}"></div>
<script type="text/html" id="state">
<h2 data-bind="text: filter"></h2>
<ul data-bind="foreach:viewModel.filterItems()">
<li>
<div data-bind="text: iid"></div>
</li>
</ul>
</script>
</div>
<script>ko.applyBindings(viewModel);</script>
jsFiddle at https://jsfiddle.net/mthrock/kxpfdfva/8/#&togetherjs=JKJOos6VJc
how about a component instead of a template?
run snippet below
ko.components.register('mycomponent', {
viewModel: function(params) {
var self = this;
this.items = ko.observableArray(
[{
"iid": 1,
"state": "entered"
}, {
"iid": 3,
"state": "ready"
}, {
"iid": 4,
"state": "delivered"
}, {
"iid": 8,
"state": "ready"
}, {
"iid": 13,
"state": "entered"
}]);
this.filter = params.filter;
this.filterItems = ko.computed(function() {
var filtered_items = [];
for (var i = 0; i < this.items().length; ++i)
if (this.items()[i].state == this.filter)
filtered_items.push(this.items()[i]);
return filtered_items;
}, this);
},
template: ' <h2 data-bind="text: filter"></h2>\
<ul data-bind="foreach:filterItems()">\
<li>\
<div data-bind="text: iid"></div>\
</li>\
</ul>'
});
function model() {
var self = this;
this.states = ko.observableArray(
[{
"sid": 1,
"filter": "entered",
"color": "yellow"
}, {
"sid": 2,
"filter": "ready",
"color": "red"
}, {
"sid": 3,
"filter": "delivered",
"color": "blue"
}]);
}
var mymodel = new model();
$(document).ready(function() {
ko.applyBindings(mymodel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-bind="foreach: states">
<mycomponent params="filter: filter"></mycomponent>
</div>
When I am trying to create a barchart for mobile, the y axis actually starts from the middle of the screen, hence i am unable to see my chart completely. For viewing the chart, i need to zoom out the device by 20%, or i need to set a plotarea y value as -50. Can someone let me know where am i going wrong?
Graph is seen when added the below code:
plotarea:{
adjustLayout: 1,
marginTop:'dynamic',
backgroundFit: "y",
"y": -50
}
Attached image can be seen here:
1st: Without zoom, 2nd: With 20% zoom out, 3rd: with y as -50
Complete code is here:
var myConfig = {
type: "bar",
backgroundColor: "transparent",
plotarea:{
adjustLayout: 1,
marginTop:'dynamic',
backgroundFit: "y"
//"y": -50
},
plot:{
"rules": [
{
"rule": "%i==0",
"background-color": "#ACD373",
"placement": "in"
},
{
"rule": "%i==1",
"background-color": "#B7B7B7",
"placement": "in"
},
{
"rule": "%i==2",
"background-color": "#FF6E5B",
"placement": "in"
},
{
"rule": "%i==3",
"background-color": "#6DCFF6",
"placement": "in"
},
{
"rule": "%i==4",
"background-color": "#F9AD81",
"placement": "in"
},
{
"rule": "%i==5",
"background-color": "#898989",
"placement": "in"
}
],
valueBox:{
fontColor: "#fff",
connector: {
lineWidth: 1
},
"text": "%v",
"font-size": 20,
"font-weight": "normal",
"font-style": "normal"
}
},
"scale-x": {
"label":{
"text":[],
"color": "#fff"
},
item:{
color: "#fff",
},
"guide":{
"line-width":0
},
zooming: true,
"values":[]
},
"scale-y":{
"line-color":"none",
"item":{
"visible": false
},
"tick":{
"line-color":"none"
},
"guide":{
"line-color":"#4A6B89",
"line-width":1,
"line-style":"solid",
"alpha":1
}
},
labels:[
{
//text:"Hold SHIFT to detach<br>multiple slices",
textAlign: "left",
fontColor: "#fff"
}
],
series: [{values:[]}]
};
The same code works perfectly for another chart with the same data set and same width height for the div which is rendering this chart.
Also, i can't make the y value as -50 as i have bound the chart top open another chart on clicking any of the bars. On making y as -50, i am unable to click the bars.
I have updated your tags to be appropriate to your environment, coldfusion. I assume you are using cfchart as well. This means not all properties persist across.
I have adjusted a few properties. They mostly have to do with margins within the plotarea object. My best suggestion is try playing around with margins if margin:'dynamic' does not apply for your build.
demo link
var myConfig = {
type: "bar",
backgroundColor: "#1D3557",
plotarea:{
adjustLayout: 1,
margin:'dynamic',
},
plot:{
"rules": [
{
"rule": "%i==0",
"background-color": "#ACD373",
"placement": "in"
},
{
"rule": "%i==1",
"background-color": "#B7B7B7",
"placement": "in"
},
{
"rule": "%i==2",
"background-color": "#FF6E5B",
"placement": "in"
},
{
"rule": "%i==3",
"background-color": "#6DCFF6",
"placement": "in"
},
{
"rule": "%i==4",
"background-color": "#F9AD81",
"placement": "in"
},
{
"rule": "%i==5",
"background-color": "#898989",
"placement": "in"
}
],
valueBox:{
fontColor: "#fff",
connector: {
lineWidth: 1
},
"text": "%v",
"font-size": 20,
"font-weight": "normal",
"font-style": "normal"
}
},
"scale-x": {
"label":{
"text":'Version',
"color": "#fff"
},
item:{
color: "#fff",
},
"guide":{
"line-width":0
},
zooming: true,
"values":[]
},
"scale-y":{
"line-color":"none",
"item":{
"visible": false
},
"tick":{
"line-color":"none"
},
"guide":{
"line-color":"#4A6B89",
"line-width":1,
"line-style":"solid",
"alpha":1
}
},
zoom: {
preserveZoom:true,
},
labels:[
{
//text:"Hold SHIFT to detach<br>multiple slices",
textAlign: "left",
fontColor: "#fff"
}
],
series: [{values:[15,25,35,45,35,45]}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
It might be because, either you would have the font-size that makes chart extend the screen size or try changing the margin it might help, I tried it in the past but with no luck.
I try to display a line chart with two yAxis in Chart.js.
My Code:
window.onload = function() {
var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
"labels": [
"01.12.2015",
"02.12.2015",
"03.12.2015",
"04.12.2015",
"30.12.2015"
],
"datasets": [{
"label": "DEA Burrweiler Druck Abgabe",
"fill": "false",
yAxisID: "y-axis-0",
"data": [
8.7913,
8.6985,
8.7914,
8.7948,
8.7882
]
}, {
"label": "DEA Burrweiler Druck Zulauf",
"fill": "false",
yAxisID: "y-axis-0",
"data": [
4.5997,
4.5526,
4.5915,
4.5937,
4.5795
]
}, {
"label": "DMS Flemlingen Durchfluss",
"fill": "false",
yAxisID: "y-axis-1",
"data": [
1.9588,
2.4226,
2.1392,
2.223,
1.9048
]
}]
},
options: {
yAxes: [{
position: "left",
"id": "y-axis-0"
}, {
position: "right",
"id": "y-axis-1"
}]
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>
The error says: "TypeError: yScale is undefined"
When I remove the yAxisID options in the datasets, the Chart gets displayed but only with one yAxis.
window.onload = function() {
var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
"labels": [
"01.12.2015",
"02.12.2015",
"03.12.2015",
"04.12.2015",
"30.12.2015"
],
"datasets": [{
"label": "DEA Burrweiler Druck Abgabe",
"fill": "false",
"data": [
8.7913,
8.6985,
8.7914,
8.7948,
8.7882
]
}, {
"label": "DEA Burrweiler Druck Zulauf",
"fill": "false",
"data": [
4.5997,
4.5526,
4.5915,
4.5937,
4.5795
]
}, {
"label": "DMS Flemlingen Durchfluss",
"fill": "false",
"data": [
1.9588,
2.4226,
2.1392,
2.223,
1.9048
]
}]
},
options: {
yAxes: [{
position: "left",
"id": "y-axis-0"
}, {
position: "right",
"id": "y-axis-1"
}]
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>
I have the yAxis defined in the chart options. So whats the Problem, what am I missing?
The yAxes should be under a property scales under options, like so
...
options: {
scales: {
yAxes: [{
..
Fiddle - http://jsfiddle.net/dahd27d7/