in my <div id="app">.....</div> i have something like the following
<div class="fp-row4-content">
... ROW 1 ...
</div>
<div class="partition-line"></div>
<div class="fp-row4-content">
... ROW 2 ...
</div>
<div class="partition-line"></div>
<div class="fp-row4-content">
... ROW 3...
</div>
<div class="partition-line"></div>
<div class="fp-row4-content">
... ROW 4 ...
</div>
<div class="partition-line"></div>
<div class="fp-row4-content">
... ROW 5 ...
</div>
If I click on each of these row, they will bring me to the same page. But after the page load, I want them to jump to 5 different specific anchor.
Is it possible to do it with Vuejs (I am using Laravel) ? Will vue-router do the job? Thanks.
If you want to jump to a specific location in the same page, you can use Vue Router and create a method to scroll to it like:
new VueRouter({
mode: 'history',
scrollBehavior: function(to, from, savedPosition) {
if (to.hash) {
return {selector: to.hash}
} else {
return { x: 0, y: 0 }
}
},
routes: [
{path: '/', component: abcView},
// your routes
]
});
Extracted from here.
Or create a method in the same page:
//Your view:
<a class="link-button" #click="scrollMeTo('section')">Jump</a>
...
<div ref="section" class="section1">
//JS
methods: {
scrollMeTo(refName) {
var element = this.$refs[refName];
var top = element.offsetTop;
window.scrollTo(0, top);
}
}
You can take a look to the official documentation of Scroll Behaviour and here a jsfiddle with an example: JsFiddle
Hope it helps!
Related
I want to make tab switcher auto decide the slot for the switcher but when I am trying to make it dynamic with the help of observable no data is showing the tab content area until I write the slot area statically. With observable variable, the slot is not getting the selected Slot value.
Please check how I can do this.
slot = [[selectedSlot]] //using for the slot value in html
this.selectedSlot = ko.observable('settings');
<div id="tabbardemo">
<oj-dialog class="tab-dialog hidden" id="tabDialog" dialog-title="Tab data">
<div slot="body">
<oj-form-layout>
<oj-input-text id="t1" value="{{newTabTitle}}" label-hint="Title"></oj-input-text>
</oj-form-layout>
</div>
<div slot="footer">
<oj-button id="idOK" on-oj-action="[[addTab]]">OK</oj-button>
<oj-button id="idCancel" on-oj-action="[[closeDialog]]">Cancel</oj-button>
</div>
</oj-dialog>
<oj-button id="addTab" on-oj-action="[[openDialog]]">Add Tab</oj-button>
<br/>
<br/>
<oj-tab-bar contextmenu="tabmenu" id="hnavlist" selection="{{selectedItem}}" current-item="{{currentItem}}" edge="top" data="[[dataProvider]]"
on-oj-remove="[[onRemove]]">
<template slot="itemTemplate" data-oj-as="item">
<li class="oj-removable" :class="[[{'oj-disabled' : item.data.disabled}]]">
<a href="#">
<oj-bind-text value="[[item.data.name]]"></oj-bind-text>
</a>
</li>
</template>
<oj-menu slot="contextMenu" class="hidden" aria-label="Actions">
<oj-option data-oj-command="oj-tabbar-remove">
Removable
</oj-option>
</oj-menu>
</oj-tab-bar>
<oj-switcher value="[[selectedItem]]">
<div slot="[[selectedSlot]]"
id="home-tab-panel"
role="tabpanel"
aria-labelledby="home-tab">
<div class="demo-tab-content-style">
<h2>Home page content area</h2>
</div>
</div>
<div slot="tools"
id="tools-tab-panel"
role="tabpanel"
aria-labelledby="tools-tab">
<div class="demo-tab-content-style">
<h1>Tools Area</h1>
</div>
</div>
<div slot="base"
id="base-tab-panel"
role="tabpanel"
aria-labelledby="ba`enter code here`se-tab">
<div class="demo-tab-content-style">
<h1>Base Tab</h1>
</div>
</div>
</oj-switcher>
<br>
<div>
<p class="bold">Last selected list item:
<span id="results">
<oj-bind-text value="[[selectedItem]]"></oj-bind-text>
</span>
</p>
</div>
</div>
JS code below
require(['ojs/ojcontext',
'knockout',
'ojs/ojbootstrap',
'ojs/ojarraydataprovider',
'ojs/ojknockout',
'ojs/ojnavigationlist',
'ojs/ojconveyorbelt',
'ojs/ojdialog',
'ojs/ojbutton',
'ojs/ojinputtext',
'ojs/ojformlayout',
'ojs/ojswitcher',
],
function (Context, ko, Bootstrap, ArrayDataProvider) { // this callback gets executed when all required modules are loaded
function ViewModel() {
this.data = ko.observableArray([{
name: 'Settings',
id: 'settings'
},
{
name: 'Tools',
id: 'tools'
},
{
name: 'Base',
id: 'base'
}
]);
this.selectedSlot = ko.observable('settings'); //Sepecifically mentioned to show what it is the objective
this.dataProvider = new ArrayDataProvider(this.data, { keyAttributes: 'id' });
this.selectedItem = ko.observable('settings');
this.currentItem = ko.observable();
this.tabCount = 0;
this.newTabTitle = ko.observable();
this.delete = (function (id) {
var hnavlist = document.getElementById('hnavlist');
var items = this.data();
for (var i = 0; i < items.length; i++) {
if (items[i].id === id) {
this.data.splice(i, 1);
Context.getContext(hnavlist)
.getBusyContext()
.whenReady()
.then(function () {
hnavlist.focus();
});
break;
}
}
}).bind(this);
this.onRemove = (function (event) {
this.delete(event.detail.key);
event.preventDefault();
event.stopPropagation();
}).bind(this);
this.openDialog = (function () {
this.tabCount += 1;
this.newTabTitle('Tab ' + this.tabCount);
document.getElementById('tabDialog').open();
}).bind(this);
this.closeDialog = function () {
document.getElementById('tabDialog').close();
};
this.addTab = (function () {
var title = this.newTabTitle();
var tabid = 'tid' + this.tabCount;
this.data.push({
name: title,
id: tabid
});
this.closeDialog();
}).bind(this);
}
Bootstrap.whenDocumentReady().then(function () {
ko.applyBindings(new ViewModel(), document.getElementById('tabbardemo'));
});
}
);
It is a bit complex to understand when you copy from JET cookbook. You have done almost everything right. Just make the following changes:
1) Remove this:
Bootstrap.whenDocumentReady().then(function () {
ko.applyBindings(new ViewModel(), document.getElementById('tabbardemo'));
});
Why? The bootstrapping is required once per application, which is done inside your main.js file.
2) Replace require by define
Why? Require block is again maintained in main.js, where your required modules are pre-loaded. All subsequent viewModels have define block
3) Return an instance of your ViewModel
define([
... Your imports
],
function (Context, ko, Bootstrap, ArrayDataProvider) { // this callback gets executed when all required modules are loaded
function ViewModel() {
// Your code
}
return ViewModel;
});
I am trying to make a carousel that shows a list of new tutors in a specific area from latest first. I am using laravel 5.6, vue.js and owl carousel.
Below I am using axios to retrieve from the database, and call owl-carousel
<script>
export default {
props: {
areaId: null,
},
data () {
return {
NewTutors: {}
}
},
methods: {
getNewTutor () {
var that = this;
axios.get( '/' + this.areaId + '/home/new').then((response) => {
that.NewTutorss = response.data;
})
.catch(error => {
console.log(error)
this.errored = true
});
}
},
mounted () {
this.getNewTutor();
}
}
$(document).ready(function() {
$('#NewHustles').owlCarousel();
});
</script>
and here and try and loop through each new tutor in a carousel.
<div class="owl-carousel owl-theme owl-loaded" id="NewTutors">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item" v-for="NewTutor in NewTutors>
<div class="card">
<div class="card-header">
{{NewTutor.name}}
</div>
<div class="card-body">
<div>
{{NewTutor.area.name}}
</div>
<div>
Image goes here
</div>
<div>
{{NewTutor.user.first_name}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I get all the cards, with the correct data passed through, but instead of a single row carousel, I get a big blob of cards that move as if there was only one item. I have tried Vue.nexttick, and playing around with a few other things, but nothing seems to work quite right.
Thank you for your help.
I am trying to fetch results from database in News.vue, and display them in Topnews.vue. I have two links fetched. When I click link1, it shows up the Topnews.vue template with everything working as intended, however, if i click link2, nothing happens, except for that the URL changes, but the template does not show up the result. If i refresh the page and click link2 or click on the navbar, then link2, it shows up, and same, clicking then link1, changes the URL, but doesnt show up. I'm really stuck on that and I'd be really glad if you help me out on that issue. Hope you understand.
News.vue
<template id="news">
<div class="col-sm-5">
<div class="cars" v-for="row in filteredNews" >
<div class="name" >
<p class="desc_top_time">{{row.created_at}}</p>
<span class="last_p"> {{row.category}}</span>
<h3 style="margin-bottom:-4px; font-size: 16px;">
<router-link class="btn btn-primary" v-bind:to="{name: 'Topnews', params: {id: row.id} }">{{row.title}}</router-link></h3>
</div></div></div>
</template>
<script>
export default {
data: function() {
return {
news: [],
}
},
created: function() {
let uri = '/news';
Axios.get(uri).then((response) => {
this.news = response.data;
});
},
computed: {
filteredNews: function() {
if (this.news.length) {
return this.news;
}
}
}
}
</script>
Topnews.vue
<template id="topnews1">
<div class="col-sm-7">
<div class="cars">
<img :src="topnews.thumb" class="img-responsive" width=100%/>
<div class="name" ><h3>{{ topnews.title }}</h3>
<p>
<br>{{ topnews.info }}<br/>
</p>
</div></div></div>
</template>
<script>
export default {
data:function(){
return {topnews: {title: '', thumb: '', info: ''}}
},
created:function() {
let uri = '/news/'+this.$route.params.id;
Axios.get(uri).then((response) => {
this.topnews = response.data;
});
}
}
</script>
Like GoogleMac said Vue will reuse the same component whenever possible. Since the route for both IDs use the same component Vue will not recreate it, so the created() method is only being called on the first page. You'll need to use the routers beforeRouteUpdate to capture the route change and update the data.
in TopNews.vue:
export default {
data:function(){
return {topnews: {title: '', thumb: '', info: ''}}
},
beforeRouteEnter:function(to, from, next) {
let uri = '/news/'+ to.params.id;
Axios.get(uri).then((response) => {
next(vm => {
vm.setData(response.data)
})
});
},
beforeRouteUpdate: function(to, from, next) {
let uri = '/news/'+ to.params.id;
Axios.get(uri).then((response) => {
this.setData(response.data);
next();
});
},
methods: {
setData(data) {
this.topnews = data
}
}
}
If you click a link referring to the page you are on, nothing will change. Vue Router is smart enough to not make any changes.
My guess is that the IDs are messed up. If you are using Vue devtools you will be able to easily see what data is in each link. Are they as you expect.
In my vue component I have code that conditionally renders a div:
<div v-if="successCriteria()" id="success">
<div class="row">
<div class="col-md-12">
<Commit-chart :data="chartOptions" ></Commit-chart>
</div>
</div>
</div>
<div v-else>
There has been an error with rendering.
</div>
</div>
and I am trying to test this using jasmine. For example, when the success criteria is met, the success div is present. here is my test:
describe('Graph Tests', () => {
const getComponent = (prop1,prop2) =>{
let vm = new Vue({
template: '<div><graph ref="graph" :label=prop1 :data=prop2></graph></div>',
components: {
graph,
},
})
return vm;
}
it('Renders correctly with valid props', () => {
const label = ['j', 'a' ,'c', 'k'];
const data=[1,2,3,4]
var vm = getComponent(label,data).$mount();
console.info(vm.$refs.graph.$el);
expect(vm.$refs.graph.$el.querySelector('success')).toBeTruthy();
});
});
}
When I log vm.$refs.graph.$el I get:
INFO: <!---->
in the console which I am very confused about. Can anyone help me get the div with id "success" ?
Thank you.
The selector for an id of "success" is '#success'. Or you can use getElementById.
However, the output from your program indicates the component is not rendering at all.
I have a navigation which load dynamically content via ajax. But if I refresh the page or visit another url and go back the current content is away and I see the old content under the first menu tab.
What is the best way to solve this problem? Can you give me some code?
The index.php include the elements navigation.inc.php and main_container.inc.php
<?php include("inc/incfiles/header_registrated.inc.php"); ?>
<?php
if (!isset($_SESSION["userLogin"])) {
echo "<meta http-equiv=\"refresh\" content=\"0; url=http://localhost/project\">";
}
else {
echo "";
}
?>
<?php include("inc/incfiles/navigation.inc.php"); ?>
<?php include("inc/incfiles/main_container.inc.php"); ?>
<?php include("inc/incfiles/footer.inc.php"); ?>
navigation.inc.php:
<div class="navigation">
<ul>
<li id="1">
<div id="menuImage1" class="menuImage"></div>
<div class="menuText"><p>Punkt 1</p></div>
<div class="navigationDart"></div>
</li>
<li id="2">
<div id="menuImage2" class="menuImage"></div>
<div class="menuText"><p>Punkt 2</p></div>
</li>
<li id="3">
<div id="menuImage3" class="menuImage"></div>
<div class="menuText"><p>Punkt 3</p></div>
</li>
<li id="4">
<div id="menuImage4" class="menuImage"></div>
<div class="menuText"><p>Punkt 4</p></div>
</li>
<li id="5">
<div id="menuImage5" class="menuImage"></div>
<div class="menuText"><p>Punkt 5</p></div>
</li>
<li id="6">
<div id="menuImage6" class="menuImage"></div>
<div class="menuText"><p>Punkt 6</p></div>
</li>
</ul>
</div>
main_container.inc.php:
<div class="mainContainer">
<div class="containerHeader">
<div class="contentHeader">
</div>
</div>
<div class="contentContainer">
<div class="content">
</div>
<div class="advertisement">
</div>
</div>
</div>
Now the divs content, cnotentHeader and advertisement (in file main_content.inc.php) is filled via ajax. Also the navigation has some jquery effects which also have to be the same after page refresh.
$(document).ready(function() {
$.get('inc/incfiles/content_container/header/1.php', function(data) {
$('.contentHeader').html(data);
});
$.get('inc/incfiles/content_container/content/1.php', function(data) {
$('.content').html(data);
});
$.get('inc/incfiles/content_container/advertisement/1.php', function(data) {
$('.advertisement').html(data);
});
var current = '1.php';
$(".navigation li").click(function() {
var quelle = $(this).attr('id') + ".php";
// the current content doesn't load again
if(current === quelle) {
return;
}
current = quelle;
// content
$(".content").fadeOut(function() {
$(this).load("inc/incfiles/content_container/content/" + quelle).fadeIn('normal');
})
// advertisement
$(".advertisement").fadeOut(function() {
$(this).load("inc/incfiles/content_container/advertisement/" + quelle).fadeIn('normal');
})
// header
$(".contentHeader").fadeOut(function() {
$(this).load("inc/incfiles/content_container/header/" + quelle).fadeIn('normal');
})
});
$(".navigation li").click(function() {
$(".menuImage").removeClass("menuImageActive1");
$(".menuImage").removeClass("menuImageActive2");
$(".menuImage").removeClass("menuImageActive3");
$(".menuImage").removeClass("menuImageActive4");
$(".menuImage").removeClass("menuImageActive5");
$(".menuImage").removeClass("menuImageActive6");
});
$("#1").mousedown(function() {
$("#menuImage1").addClass("menuImageClick1"); // new class on mouse button press
});
$("#1").mouseup(function() {
$("#menuImage1").removeClass("menuImageClick1"); //remove class after mouse button release
});
$("#1").click(function() {
$("#menuImage1").addClass("menuImageActive1");
});
$("#2").mousedown(function() {
$("#menuImage2").addClass("menuImageClick2"); // new class on mouse button press
});
$("#2").mouseup(function() {
$("#menuImage2").removeClass("menuImageClick2"); //remove class after mouse button release
});
$("#2").click(function() {
$("#menuImage2").addClass("menuImageActive2");
});
$("#3").mousedown(function() {
$("#menuImage3").addClass("menuImageClick3"); // new class on mouse button press
});
$("#3").mouseup(function() {
$("#menuImage3").removeClass("menuImageClick3"); //remove class after mouse button release
});
$("#3").click(function() {
$("#menuImage3").addClass("menuImageActive3");
});
$("#4").mousedown(function() {
$("#menuImage4").addClass("menuImageClick4"); // new class on mouse button press
});
$("#4").mouseup(function() {
$("#menuImage4").removeClass("menuImageClick4"); //remove class after mouse button release
});
$("#4").click(function() {
$("#menuImage4").addClass("menuImageActive4");
});
$("#5").mousedown(function() {
$("#menuImage5").addClass("menuImageClick5"); // new class on mouse button press
});
$("#5").mouseup(function() {
$("#menuImage5").removeClass("menuImageClick5"); //remove class after mouse button release
});
$("#5").click(function() {
$("#menuImage5").addClass("menuImageActive5");
});
$("#6").mousedown(function() {
$("#menuImage6").addClass("menuImageClick6"); // new class on mouse button press
});
$("#6").mouseup(function() {
$("#menuImage6").removeClass("menuImageClick6"); //remove class after mouse button release
});
$("#6").click(function() {
$("#menuImage6").addClass("menuImageActive6");
});
$("#1").click(function(){
$(".navigationDart").animate({
top: "16px"
}, 500 );
});
$("#2").click(function(){
$(".navigationDart").animate({
top: "88px"
}, 500 );
// Get the src of the image
// var src = $(this).css("top");
// Send Ajax request to backend.php, with src set as "img" in the POST data
// $.post("/home.php", {"#2": top});
});
$("#3").click(function(){
$(".navigationDart").animate({
top: "160px"
}, 500 );
});
$("#4").click(function(){
$(".navigationDart").animate({
top: "232px"
}, 500 );
});
$("#5").click(function(){
$(".navigationDart").animate({
top: "304px"
}, 500 );
});
$("#6").click(function(){
$(".navigationDart").animate({
top: "376px"
}, 500 );
});
});
You can use sessions. When you load content through ajax, store that response into a session variable and in your navigation you can add an if condition
if(isset($_SESSION['ajaxresponse'])) etc.
Ok, in your php file which serves your ajax request, please add the following line
// assuming that your contents can be stored in a variable $contents
$_SESSION['mycontent'] = $contents;
Now where you display your ajax response, add the following line of code there
if(isset($_SESSION['mycontent']) && !empty($_SESSION['mycontent']))
echo $_SESSION['mycontent'];
Make sure you are declaring session_start();
Hope this would be helpful! Sorry! If I could not understand the scenario of your problem.