I am using Laravel+VueJs. I stuck on one thing. I am trying to load a new view using laravel route. I am using axios.
getRelatedChat(id) {
return axios.get('/chat/'+id).then(({ data }) => {
// document.write(data)
});
}
The code of whole view is coming in console as output, but i want to load it like window.url does for us. Have no idea how to do.
Vue has its own router. If you want to load a new page you can still use axios to get the data you want to show in the next page you want to open. Just try the Vue Router
I was making a nonsense. Actually there is no need to load the view. I can update some variable that are using on present component just like this:
axios.get('/chat/json/'+id).then(({ data }) => {
this.messages =data.messages;
this.withUser = data.user;
}
Related
I am using Spring boot, JPA with mysql, and thymeleaf and openlayers for the map.
So i have a map, and on this map there are dynamically generated markers for different places. What I want is when I click any of those markers to send the name of the marker to my controller and in response get an array of fishes that can be caught in this specific area and then display the names and pictures of the fishes in a dynamically generated list located on the sidebar . I cant think on how I can achieve that. Ive made a HTML page to show how I want it to look.
I was thinking about making a get request and giving the name as a path variable but then idk how I can do that request from the javascript when the button is clicked. Any ideas or concepts that I can read about are apreciated.
Most DOM elements in html are accessible in javascript via something like document.getelementbyid and typically if I remember this correctly most of the objects you can do something like domobject.addEventListener("click", myScript); and in myScripy make an http call to spring requesting the list of fish. I recommend setting some breakpoints in your JavaScript code via the dev console in your browser and looking through some of the objects that are produced
You can make a get request like described here. developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
Clicking on the markers would be similar to this example https://openlayers.org/en/latest/examples/icon.html, but instead of showing a popup you make a GET request for more data
map.on('click', function (evt) {
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
if (feature) {
const name = feature.get('name');
// now make get request
// ....
}
});
If you are requesting an image you could use xhr as in https://openlayers.org/en/latest/apidoc/module-ol_Tile.html#~LoadFunction or you could use fetch, similar to:
fetch(url).then(function(response) {
if (response.ok) {
return response.blob();
}
}).then(function(result) {
if (result) {
const imagesrc = URL.createObjectURL(result);
}
});
I have been trying to find a way to read data from phpspreadsheet and populate it into a textbox in html using the autocomplete plugin in jquery. I have been trying to do it in codeigniter and I am relatively new to it. Can anyone tell me the steps to go through this process? I
I believe you can do this by having the spreadsheet data loaded on one page and then redirect them to a second page and include the data from the spreadsheet.
This all pseudo-code to show the idea that I'm trying to explain.
function index() {
use PhpOffice\PhpSpreadsheet\IOFactory;
use PhpOffice\PhpSpreadsheet\Reader\IReadFilter;
use PhpOffice\PhpSpreadsheet\Spreadsheet;
$spreadsheet = IOFactory::load($inputFileName);
$sheetData = $spreadsheet->getActiveSheet()->toArray(null, true, false, true);
$_SESSION['sheetdata'] = $sheetData;
redirect('secondpage');
}
function secondpage() {
$data['sheetdata'] = $_SESSION['sheetdata'];
// use this for the autocomplete
// templaste stuff here
}
I am new to UI coding and started using react-admin for putting some simple pages. Everything went well and we are able to host pages correctly. But we have noticed random issues where the background image is filling up the entire screen or sometimes the whole page gets reduced to the hamburger menu. I have disabled the registerServiceWorker to stop having my pages in cache. Not sure if this is causing the weird UI behavior.
I don't know why you get those issues, the description is way too generic and it seems you don't have any idea what the problem can be, probably due to being new to the area. Either way the kind of problem you appear to have is probably related to CSS which is a way give style to your page. But React Admin doesn't use CSS directly, you can use it that way, but for more dynamic way to style the page the Material-ui library uses a thing called JSS to apply the styles.
There are many libraries that are being used together in order to produce React Admin, you should have an understanding of the most important ones in order to do something fancy. My advice to you since you are new, and you pretend to use React Admin, first use what React Admin offers and when you feel comfortable using that components and have a general grasp how the framework works, after that start implementing your own components that don't have a direct relation to React Admin but use some of the same libraries of React Admin.
Also check if you are creating a React Admin app using the <Admin> component or are embedding React Admin in another app since the second is more probable to produce bugs.
After some debugging, I think i figured out the cause of this issue. I had a custom button to duplicate a row (basically post a create and route to edit page on the new id). For some reason, the rendering of that button seems to have caused this issue inconsistently. The actual button works fine but causes this inconsistent behavior. Below is the code for that button. Is there any issue with the below?:
export default class DuplicateButton extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = ({ redirect: false });
var redirectPath = '';
}
handleClick = (props) => {
var
{
push, record, resourceName
} = this.props;
let tempRecord = record;
var result = '';
console.log(this.props);
var p = restDataProvider(CREATE, this.props.resource + "/" + tempRecord.id, { data: tempRecord }).then(resp => {
result = resp.data;
let routePath = '/' + this.props.resource + '/' + result.id;
console.log(routePath);
this.redirectPath = routePath;
this.setState({ redirect: true });
return result;
});
}
render() {
if (this.state.redirect) {
console.log('Redirect to Edit page');
return <Redirect push to={this.redirectPath} />;
}
return <Button variant="flat" color="primary" label="Duplicate Entry" onClick={this.handleClick}><DuplicateIcon /></Button>;
}
}
I am using an ionic tabs project. IONIC uses angular JS's ui-router for routing.
In a tab I want to have multiple state and I want to route between states.
for routing between states i am using $state.g();
here is my code:
app.js
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('footer',{
url:'/footer',
abstract:true,
templateUrl:'templates/footer.html'
})
.state('footer.home',{
url:'/home',
abstract:true,
views:{
'footer-home':{
templateUrl:'/templates/hometemplate.html',
controller:'HomeCtrl'
}
}
})
.state('footer.home.mainhome',{
url:'/mainhome',
parent:'footer.home',
views:{
'footer-home-landing':{
templateUrl:'/templates/myHome.html',
controller:'HomeCtrl'
}
}
})
.state('footer.home.about',{
url:'/about',
parent:'footer.home',
views:{
'footer-home-about':{
templateUrl:'templates/test.html',//template:'<p>asasdfa</p>',
controller:'AboutCtrl'
}
}
})
hometemplate.html: i have two ion-nav-view's inside on ion-nav-view
<ion-nav-view view-title="HomeTemplate">
<ion-nav-view name="footer-home-landing"></ion-nav-view>
<ion-nav-view name="footer-home-about"></ion-nav-view>
</ion-nav-view >
Now in myHome.html i have an image. on click of image I am using $state.go('footer.home.about');
In my test.html, i have one image on click of it want to take back to my myHome.html using $state.go('footer.home.myhome').
Here comes the problem. while going back to 'footer.home.myhome' myhome contents are not getting displayed. still the test.html contents are displaying but the click events on it are not triggering.
Strange behavior. Not understanding where I did wrong.
its almost like angular js, no need to worry about ionic.
Can somebody help me?
Not sure if this is just a mistake in your question but you should be using $state.go('footer.home.mainhome') instead of 'myhome'
The way i was trying is not correct.
found the right way of doing it here: http://codepen.io/TimothyKrell/pen/bnukj
so, instead loading two child states in an abstract state, have one state and have the other as their child state.
my code is not this way
.state('footer',{
url:'/footer',
abstract:true,
// views:{
// 'MainScreen':{
templateUrl:'templates/footer.html',
data: {
requireLogin: true
}
//}
//}
})
.state('footer.home',{
url:'/home',
// abstract:true,
views:{
'footer-home':{
templateUrl:'/templates/Home.html',
controller:'HIPACCtrl'
},
}
})
.state('footer.home.about',{
url:'/abouthipac',
//parent:'footer.home',
views:{
'footer-home#footer':{
templateUrl:'templates/test.html',//template:'<p>asasdfa</p>',
controller:'AboutCtrl'
}
}
})
I have a static route for
/public/slides/lecture1.html#!3
which displays the third div element (other div HTMLelements will have display:none;) of lecture1.html.
I use Express app.use(express.static(WEBROOT)); and everything works fine. But I want to be able to make that slide AJAX Crawable so I want to react on request which looks like this:
/public/slides/lecture1.html?_escaped_fragment_=3
and return single page with only that one div element - so that Google would index texts from slide 3 in lecture1.html properly.
How do I do that using Express?
Is it possible to add GET request handler on link which is already served by express.static?
Thanks
Check out https://github.com/OptimalBits/Crawlme. It is an express middleware that handles this automatically. Just do this and you're ajax-crawlable:
var
express = require('express'),
http = require('http'),
crawlme = require('crawlme');
var app = express()
.use(crawlme())
.use(express.static(__dirname + '/webroot'));
http.createServer(app).listen(80);
As we talked on IRC, this wouldn't be in the "static route" category (I mean you won't be serving this with express.static).
What you would do is create an Express route and render that file based on your query variables:
app.get('/lecture1.html', function (req, res) {
if (req.query._escaped_fragment_ == 3) {
// .. do something..
} else {
// render lecture1.html here
// you can just rename the file lecture1.ejs
// move it to the views directory
// and then render it like res.render('lecture1.ejs');
}
});
you can use the req.query property to access the query string in an express request.