i am loading the content inside div #iframe using jquery $.get
i want to resize the content according to media queries on clicking top buttons,mobile, ipad,desktop
kindly visit below link
http://designgear.in/test/
js used
$(".mobile_scale").on("click", function(e) {
e.preventDefault();
$("#iframe").animate({
"width": "320px"
}, 400);
setTimeout(function() {
adjustIframeheight();
}, 500);
});
$(".tablet_scale").on("click", function(e) {
e.preventDefault();
$("#iframe").animate({
"width": "480px",
marginLeft: "auto",
marginLeft: "auto"
}, 400);
setTimeout(function() {
adjustIframeheight();
}, 500);
});
$(".desktop_scale").on("click", function(e) {
e.preventDefault();
$("#iframe").animate({
"width": "600px"
}, 400);
setTimeout(function() {
adjustIframeheight();
}, 500);
});
Related
I have an API that gives me data about certain things. With that data, I would like to render my chart dynamically. However, when I use that API in the created() segment, it does not get rendered. But if I shift my data to hardcode it in the data() segment, it works. May I seek advice here?
export default {
extends: Line,
data() {
return {
lineChartOptions: {
maintainAspectRatio: false,
responsive: true,
scales: { yAxes: [{ ticks: { beginAtZero: true }, gridLines: { display: true } }], xAxes: [{ gridLines: { display: false } }] },
legend: {
display: true,
},
},
lineChartData: [],
};
},
created() {
axios
.get("someurl")
.then((response) => {
let responseData = response.data;
let lineDataset = [];
for (let i = 0; i < responseData.pidList.length; i++) {
lineDataset.push({
label: responseData.pidList[i],
backgroundColor: "#2554FF",
data: 2000,
});
}
console.log(lineDataset);
this.lineChartData = { labels: ["2020", "2021"], datasets: { lineDataset } };
})
.catch(function(error) {
console.log(error);
});
},
mounted() {
this.renderChart(this.lineChartData, this.lineChartOptions);
},
};
vue-chartjs does not live update by default, this is because chart.js does not support it. To make it live update you will need to add the reactiveProp mixin as described in the documentation: https://vue-chartjs.org/guide/#updating-charts
I want to create pie-chart with vue-apexcharts. I had data from API but I don't know how to update the chart's data.
mounted() {
axios
.get("/data/episodes.json")
.then(response => {
console.log(response);
});
}
The chart I want to create is like this
Here is my understanding on doing, ...
first you have to define the data and option values of chart.
components: {
apexchart: VueApexCharts,
},
data: {
series: [],
chartOptions: {
chart: {
width: 380,
type: "pie",
},
labels: [],
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: "bottom",
},
},
},
],
},
},
Now on mount you have call your api to get the data and update the chart information. like this ...
I'm thinking of you server would return an array of objects having value and key.
mounted() {
axios.get("/data/episodes.json").then((response) => {
for (let i = 0; i < response.data.length; i++) {
this.data.series.push(response.data[i].value);
this.data.chartOptions.labels.push(response.data[i].key);
}
});
},
Finally, you have to add the chart component to the vue template. like this.
<div id="chart">
<apexchart type="pie" width="380" :options="chartOptions" :series="series"></apexchart>
</div>
Done,
Ask me if it is not clear for you.
I'm developing a system using C# and Vue Js, I need to show some data in table, for that I have use JQuery Data Table.
In my case all the data and options (search and pagination) is showing but problem is in table's top row showing as "No data available in Table" if we do force (Ctrl + F5) refresh then table is working perfectly.
Note : I searched regarding this problem in stack overflow there were some related questions I tried with those but I couldn't figure it out.
Please help me to resolve this problem.
1) after the first page load table is showing like this.
Note :If I searched something in search bar all data get not apear.
2) after force refresh table is showing like this and working perfectly.
This is the code's I have use for the implementation.
Vue Component.
Vue.component('all-enquiry', {
template: ' <table id="allenquiry" class="table table-striped table-bordered" cellspacing="0" style="width:100% !important"><thead><tr><th>Date<small>/Time</small></th><th>Hndle.By</th><th>Ref:No</th><th>Name</th><th>Destination</th><th>Dep.Date</th><th>Ret.Date</th><th>Airline</th><th>Status</th><th class="disabled-sorting text-right">Actions</th></tr></thead><tbody class="tbody-text"><tr v-for="enq in enquiryall"><td>{{ enq.CreatedDate | formatDate }}</td><td>{{ enq.HandleBy }}</td><td>{{ enq.EnqRefno }}</td><th>{{ enq.PaxName }}</th><td>{{ enq.DepartingTo }}</td><td>{{ enq.DepartingDate }}</td><td>{{ enq.ReturnDate }}</td><td>{{ enq.Airline }}</td><td><button class="btn btn-info btn-sm btn-round">Following Up</button></td><td class="text-right"><button class="btn btn-success btn-sm btn-round">More Info</button></td></tr></tbody></table >',
data() {
return {
enquiryall: '',
}
},
created: function () {
this.getall();
},
methods: {
getall: function () {
var enquiryform = this
axios.get("/Main/getAllenq/").then(function (response) {
enquiryform.enquiryall = response.data.allenquiry;
});
}
}
});
Table Initialization.
$(document).ready(function () {
$('#allenquiry').DataTable({
"pagingType": "full_numbers",
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
responsive: true,
language: {
search: "_INPUT_",
searchPlaceholder: "Search records",
}
});
});
Html
<div class="card-body">
<div class="toolbar">
</div>
<all-enquiry></all-enquiry>
</div>
Maybe your ajax request not finished when you initialize the DataTables. Create an other method in the component to initialize the datatables. eg: initDt() {}
Because of the nextTick() it's going to initialize the DataTables when the table render finished.
Code not tested, it should have problems with the scopes, i'm using arrow () => {} functions instead of function().
Vue.component('all-enquiry', {
template: '...',
data() {
return {
enquiryall: '',
}
},
created: function () {
this.getall();
},
methods: {
getall: function () {
var enquiryform = this
axios.get("/Main/getAllenq/").then(function (response) {
enquiryform.enquiryall = response.data.allenquiry;
enquiryform.$nextTick(function() {
enquiryform.initDt()
});
});
},
initDt() {
$('#allenquiry').DataTable({
"pagingType": "full_numbers",
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
responsive: true,
language: {
search: "_INPUT_",
searchPlaceholder: "Search records",
}
});
}
}
});
Use axios on mounted and create datatable on updated life-cycle method
mounted(){
axios
.get('/estimator')
.then(response => {
this.items = response.data;
// console.log(response.data);
})
},
updated(){
var datatable = $('#datatable').DataTable({
"pagingType": "full_numbers",
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
responsive: true,
language: {
search: "_INPUT_",
searchPlaceholder: "Search estimator",
}
});
}
I am working on extjs 4,
I have a grid panel like this
It works fine on CHROME but on IE 11,
the column of grid doesn't render properly.
code:
GRID = Ext.create('Ext.grid.Panel', {
title: 'Popup',
frame: true,
selModel: checkboxselection,
store: Ext.data.StoreManager.lookup('popupStore'),
scrollable: true,
columns: _COLS,
features: [groupingFeature],
flex: 90,
autoHeight:true,
autoWidth:true,
renderTo: 'details',
scroll: true,
viewConfig: {
style: {
overflowX: 'hidden'
}
},
listeners: {
itemclick: function(dv, record, item, index, e) {
SELECTED_GROUP_VALUE = record.get('GROUP_FIELD');
if(selectionType =='SINGLE'){
setValue(getProdId(), record);
}
},
beforeselect: function(grid, record, index, eOpts) { },
groupclick: function (view, node, group, e, eOpts) { },
headerclick: function(){
}
},
onSelectChange: function(record, isSelected, suppressEvent, commitFn) {
grid = Ext.ComponentQuery.query('#grid-item-id')[0];
grid.suspendLayout = true;
this.callParent(arguments);
}
});
I have tried viewport and other container bur still facing the same issue..
Could anybody please help.
Thanks
try grid config, columnWidths:["100%"]
i am facing problem with jquery popup dialog,when i submit first time input button click is fire but when i click second time input button there is no response why,help me to solve this problem,i am giving my code below.
<script "text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 300,
height:200,
resizable: false,
modal: true,
open: function(event, ui) {
$(this).load("#Url.Action("Idex", "Home")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$("#opener").click(function () {
$("#dialog").dialog("open");
});
});
</script>
<div id="dialog" title="Basic dialog" >Please wait</div>
<input id="opener" type="submit" class="myForm" value="Index" />
Can you try this
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
width: 300,
height:200,
resizable: false,
modal: true,
open: function(event, ui) {
$(this).load("#Url.Action("Idex", "Home")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$(document).on("click" "#opener",function () {
$("#dialog").dialog("open");
});
<button id="opener" type="button">Open Dialog</button>