I am trying to do this tutorial and at first it was all fine but after using the angular ui-router when i run the server all I get is a blank page. I can insert into db via terminal and the jason data are all working fine but the page is loading to a blank page...
public/javascripts/angularApp
var app = angular.module('flapperNews', [require('angular-ui-router')]);
app.factory('posts', ['$http',function($http){
var o = {
posts: []
};
return o;
o.getAll = function() {
return $http.get('/posts').success(function(data){
angular.copy(data, o.posts);
});
};
}]);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.posts = posts.posts[$stateParams.id];
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({title: $scope.title, link: $scope.link, upvotes: 0});
$scope.title = '';
$scope.link = '';
};
$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
};
}]);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
resolve: {
postPromise: ['posts', function(posts){
return posts.getAll();
}]
}
});
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
app.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
$scope.addComment = function(){
if($scope.body === '') { return; }
$scope.post.comments.push({
body: $scope.body,
author: 'user',
upvotes: 0
});
$scope.body = '';
};
}]);
routes/index.js`
var mongoose = require('mongoose');
var express = require('express');
var router = express.Router();
var Post = mongoose.model('Post');
var Comment = mongoose.model('Comment')
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.get('/posts', function(req, res, next) {
Post.find(function(err, posts){
if(err){ return next(err); }
res.json(posts);
});
});
/* for saving post into db */
router.post('/posts', function(req, res, next) {
var post = new Post(req.body);
post.save(function(err, post){
if(err){ return next(err); }
res.json(post);
});
});
/* for retriving one post from db */
router.param('post', function(req, res, next, id) {
var query = Post.findById(id);
query.exec(function (err, post){
if (err) { return next(err); }
if (!post) { return next(new Error('can\'t find post')); }
req.post = post;
return next();
});
});
/* for retriving one comment from db */
router.param('comment', function(req, res, next, id) {
var query = Post.findById(id);
query.exec(function (err, comment){
if (err) { return next(err); }
if (!comment) { return next(new Error('can\'t find comment')); }
req.comment = comment;
return next();
});
});
/*for displaying the retrieved post*/
router.get('/posts/:post', function(req, res) {
res.json(req.post);
});
/*for displaying the post upvote*/
router.put('/posts/:post/upvote', function(req,res,next){
req.post.populate('comment',function(err,post){
if(err){return next(err);}
res.json(post);
});
});
/*saving comment*/
router.post('/posts/:post/comments',function(req, res, next){
var comment = new Comment(req.body);
comment.post = req.post;
comment.save(function(err,comment){
if(err){return next(err);}
req.post.comments.push(comment);
req.post.save(function(err,post){
if(err){return next(err);}
res.json(comment);
});
});
});
/*display comment upvote*/
router.put('/posts/:post/comments/:comment/upvote', function(req,res,next){
req.comment.upvote(function(err,comment){
if(err){return next(err);}
res.json(comment);
});
});
module.exports = router;
views/index.ejs
<html>
<head>
<title>My Angular App!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="/javascripts/angularApp.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="upvote(post)"> </span>
{{post.upvotes}}
<span class="glyphicon glyphicon-thumbs-down" ng-click="downvote(post)"></span>
<span style="font-size:20px;margin-left:10px">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
<span ng-show="post.author">
posted by <a>{{post.author}}</a> |
</span>
</span>
<span>
Comments
({{post.comments.length}})
</span>
</div>
<form ng-submit="addPost()" ng-show="isLoggedIn()" style="margin-top:30px">
<h3>Add a new post:</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" ng-model="title">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Link" ng-model="link">
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
<div ng-hide="isLoggedIn()">
<h3>You need to Log In or Register before you can add a post.</h3>
</div>
</script>
<script type="text/ng-template" id="/posts.html">
<div class="page-header">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
</div>
<div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="upvote(comment)"></span>
{{comment.upvotes}}
<span class="glyphicon glyphicon-thumbs-down" ng-click="downvote(comment)"></span>
- by {{comment.author}}
<span style="font-size:20px; margin-left:10px;">
{{comment.body}}
</span>
</div>
<form ng-submit="addComment()"
style="margin-top:30px;">
<h3>Add a new comment</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Comment"
ng-model="body"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>
app.js
var mongoose = require('mongoose');
require('./models/Posts');
require('./models/Comments');
mongoose.connect('mongodb://localhost/news');
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
I had the same problem as well. They need to fix it in the tutorial, but in in your angularApp.js file you have this:
var app = angular.module('flapperNews', [require('angular-ui-router')]);
For ui-router, you actually have to inject it like so:
var app = angular.module('flapperNews', ['ui.router']);
Hope that helps!
Personally, I also just created separate files for my views so that I could add to it later a little neater since I don't like having all that on my index page.
In your Angularapp file, try moving your return o statement below the o.getAll() function so you actually get the posts loaded in the array before it is returned. This worked for me.
app.factory('posts', ['$http', function($http){
var o = {
posts: []
};
o.getAll = function() {
return $http.get('/posts').success(function(data){
angular.copy(data, o.posts);
});
};
return o;
}]);
Related
I have a problem capturing multiple images to my function in vue and pass to the controller. I am trying to modify my blade file which works well when using just the normal form. I am trying to modify to vue but I have a problem with image section. Please assist me on how to achieve this.
my form:
<label for="">Description</label>
<textarea name="description" class="form-control" v-model="description"> </textarea>
<label for="">Images</label>
<input type="file" #change="fieldChange" class="form-control input-sm" name="images[]"
multiple>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
The vue section
data(){
return {
id:'',
price:'',
title:'',
description:'',
location:'',
images:[],
}
},
methods:{
fieldChange(e){
let selectedFiles=e.target.files;
if(!selectedFiles.length){
return false;
}
for(let i=0;i<selectedFiles.length;i++){
this.images.push(selectedFiles[i]);// am able to console the images
}
},
saveImageData(){
var self=this;
axios.post('/senddata',{
title:this.title,
description:this.description,
location:this.location,
images:this.images.file.name,
price:this.price,
})
},
My Laravel function
public function store(Request $request)
{
$product=Products::create([
'title'=>$request['title'],
'description'=>$request['description'],
'price'=>$request['price'],
'location'=>$request['location']
]);
$images= $request->file('images');
foreach ($images as $image){
$move=$image->move(public_path().'/images2/',$image->getClientOriginalName());
if($move){
$imagedata=Images::create([
'title'=>$image->getClientOriginalName(),
'filename'=>$image->getClientOriginalName()
]);
$product->images()->attach([$imagedata->id]);
}
Here is the working code for vuejs part - https://picupload.netlify.app/
https://github.com/manojkmishra/dw_take5/blob/master/src/components/ImageUploader.vue
Vue part
<template>
<div class="uploader"
#dragenter="OnDragEnter"
#dragleave="OnDragLeave"
#dragover.prevent
#drop="onDrop"
:class="{ dragging: isDragging }">
<div class="upload-control" v-show="images.length">
<label for="file">Select files</label>
<button #click="upload">Upload</button>
</div>
<div v-show="!images.length">
<i class="fa fa-cloud-upload"></i>
<p>Drag your images here</p><div>OR</div>
<div class="file-input">
<label for="file">Select files</label>
<input type="file" id="file" #change="onInputChange" multiple>
</div>
</div>
<div class="images-preview" v-show="images.length">
<div class="img-wrapper" v-for="(image, index) in images" :key="index">
<img :src="image" :alt="`Image Uplaoder ${index}`">
<div class="details">
<span class="name" v-text="files[index].name"></span>
<span class="size" v-text="getFileSize(files[index].size)"> </span>
</div>
</div>
</div>
<div v-show="images.length" class="progress">
<div
class="progress-bar progress-bar-info progress-bar-striped"
role="progressbar" :aria-valuenow="progress"
aria-valuemin="0" aria-valuemax="100"
:style="{ width: progress + '%' }"
>
{{ progress}}%
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default
{ data: () => ({ isDragging: false, dragCount: 0, files: [],images: [] ,progress:0}),
methods: {
OnDragEnter(e) { e.preventDefault();
this.dragCount++;
this.isDragging = true;
return false;
},
OnDragLeave(e) { e.preventDefault();
this.dragCount--;
if (this.dragCount <= 0) this.isDragging = false;
},
onInputChange(e) { const files = e.target.files;
Array.from(files).forEach(file => this.addImage(file));
},
onDrop(e) {console.log('ondrop-evnt e=',e)
e.preventDefault();
e.stopPropagation();
this.isDragging = false;
const files = e.dataTransfer.files;
Array.from(files).forEach(file => this.addImage(file));
},
addImage(file) {console.log('addimage file=',file)
if (!file.type.match('image.*')) { this.$toastr.e(`${file.name} is not an image`);
return;
}
this.files.push(file);
const img = new Image(),
reader = new FileReader();
reader.onload = (e) => this.images.push(e.target.result);
reader.readAsDataURL(file);
console.log('addimage this.images=',this.images)
},
getFileSize(size) { const fSExt = ['Bytes', 'KB', 'MB', 'GB'];
let i = 0;
while(size > 900) { size /= 1024; i++; }
return `${(Math.round(size * 100) / 100)} ${fSExt[i]}`;
},
upload() { //this.progress = '0';
const formData = new FormData();
this.files.forEach(file =>
{ formData.append('images[]', file, file.name); });
console.log('upload triggered FormData=',formData)
// resp=axios.post('http://127.0.0.1:8000/sendemail1',this.formData);
// axios.post('http://127.0.0.1:8000/api/imagesupload', formData,
axios.post('https://uat.oms.dowell.com.au/api/imagesupload', formData,
{onUploadProgress:uploadEvent=>{ this.progress=Math.round(uploadEvent.loaded/uploadEvent.total*100);
console.log('upld prges:'+ Math.round(uploadEvent.loaded/uploadEvent.total*100)+'%')
}
})
//axios.post('https://uat.oms.dowell.com.au/api/imagesupload', formData)
.then(response => {
this.$toastr.s('All images uplaoded successfully');
this.images = [];
this.files = [];
this.progress = 0;
})
.catch(() => {
this.$toastr.e('Could not upload the files!');
this.images = [];
this.files = [];
this.progress = 0;
});
}
}
}
</script>
Another version with vuetify
https://github.com/manojkmishra/take5-front-admin/blob/master/src/components/img/imgup.vue
Here is laravel part
public function imagesupload(Request $request){
if (count($request->images)) {
foreach ($request->images as $image) {
$image->store('images');
}
}
return response()->json(["message" => "Done"]);
}
Another way in laravel is here
https://github.com/manojkmishra/take5-api/blob/master/app/Http/Controllers/PicController.php
I have tried to upload a file using vue.js as front end technology and laravel in the back end. I have tried to pass the file object using formData javascript object but the server responds as the value is not passed.
I have tried to log the file using console.log and it appropriately displays the data.
Consider that I have discarded some field names.
Template Code
<template>
<b-container>
<div align="center">
<b-card class="mt-4 mb-4 col-md-8" align="left" style="padding: 0 0;">
<card-header slot="header" />
<b-form>
<div class="row">
<div class="col-6 col-md-6">
<b-button
type="submit"
variant="success"
class="float-right col-md-5"
v-if="!update"
#click="save"
squared
>
<i class="fas fa-save"></i>
Save
</b-button>
</div>
</div>
<hr style="margin-top: 10px;" />
<b-form-group
label-cols="12"
label-cols-lg="3"
label-for="input-2"
label="Remark: "
label-align-sm="right"
label-align="left"
>
<b-form-textarea
id="textarea"
v-model="record.remark"
rows="2"
max-rows="3"
></b-form-textarea>
</b-form-group>
<b-form-group
label-cols="12"
label-cols-lg="3"
label-for="input-2"
label="Remark: "
label-align-sm="right"
label-align="left"
>
<b-form-file
v-model="record.attachement"
:state="Boolean(record.attachement)"
placeholder="Choose a file..."
drop-placeholder="Drop file here..."
></b-form-file>
</b-form-group>
</b-form>
<status-message ref="alert" />
</b-card>
</div>
</b-container>
</template>
Script Code
<script>
import { mapGetters, mapActions } from "vuex";
export default {
props: ["id", "user_id"],
data: () => ({
record: {
remark: "",
attachement: null
}
}),
methods: {
...mapActions([
"addBenefitRequest",
]),
save(evt) {
evt.preventDefault();
this.$validator.validate().then(valid => {
if (valid) {
const Attachement = new FormData();
Attachement.append("file", this.record.attachement);
var object = {
remark: this.remark
};
this.addBenefitRequest(object, Attachement);
}
});
},
},
computed: mapGetters([
"getStatusMessage",
"getBenefitRequest",
])
};
</script>
Store Code
async addBenefitRequest({ commit }, object, Attachement) {
try {
const response = await axios.post(
commonAPI.BENEFIT_BASE_URL + "/benefit-requests",
object,
Attachement,
{
headers: {
"Content-Type": "multipart/form-data"
}
}
);
commit("pushBenefitRequest", response.data);
commit("setStatusMessage", "Record has been added.");
} catch (error) {
return error
},
Controller Code
public function store(Request $request, Request $request2)
{
$this->validate($request, [
'employee_id' => 'required|string',
'requested_date' => 'required|date',
// 'benefit_type_id' => 'required|string|exists:benefit_types,id',
'reason' => 'required|string',
]);
$this->validate($request2, [
'attachement' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048'
]);
// $success = BenefitRequest::exists($request->employee_id);
// if(!$success)
// return response()->json("Employee doesn't exist", 422);
$id = (string) Str::uuid();
if($request2->attachement)
{
$attachement = $request2->file('attachement')->store('Benefits');
$request->merge(['attachement' => $attachement]);
}
// $request->attachement = $request->file('attachement')->store('Benefits');
$request->merge(['id' => $id]);
BenefitRequest::create($request->all());
return response()->json('Saved', 201);
}
Route
$router->post('',
['uses' => 'BenefitRequestController#store',
'group'=>'Benefit requests',
'parameter'=>'employee_id, requested_date, requested_by, benefit_type_id, reason, remark, status',
'response'=>'<statusCode, statusMessage>'
]);
Here is an example. you can try it
index.vue
`<div id="app">
<div v-if="!image">
<h2>Select an image</h2>
<input type="file" #change="onFileChange">
</div>
<div v-else>
<img :src="image" />
<button #click="removeImage">Remove image</button>
</div>
</div>`
new Vue({
el: '#app',
data: {
image: ''
},
methods: {
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},
createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
removeImage: function (e) {
this.image = '';
}
}
})
please see my code that I'am not sure what I'm doing wrong? when the search input is empty then it shows all data from db how to fix, vue lenght doesnt work??
var app = new Vue({
el: '#newsearch',
data: {
qry: '',
bUrl: 'http://localhost:8000',
results: [],
},
methods: {
autoComplete(){
this.results=[];
axios.post(this.bUrl + '/search', {
qry: this.qry
})
.then ( (response) => {
app.results = response.data;
})
}
}
});
html
<p class="control is-expanded has-icons-right">
<input class="input" v-model="qry" v-on:Keyup="autoComplete" type="text" placeholder=">.<"/>
</p>
<p class="control">
<a class="button is-dark">
<i class="fa fa-search"></i>
</a>
</p>
<div v-show="results.length">
<p v-for="result in results">
#{{result.anime_name}}
</p>
</div>
</div>
Send axios request only when qry isn't empty.
methods: {
autoComplete(){
this.results=[];
if(this.qry !== '') {
axios
.post(this.bUrl + '/search', {
qry: this.qry
})
.then ( (response) => {
app.results = response.data;
})
}
}
}
I want to submit data via modal Semantic UI and Vuejs. But my form cannot submit data via Ajax. i'm tired to find the problem, maybe someone can help me.
My View like this.
<form v-on:submit.prevent="addProductCategory" class="ui form">
<div class="content">
<div class="description">
<div class="field" v-bind:class="{'has-error': input.errorsAddProductCategory.name}">
<label for="name">Name</label>
<input v-model="input.addProductCategory.name" type="text" id="name" name="name">
<div class="help-block" v-if="input.errorsAddProductCategory.name"
v-text="input.errorsAddProductCategory.name[0]"></div>
</div>
</div>
</div>
<div class="actions">
<div class="ui black deny button">
No
</div>
<button type="submit" class="ui positive right button">Add</button>
</div>
</form>
<script type="text/javascript">
const CSRF_TOKEN = '{{ csrf_token() }}';
const URLS = {
productCategory: {
addProductCategory: '{{ route('product-category.store') }}',
}
};
</script>
Function to Add Data.
function addProductCategory() {
var data = app.input.addProductCategory;
data._token = CSRF_TOKEN;
$.ajax({
url: URLS.productCategory.addProductCategory,
method: 'POST',
data: data,
success: function (data) {
app.input.addProductCategory = {
name: ""
};
app.input.errorsAddProductCategory = [];
$('#modal-create').modal('hide');
}
error: function (data) {
if (data.status === 401) { // unauthorized
window.location.reload();
} else if (data.status === 422) {
app.input.errorsAddProductCategory = data.responseJSON;
} else {
alert('There is an error.');
console.log(data);
}
}
});
}
And Vuejs
var app = new Vue({
el: "#app",
data: function () {
return {
input: {
addProductCategory: {
name: ""
},
errorsAddProductCategory: [],
editProductCategory: {
name: ""
},
errorsEditProductCategory: []
}
};
},
methods: {
addProductCategory: addProductCategory,
}
});
I am completely new to programming and at this stage of developing my website I need to set up a simple long polling request to get the newest messages from the db and then show them to the client.
I created a messaging system last day and now it saves the messages with all needed relations between messages and users...
Here is what I did :
var express = require('express');
var router = express.Router();
var Conversation = require('../models/conversation');
var Promise = require('promise');
// Get Homepage
router.get('/', function(req, res){
res.render('index');
});
var messages = [];
router.get('/inbox', function(req, res){
var promise = new Promise(function (resolve, reject) {
req.user.conversations.forEach(function(id){
Conversation.getConversationById(id, function(err, conv){
if (conv){
messages.push(conv);
if(messages.length == req.user.conversations.length){
resolve(messages);
messages = [];
}
} else {
console.log(err);
}
});
});
}).then(function(object){
res.render('inbox', {convers: object});
}).catch(function(err){
console.log(err);
});
});
// Add new messages to messagesArray -> mesgArray to display them
var mesgArray = [];
var userIdFor = "";
router.post('/messages', function(req, res){
var convId = req.body.conversationId;
userIdFor = req.user.id;
var promise = new Promise(function(resolve, reject){
Conversation.getConversationById(convId, function(err, conver){
if (err){
console.log(err);
} else {
conver.messages.forEach(function(messa){
mesgArray.push({msg: messa.msg, owner: messa.msgOwner, ownerName: messa.msgOwnerName});
if(mesgArray.length == conver.messages.length){
resolve(mesgArray);
}
});
}
});
}).then(function(object){
res.send({allMessages: object, userId: userIdFor});
mesgArray = [];
userIdFor = "";
}).catch(function(err){
console.log(err);
});
});
// Save posted message to existent conversation
router.post('/saveMsg', function(req, res){
var conversationId = req.body.conversationId;
var messageToSave = req.body.message;
console.log(messageToSave);
console.log(conversationId);
Conversation.getConversationById(conversationId, function(err, conversation){
if (err){
console.log(err);
} else {
Conversation.getConversationById(conversationId, function(err, conversation){
if(err){
console.log(err)
} else {
conversation.messages.push({
msg: messageToSave,
msgOwner: req.user.id,
msgOwnerName: req.user.firstName
});
conversation.save(function(err){
if(err){
console.log(err);
}
})
}
});
}
});
});
module.exports = router;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!-- REPLAY MESSAGE BOX -->
<div class="contact-form-container hidden-mode">
<div class="row hide-contact text-right">
<img src="/images/close.png">
</div>
<form>
<div class="inbox-all-messages-container">
<div class="row inbox-all-messages">
<!-- Here will be all the messages -->
</div>
<div class="row text-center inbox-send-input">
<div class="col-lg-11 col-md-11 col-sm-11">
<textarea class="inbox-message-response-txt" placeholder="Type your message here"></textarea>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 text-center inbox-message-send-btn">
<p class="inbox-message-send-msg-btn">Send</p>
</div>
</div>
</div>
</form>
</div>
<script>
$(document).ready(function(){
var convId = "";
$('.inbox-messager').on('click', function(){
$('.inbox-all-messages').empty();
var conversationId = this.getAttribute("data-conv-id");
convId = conversationId;
$.ajax({
url: '/messages',
method: 'POST',
contentType: 'application/json',
data: JSON.stringify({conversationId: conversationId}),
success: function(response){
response.allMessages.forEach(function(message){
if(message.owner == response.userId){
$('.inbox-all-messages').append(
'<div class="row inbox-message-structure-meNot">'+
'<div class="row inbox-message-header">'+
'<div class="inbox-message-ava col-lg-1 col-md-1 col-sm-1">'+
'<img src="/images/avatar.jpg" class="inbox-message-header-ava-img">'+
'</div>'+
'<div class="inbox-message-header-senderName col-lg-3 col-md-3 col-sm-3">'+
'<p>' + message.ownerName + '</p>'+
'</div>'+
'<div class="col-lg-3 col-lg-offset-5 col-md-3 col-md-offset-5 col-sm-3 col-sm-offset-5 inbox-message-header-sentTime text-right">'+
'<p>24/05/2016</p>'+
'</div>'+
'</div>'+
'<div class="row inbox-message-body">'+
'<div class="col-lg-9 col-lg-offset-1 col-md-9 col-md-offset-1 col-sm-9 col-sm-offset-1 text-left">'+
'<p>' + message.msg + '</p>'+
'</div>'+
'</div>'+
'</div>'
);
} else {
$('.inbox-all-messages').append(
'<div class="row inbox-message-structure-me">'+
'<div class="row inbox-message-header">'+
'<div class="inbox-message-ava col-lg-1 col-md-1 col-sm-1">'+
'<img src="/images/client.jpg" class="inbox-message-header-ava-img">'+
'</div>'+
'<div class="inbox-message-header-senderName col-lg-3 col-md-3 col-sm-3">'+
'<p>' + message.ownerName + '</p>'+
'</div>'+
'<div class="col-lg-3 col-lg-offset-5 col-md-3 col-md-offset-5 col-sm-3 col-sm-offset-5 inbox-message-header-sentTime text-right">'+
'<p>24/05/2016</p>'+
'</div>'+
'</div>'+
'<div class="row inbox-message-body">'+
'<div class="col-lg-9 col-lg-offset-1 col-md-9 col-md-offset-1 col-sm-9 col-sm-offset-1 text-left tester">'+
'<p>' + message.msg + '</p>'+
'</div>'+
'</div>'+
'</div>'
);
}
});
$('.inbox-all-messages').append('<div id="bottom"></div>');
$('.inbox-all-messages').scrollTo('#bottom', 100, "max");
}
});
$('.contact-form-container').removeClass('hidden-mode');
$('.messenger-contaner').addClass('stop-scroll');
});
$('.hide-contact').on('click', function(){
$('.contact-form-container').addClass('hidden-mode');
$('.messenger-contaner').removeClass('stop-scroll');
});
$('.inbox-message-send-msg-btn').on('click', function(){
var messageToSend = $('.inbox-message-response-txt').val();
$.ajax({
url: '/saveMsg',
method: 'POST',
contentType: 'application/json',
data: JSON.stringify({message: messageToSend, conversationId: convId}),
success: function(response){
alert('le message a bien ete enregistree');
}
});
});
})
</script>
Now I can send messages and store them in my mongoDB but I need to refresh the page to get the new messages... So I am trying to set up a long polling request but can't find a solution because each time I set a loop in my jQuery code it breaks the whole page and it can't open a conversation no more... If someone can help me to improve my code and set up a simple no technology to get the message without refreshing the page it would be so wonderful!
Sorry for my bad English! And thank you a lot for geing there for us!
If you are completely new to programming as you said, then instead of trying to create the functionality from scratch that you have trouble with, maybe using a working solution would be a better idea.
You can use Socket.io for that sort of thing. It uses long polling and tries to upgrade to WebSocket if it's supported. It's very simple to use. Here is an entire working example of a server that sends requests to the client:
var path = require('path');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'si.html'));
});
io.on('connection', s => {
for (var t = 0; t < 3; t++)
setTimeout(() => s.emit('message', 'message from server'), 1000*t);
});
http.listen(3002, () => console.error('listening on http://localhost:3002/'));
And here is the entire JavaScript code on the client:
var l = document.getElementById('l');
var log = function (m) {
var i = document.createElement('li');
i.innerText = new Date().toISOString()+' '+m;
l.appendChild(i);
}
log('opening socket.io connection');
var s = io();
s.on('connect_error', function (m) { log("error"); });
s.on('connect', function (m) { log("socket.io connection open"); });
s.on('message', function (m) { log(m); });
For more examples and better explanation see the project on GitHub which I created to demonstrate the usage of sending messages to the client.
See also other related questions for more details:
Differences between socket.io and websockets
socket.io no communication between server and client
why web socket behave differently on nodejs ?
getting an error when trying to use socket.io
How to use Socket.io combined with Express.JS