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>
Related
Hello i am trying to display different charts using the chartjs by calling the API. Below code shows how i have formatted the chart.vue
Chart.vue:
<template>
<div class="chart-container" style="position: relative; height: 40vh; width:100%;">
<slot name="test1"></slot>
<slot name="test2"></slot>
</div>
</template>
<script>
export default {
name: 'charts',
data () {
return {
date: [],
challenge: [],
data: []
}
},
mounted () {
this.check(8, 'chart_8')
this.check(7, 'chart_7')
},
methods: {
check (id, name) {
this.$http.get(`/api_chart/${ id }/full`)
.then((response) => {
this.date = response.data.date
this.challenge = response.data.challenge
this.data = this.date.map((date, index) => ({
x: new Date(date * 1000),
y: this.challenge[index]
}))
const ctx = document.getElementById([name]).getContext('2d')
let myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: 'Challenge',
data: this.data,
borderColor: ' #EA5455',
}
]
},
options: {
lineTension: 0,
maintainAspectRatio: false,
scales: {
yAxes: [
{
scaleLabel: {
display: false
},
ticks: {
beginAtZero: true,
callback (value) {
return `${value}%`
}
}
}
],
xAxes: [
{
type: 'time',
time: {
unit: 'month'
},
scaleLabel: {
display: true,
}
}
]
}
}
})
})
}
}
}
</script>
App.vue:
<template>
<div class="In order to display chart1">
<chart-display> <canvas slot="test1" id="chart_7" ></canvas> </chart-display>
</div>
<div class="In order to display chart1">
<chart-display> <canvas slot="test2" id="chart_8" ></canvas> </chart-display>
</div>
</template>
<script>
import chart-display from './Chart.vue'
export default {
component: {chart-display}
}
</script>
As you can see i have shared my Chart.vue and App.vue, i am able to see my chart in the browser, but whenever i run the code or refresh the page, the charts flickers and stops. And then in my console i get below error:
Please someone help me to get rid of this issue, and please tell me if any changes i should do in my code to solve it. Please send me the modification code.
As I wrote in my comment, the charts are rendered twice. This causes flickering.
// every time you use <chart-display>, 2 charts are rendered, this means chart 1 renders
// itself and chart 2, char 2 renders itself and chart 1, this is a bad pattern in Vue in general
mounted() {
this.check(8, "chart_8");
this.check(7, "chart_7");
}
Make the following changes:
ChartDisplay.vue
<template>
<div
class="chart-container"
style="position: relative; height: 40vh; width: 100%"
>
<canvas ref="chart_7"></canvas>
<canvas ref="chart_8"></canvas>
</div>
</template>
<script>
import Chart from "chart.js";
export default {
name: "ChartDisplay",
data() {
return {
date: [],
challenge: [],
data: [],
// save charts in an array
charts: [],
// charts options
options: {
lineTension: 0,
maintainAspectRatio: false,
scales: {
yAxes: [
{
scaleLabel: {
display: false,
},
ticks: {
beginAtZero: true,
callback(value) {
return `${value}%`;
},
},
},
],
xAxes: [
{
type: "time",
time: {
unit: "month",
},
scaleLabel: {
display: true,
},
},
],
},
},
};
},
mounted() {
this.render(7, this.$refs.chart_7);
this.render(8, this.$refs.chart_8);
},
methods: {
render(id, ctx) {
this.fetchData(id).then((response) => {
let data = response.date.map((date, index) => ({
x: new Date(date * 1000),
y: response.challenge[index],
}));
this.charts.push(
new Chart(ctx, {
type: "line",
data: {
datasets: [
{
label: "Challenge",
data: data,
borderColor: " #EA5455",
},
],
},
options: this.options,
})
);
});
},
fetchData(id) {
return this.$http.get(`/api_chart/${ id }/full`);
},
},
beforeDestroy() {
this.charts.forEach((chart) => chart.destroy());
},
};
</script>
<style >
[v-cloak] {
display: none;
}
</style>
App.vue
<template>
<div>
<div class="In order to display chart1">
<chart-display/>
</div>
</div>
</template>
<script>
import ChartDisplay from "./ChartDisplay.vue";
export default {
components: { ChartDisplay },
};
</script>
See it on sandbox
I found several errors on your code. I fix them in Sandbox
For Chat.vue :
I rename the file as ChartDisplay.vue as similar as the component name
import chart.js package for using Chart() function
I use a demo API
<template>
<div
class="chart-container"
style="position: relative; height: 40vh; width: 100%"
>
<slot name="test1"></slot>
<slot name="test2"></slot>
</div>
</template>
<script>
import Chart from "chart.js";
export default {
name: "ChartDisplay",
data() {
return {
date: [],
challenge: [],
data: [],
};
},
mounted() {
this.check(8, "chart_8");
this.check(7, "chart_7");
},
methods: {
check(id, name) {
fetch(
"https://api.wirespec.dev/wirespec/stackoverflow/fetchchartdataforvuejs"
)
.then((response) => response.json())
.then((response) => {
this.date = response.date;
this.challenge = response.challenge;
this.data = this.date.map((date, index) => ({
x: new Date(date * 1000),
y: this.challenge[index],
}));
const ctx = document.getElementById([name]).getContext("2d");
new Chart(ctx, {
type: "line",
data: {
datasets: [{
label: "Challenge",
data: this.data,
borderColor: " #EA5455",
}, ],
},
options: {
lineTension: 0,
maintainAspectRatio: false,
scales: {
yAxes: [{
scaleLabel: {
display: false,
},
ticks: {
beginAtZero: true,
callback(value) {
return `${value}%`;
},
},
}, ],
xAxes: [{
type: "time",
time: {
unit: "month",
},
scaleLabel: {
display: true,
},
}, ],
},
},
});
});
},
},
};
</script>
For App.vue
Your import should not carry any hyphen.
component should be components
render the component once to avoid flikering
<template>
<div>
<div class="In order to display chart1">
<chart-display>
<canvas slot="test1" id="chart_7"></canvas>
<canvas slot="test2" id="chart_8"></canvas>
</chart-display>
</div>
</div>
</template>
<script>
import ChartDisplay from "./ChartDisplay.vue";
export default {
components: {
ChartDisplay
},
};
</script>
I wanna show Modal from fullcalendar using bootstrap-vue. So when I click event on calendar, the modal will be show. But my code does't work.
This is my html code:
<div class="flex-fill bd-highlight col-lg-12">
<div class="card card-default p-3 my-2">
<full-calendar :event-sources="eventSources" :config="calendarConfig"></full-calendar>
</div>
</div>
<div>
<b-modal v-model="modalShow">Hello From Modal!</b-modal>
</div>
This is my vue code:
<script>
export default {
data() {
return {
modalShow: false,
eventId: 0,
eventSources: [
{
events(start, end, timezone, callback) {
axios.get("http://localhost:8000/api/events").then(response => {
callback(response.data.data);
});
},
color: "yellow",
textColor: "black"
}
],
calendarConfig: {
defaultView: "month",
allDaySlot: false,
locale: "id",
buttonText: {
today: "Hari ini",
month: "Bulanan",
week: "Mingguan",
day: "Harian",
list: "Daftar Kegiatan"
},
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay list"
},
eventClick: function(view) {
this.modalShow = true;
}
}
};
}
};
</script>
When I console.log(this.modalShow) the value has been change form "false" to "true". But the modal is not showing.
The scope of this is not your vueContext anymore:
eventClick: function(view) {
this.modalShow = true;
}
you can solve this by using bind:
eventClick: function(view) {
this.modalShow = true;
}.bind(this)
Or
eventClick(view) => {
this.modalShow = true;
}
Full explanation is overhere: https://www.w3schools.com/js/js_arrow_function.asp
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 have been trying to implement this vue.js template into my vue project and it has been returning "Uncaught ReferenceError: Vue is not defined" despite the direct script set on the first line.
<script type="text/javascript" src="https://vuejs.org/js/vue.min.js"</script>
<template>
<div id="app" class="wrapper">
<fullcalendar class="full-Calendar" :events="events" :editable="true"></fullcalendar>
</div>
</template>
<script>
Vue.component('full-calendar', {
template: '<div></div>',
props: {
events: {
type: Array,
required: true
},
editable: {
type: Boolean,
required: false,
default: false
},
droppable: {
type: Boolean,
required: false,
default: false
}
},
data: function()
{
return {
cal: null
};
},
ready: function()
{
var self = this;
self.cal = $(self.$el);
var args = {
lang: 'en',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height: "auto",
allDaySlot: false,
slotEventOverlap: false,
timeFormat: 'HH:mm',
events: self.events,
dayClick: function(date)
{
self.$dispatch('day::clicked', date);
self.cal.fullCalendar('gotoDate', date.start);
self.cal.fullCalendar('changeView', 'agendaDay');
},
eventClick: function(event)
{
self.$dispatch('event::clicked', event);
}
};
if (self.editable)
{
args.editable = true;
args.eventResize = function(event)
{
self.$dispatch('event::resized', event);
}
args.eventDrop = function(event)
{
self.$dispatch('event::dropped', event);
}
};
if (self.droppable)
{
args.droppable = true;
args.eventReceive = function(event)
{
self.$dispatch('event::received', event);
}
};
this.cal.fullCalendar(args);
}
});
new Vue({
el: '#app',
data: {
events: [
{
title: 'Event1',
start: '2018-08-10 12:30:00',
end: '2018-08-10 16:30:00'
},
{
title: 'Event2',
start: '2018-08-07 17:30:00',
end: '2018-08-07 21:30:00'
}
]
},
events: {
'day::clicked': function(date)
{
console.log(date);
}
}
});
</script>
<style>
.wrapper {
margin: 2rem;
}
</style>
I've also tried adding the direct script to index.html and it leads to "[Vue warn]: Unknown custom element"
you are allowed to use only one <script> tag in the component.
since 2 are present it will give preference to the default syntax flow
<templete></templete>
<script></script>
<style></style>
check out this
https://github.com/vuejs/vue-loader/issues/228
and
https://medium.com/#lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8
i'm using vue-slick to show my images..
i've tried every solution that i found.. but none is working.
here is my template:
<slick ref="slick" :options="slickOptions">
<img v-for="(item) in categories" :src="'/images/category/'+item.image_url" alt="" class="img-fluid" >
</slick>
and here is my scripts:
data () {
return {
categories:'',
slickOptions: {
dots: true,
infinite: false,
autoplay: false,
arrows : false,
draggable:true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
},
}
},
mounted() {
let _this = this;
axios({
method: 'post',
url: '/api/category',
data : {'name' : _this.name}
}).then( (response)=> {
console.log(response.data.data);
_this.categories = response.data.data;
}).catch((error) => {
console.log(error.response)
});
},
methods:{
next() {
this.$refs.slick.next();
},
prev() {
this.$refs.slick.prev();
},
reInit() {
this.$refs.slick.reSlick()
}
},
and only loading the image, and the slick is not working...!!?
I have faced the same issue, and what I did to solve this is to put the
v-if="categories.length > 0" on the <slick> tag.
It make the slick won't be created before the data that we want to display contains the data first.
Use below code to reinit slick, and call on success function of response
reInit() {
let currIndex = this.$refs.slick.currentSlide()
this.$refs.slick.destroy()
this.$nextTick(() => {
this.$refs.slick.create()
this.$refs.slick.goTo(currIndex, true)
})
}
I'm assuming your Axios is returning data with the structure you are looking for.
I'm also assuming you are using the vue-slick component and not slick.
You should iterate through a DIV like stated in the documentation. Without Axios, I did this:
In template:
<slick ref="slick" :options="slickOptions">
<div>Escolhe uma configuração...</div>
<div v-for="d in data1"><a class="inline" :href="d.image"><img :src="d.image" alt="">{{ d.text }}</a></div>
</slick>
In Javascript:
data: function() {
return {
data1: [
{ image: 'http://placehold.it/100x100', text: 'Config1' },
{ image: 'http://placehold.it/100x100', text: 'Config2' },
{ image: 'http://placehold.it/100x100', text: 'Config3' },
{ image: 'http://placehold.it/100x100', text: 'Config4' }
]
}