I'm just doing following the Vuetable tutorial to use it in my own app, but my browser shows a blank page. Vue dev tools always says "Vue.js is not detected"; I feel like I'm missing something simple. I've followed the tutorial verbatim, and works in JSFiddle. Does anyone see the problem?
Main.js:
Vue.use(Vuetable);
Vue.config.devtools = true;
var app = new Vue({
el: '#app',
components:{
'vuetable-pagination': Vuetable.VuetablePagination
},
data: {
fields: ['name', 'email','birthdate','nickname','gender','__slot:actions'] },
computed: {},
methods: {
onPaginationData (paginationData) {
this.$refs.pagination.setPaginationData(paginationData)
},
onChangePage (page) {
this.$refs.vuetable.changePage(page)
},
editRow(rowData){
alert("You clicked edit on"+ JSON.stringify(rowData))
},
deleteRow(rowData){
alert("You clicked delete on"+ JSON.stringify(rowData))
}
},
})
HTML File:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test environment</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Use Vue framework -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body>
<!-- Supporting javascript -->
<script src="https://unpkg.com/smiles-drawer#1.0.2/dist/smiles-drawer.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.5.1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<!-- vuetable-2 dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
<!-- vuetable-2 -->
<script src="https://rawgit.com/ratiw/vuetable-2/develop/dist/vuetable-2.js"></script>
<script src="main.js"></script>
<div id="app">
<div class="ui container">
<vuetable ref="vuetable" api-url="https://vuetable.ratiw.net/api/users" :fields="fields" pagination-path="" #vuetable:pagination-data="onPaginationData"
data-path="">
<template slot="actions" scope="props">
<div class="table-button-container">
<button class="ui button" #click="editRow(props.rowData)">
<i class="fa fa-edit"></i> Edit
</button>
<button class="ui basic red button" #click="deleteRow(props.rowData)">
<i class="fa fa-remove"></i> Delete
</button>
</div>
</template>
</vuetable>
<vuetable-pagination ref="pagination" #vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
</div>
</div>
</body>
</html>
Related
I want to add an eventhandler on my component. When I click the button I want the component to show. I tried all kinds of solutions but I think my knowledge is lacking. Here is my code, I would be thankful for help. Feel free to explain what the best methods are for solving this problem and how I should think in scenarios like these. Appricitate your time.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>SneakPeak</title>
</head>
<body>
<div id="body-div">
<div id="app">
<modal-button></modal-button>
<modal-1 v-if="modalStatus == 2"></modal-1>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="app.js"></script>
</div>
</body>
</html>
JAVASCRIPT
// Define a new component called button-counter
Vue.component('modal-button', {
data: function () {
return {
count: 0,
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
// Defining a component called modal-1
Vue.component('modal-1', {
props: ["sModal"],
template: `
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
`
})
var shaba = new Vue({
el: '#app',
props: ["sModal"],
data: {
modalStatus: 0
},
})
// // register modal component
// Vue.component('modal', {
// template: modalTemplate
// })
// // start app
// new Vue({
// el: '#body-div',
// data: {
// showModal: false
// }
// })
Old Answer:
if you want to show/hide your component on click then use #click="val = !val" on the button component and use v-if or v-show="val" on the modal componant to enable/ disable Display.
set val: false in your data.
New Answer:
Looks Like you button is already capturing click so please follow this pen https://codepen.io/ashwinbande/pen/WPozgR
what we are doing is on button click executing a method which increments count as well as emits a custom event. In button component on that event, we change the value of val. then the val is used to show hide the modal component`!
1.I am a beginner of vue.js, but when I was trying some examples, I found something uncommon. The first one is when I set id in the body, and write my js code as followed:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/semantic.css">
<script type="text/javascript" src="js/vue.js">
</script>
<title></title>
</head>
<body style="background-color:black;" id="app">
<div class="ui container" style="margin:20px;">
<div class="ui segment">
<h1>{{ title }}</h1>
<p>
{{ message }}
</p>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello, world!",
title: "How about you?"
}
})
</script>
</body>
</html>
And this is my result which does not show me data :
2.And the second problem is when I created an object in the data, and I refer it as followed, it also does not work in the div label.
This is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/semantic.css">
<script type="text/javascript" src="js/vue.js">
</script>
<title></title>
</head>
<body style="background-color:black;">
<div class="ui container" style="margin:20px;">
<div class="ui segment" id="app">
<h1>{{ article.title }}</h1>
<p>
{{ article.message }}
</p>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
article{
message: "Hello, world!",
title: "How about you?"
}
}
})
</script>
</body>
</html>
So I wonder if there some conflicts when I was using semanticUI and vue.js?
As a best practice, you can create a top level div#app, like this:
var app = new Vue({
el: "#app",
data: {
message: "Hello, world!",
title: "How about you?"
}
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<body style="background-color:black;">
<div id="app"><!-- just a wrapper for vuejs -->
<div class="ui container" style="margin:20px;">
<div class="ui segment">
<h1>{{ title }}</h1>
<p>
{{ message }}
</p>
</div>
</div>
</div>
</body>
how can I swap content of a div with Vue.js? I think I lack general lifecycle knowledge. Here is what I´ve got so far. After all I need to swap between two Vue-instances and ´d like to use only one lightbox container for them.
Here is what I´ve got so far: http://jsbin.com/qokerah/edit?html,js,output
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script type="x-template" id="foo-template">
<div class="text">{{ fooText }}</div>
<div class="confirm" v-if="fooConfirm">confirmed</div>
</script>
<script type="x-template" id="bar-template">
<div class="heading">{{ barHeading }}</div>
<div class="info">{{ barInfo }}</div>
</script>
<div class="foo">
<div class="btn btn-primary" v-on:click="swapLightboxContent">Open foo template</div>
</div>
<div class="bar">
<div class="btn btn-primary" v-on:click="swapLightboxContent">Open bar template</div>
</div>
<div class="lightbox">
<div class="lightbox-content">Show foo- or bar-template</div>
</div>
</body>
</html>
JS
var foo = new Vue({
el: '.foo',
data: {
fooText: 'text',
fooConfirm: false
},
methods: {
swapLightboxContent: function () {
console.log('Show foo-template');
}
}
});
var bar = new Vue({
el: '.bar',
data: {
barHeading: 'text',
barInfo: 'text'
},
methods: {
swapLightboxContent: function () {
console.log('Show bar-template');
}
}
});
Ok, my main misconception where:
I Used var foo and bar as new Vue() instances without having a parent "intersection" instance
so this is now working:
http://jsbin.com/tiwoco/edit?html,js,output
Still need to figure out if accessing the currentView item through vmFoo and vmBar instances shouldn´t be done in foo and bar components :)
I'm using datatables plugin and I have a problem with bootstrap switch.
This is my javascript code, where I create a switch with the value retrieved from ajax call:
$(document).ready(function() {
if ( ! $.fn.DataTable.isDataTable( '#usersTable' ) ) {
userTable = $('#usersTable').DataTable({
responsive: true,
//fix problem with responsive table
"autoWidth": false,
"ajax": "table",
"columns": [
{ "data": "username" },
{ data: "enabled", render: function ( data, type, row ) {
if (data) {
return '<input data="username" type="checkbox" name="my-checkbox" checked>';
}
else {
return '<input data="username" type="checkbox" name="my-checkbox">';
}
}
},
{ "data": "role.role"},
{ "data": "clientVersion.name" },
{
data: null,
className: "center",
defaultContent: '<button type="button" class="btn btn-danger" id="deleteLicense" data-toggle="modal" th:attr="data-href=${license.idClientLicense}" data-target="#deleteLicenseModal">Delete</button>'
}
],
"fnDrawCallback": function() {
//Initialize checkbos for enable/disable user
$("[name='my-checkbox']").bootstrapSwitch({size: "small", onColor:"success", offColor:"danger"});
}
});
}
else {
userTable.ajax.url("table").load();
}
$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
//CSRF attribute for spring security
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$.ajax({
type : "POST",
url : "status"+(this).attr("data"),
data : form.serialize(),
beforeSend:function(xhr) {
xhr.setRequestHeader(header, token);
},
// all right with rest call
success : function(data) {
// No exception occurred
if (data.status==true){
// Also the field are right(for e.g. form value)
if(data.success==true){
// il risultato sta in data.result
// window.location.reload(true);
//reset select 2 choise because it can set with old user who no longer exist
// reload only the tag with id carsTable, so only the table
}
else{
// code if there are some error into form for example
}
} else {
// code exception
notifyMessage(data.result, 'error');
}
},
// error during rest call
error : function(data) {
window.location.href = "/ATS/500";
}
});
});
});
and this is HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Administration users</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<!-- Spring csrf -->
<meta name="_csrf" th:content="${_csrf.token}" />
<!-- default header name is X-CSRF-TOKEN -->
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
<!-- Bootstrap Core CSS -->
<link th:href="#{/static/assets/bootstrap/css/bootstrap.css}"
rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet"
th:href="#{/static/assets/component/font-awesome-4.4.0/css/font-awesome.min.css}">
<!-- Ionicons -->
<link rel="stylesheet"
href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/datatables/dataTables.bootstrap.css}">
<link rel="stylesheet"
th:href="#{/static/assets/plugins/datatables/extensions/Responsive/css/responsive.bootstrap.min.css}">
<!-- Theme style -->
<link rel="stylesheet"
th:href="#{/static/assets/dist/css/AdminLTE.min.css}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet"
th:href="#{/static/assets/dist/css/skins/_all-skins.min.css}">
<!-- Select2 -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/select2/select2.min.css}">
<!-- Bootstrap switch -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/bootstrap-switch/css/bootstrap-switch.min.css}">
<!-- jQuery 2.1.4 -->
<script th:src="#{/static/assets/plugins/jQuery/jQuery-2.1.4.min.js}"
type="text/javascript"></script>
<!-- Bootstrap 3.3.5 -->
<script th:src="#{/static/assets/bootstrap/js/bootstrap.min.js}"
type="text/javascript"></script>
<!-- DataTables -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/jquery.dataTables.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/dataTables.bootstrap.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/extensions/Responsive/js/responsive.bootstrap.min.js}"></script>
<!-- page script -->
<!-- Slimscroll -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/slimScroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/fastclick/fastclick.min.js}"></script>
<!-- Bootstrap-growl -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/notify/jquery.bootstrap-growl.js}"></script>
<!-- AdminLTE App -->
<script type="text/javascript"
th:src="#{/static/assets/dist/js/app.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script type="text/javascript"
th:src="#{/static/assets/dist/js/demo.js}"></script>
<!-- Select2 -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/select2/select2.full.min.js}"></script>
<!-- Bootstrap switch -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js}"></script>
<script type="text/javascript" th:src="#{/static/assets/js/user.js}"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- Header nd menu fragment -->
<div th:replace="../fragments/dashboard-header :: dashboard-header"></div>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>Administration</h1>
<ol class="breadcrumb">
<li><a th:href="#{/}"><i class="fa fa-dashboard"></i> Home
</a></li>
<li class="active">User</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Users</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- -Users table -->
<table id="usersTable"
class="table table-bordered table-striped">
<thead>
<tr>
<th>Username</th>
<th>Enable</th>
<th>Role</th>
<th>Version</th>
<th>Delete</th>
</tr>
</thead>
</table>
<!-- Create two equals button because when I am on desktop I show the text add fleet otherwise the + and the tooltip.
This is need because otherwise the text goes out the button -->
<button id="addUserButton" type="button"
class="btn btn-primary visible-lg col-lg-1 col-lg-offset-11"
data-toggle="modal" data-target="#addUserModal">Add
user</button>
<button id="addlicenseButton" type="button"
class="btn btn-primary hidden-lg col-xs-1 col-xs-offset-11"
data-toggle="modal" data-target="#addUserModal">
<span class="glyphicon glyphicon-plus" data-toggle="tooltip"
title="Add user"></span>
</button>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
</div>
</body>
</html>
I read several questions and answer but I think that my problem is linked to "fnDrawCallback": function() because I tried all the solutions and None worked. Might be that the switch isn't correctly setted?
This is the table
CAUSE
Pages other than first do not exist in DOM at the time of initialization, that is why your handler never gets called.
SOLUTION
You need to use event delegation by providing selector as a second argument in on() call, see example below:
$('#usersTable').on('switchChange.bootstrapSwitch', 'input[name="my-checkbox"]', function(event, state) {
// ... skipped ...
});
From jQuery on() method documentation:
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time.
See "Direct and delegated events" in jQuery on() method documentation and jQuery DataTables – Why click event handler does not work for more information.
NOTES
Custom controls and Responsive extension require special handling. If column containing custom control becomes hidden or visible, it should be re-initialized. See jQuery DataTables – Responsive extension and custom controls for more information.
I'm trying to implement Fuelux's wizard feature and have hit a brick wall. I am simply trying to achieve a working replica of the live example but keep receiving the error in my console:
Uncaught TypeError: Object [object Object] has no method 'wizard'
I am finding a lot of the documentation a little overwhelming and would appreciate some clarity on the subject in plain [or plainer] English.
My markup is:
<!DOCTYPE html>
<html class="no-js fuelux">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>E-Learning</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fuelux.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div id="my-wizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">
...
</div>
<div class="step-pane" id="step2">
...
</div>
<div class="step-pane" id="step3">
...
</div>
</div>
</div>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/require.js"></script>
<script src="js/wizard.js"></script>
<script>
$(document).ready(function(){
$('#my-wizard').on('change', function(e, data) {
console.log('change');
if(data.step===3 && data.direction==='next') {
// return e.preventDefault();
}
});
$('#my-wizard').on('changed', function(e, data) {
console.log('changed');
});
$('#my-wizard').on('finished', function(e, data) {
console.log('finished');
});
$('.btn-prev').on('click', function() {
console.log('prev');
$('#my-wizard').wizard('previous');
});
$('.btn-next').on('click', function() {
console.log('next');
$('#my-wizard').wizard('next','foo');
});
});
</script>
</body>
</html>
So close! For both the CSS and JS since Fuel UX includes Bootstrap you simply include Fuel UX in place of Boostrap and you get all of Bootstrap plus Fuel UX:
<link rel="stylesheet" href="https://fuelcdn.com/fuelux/2.3/css/fuelux.min.css">
<script src="https://fuelcdn.com/fuelux/2.3/loader.min.js"></script>
Your template looks great and with just the above modifications, plus removing a couple of lines that were causing double-processing, this works just as expected. See the full example here:
Gist: https://gist.github.com/adamalex/5412079
Live example: http://bl.ocks.org/adamalex/5412079