In my website there are some films that i get from firebase. The scores of the movies are between 0 and 100. I already got all the movies in my website. I also want to display them in descending order.(for ex. top 5 rated movies) How can i achieve this? Thanks for your answers.
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const auth = getAuth(app);
const firebaseRef= ref(getDatabase());
var body = document.getElementById('movies');
var body2 = document.getElementById('series');
function AddItemsToTable(name, score, img, id) {
var movies = `<div class="content"><img src="${img}" ><p>${name}</p> <p> <i class="fa fa-star checked" id="star${id}"></i> <a class="scoretxt">${score}%</a> </p> </div>`;
body.innerHTML+=movies;
}
function AddItemsToTable2(name, score, img, id) {
var series = `<div class="content"><img src="${img}" ><p>${name}</p> <p> <i class="fa fa-star checked" id="star2${id}"></i> <a class="scoretxt">${score}%</a> </p> </div>`;
body2.innerHTML += series;
}
//*******************************I got the movies************************************************
function AddAllItemsToTable(TheMovies){
var counter=0;
TheMovies.forEach(element => {
if (counter===6) {
return;
}
AddItemsToTable(element.movieName, element.movieScore, element.movieImage, element.movieId);
counter++;
});
}
//************************I got tv series*********************************************
function AddAllItemsToTable2(TheSeries){
var counter=0;
TheSeries.forEach(element => {
if (counter===6) {
return;
}
AddItemsToTable2(element.seriesName, element.seriesScore, element.seriesImage, element.seriesId);
counter++;
});
}
function AddAllItemsToTable3(TheMovies){
var counter=0;
TheMovies.forEach(element => {
if (counter===6) {
return;
}
AddItemsToTable3(element.movieName, element.movieScore, element.movieImage, element.movieId);
counter++;
});
}
function getAllDataOnce(){
const dbRef=ref(db);
get(child(dbRef,"Movies"))
.then((snapshot)=>{
var movies=[];
snapshot.forEach(childSnapshot => {
movies.push(childSnapshot.val())
});
AddAllItemsToTable(movies);
});
}
function getAllDataOnce2(){
const dbRef=ref(db);
get(child(dbRef,"Series"))
.then((snapshot)=>{
var series=[];
snapshot.forEach(childSnapshot => {
series.push(childSnapshot.val())
});
AddAllItemsToTable2(series);
});
}
window.onload = (event) => {
getAllDataOnce();
getAllDataOnce2();
};
<div class="grid-container">
<header class="header">
<div class="solheader">
<img src="img/sonlogo3.png" alt="logo">
<img src="img/logosmall.png" alt="logo" style="width:60px;height:48px;margin:5px;">
</div>
<div class="ortaheader">
<input type="text" placeholder="Movies or TV series.." class="searchbox"><i class="fa fa-search arama"></i> </input>
<ul>
<li class="categories">Categories <i class="fa fa-caret-down" style="font-size:16px;"> </i>
<ul class="dropdown">
<li>TV Series</li>
<li>Movies</li>
</ul>
</li>
</ul>
</div>
<div class="menu sagheader">
<ul>
<li>
<button class="ikon dropdown-toggle" type="button" data-toggle="dropdown"><i class="far fa-user"></i> </button>
<ul class="dropdown-menu">
<li class="accountname"><b><script>document.write(document.cookie.substring(5))</script></b></li>
<li class="login"><i class="fa fa-sign-in-alt" style="color:red;"></i> Login </li>
<li class="signup"><i class="fa fa-user-plus" style="color:red;"></i> Sign up </li>
<li class="logout"><a onclick="deletecookie()" style="cursor:pointer;"><i class="fas fa-door-open" style="color:red;"></i> Log out</a></li>
</ul>
</li>
</ul>
</div>
</header>
<div class="body" id="body">
<div class="baslik">Movies</div>
<div class="baslik2">See all</div>
<div id="movies">
</div>
<div class="baslik">Series</div>
<div class="baslik2">See all</div>
<div id="series">
</div>
<div class="baslik">Top Rated Movies</div>
<div class="baslik2">See all</div>
<div id="toprated">
</div>
</div>
<div class="footer">
<div class="">
<img src="img/sonlogo3.png" alt="logo">
<ul>
<li>Help</li>
<li>About</li>
<li>Contact</li>
<li>Terms and Policies</li>
</ul><br><br>
<ul>
<li>© 2021 Cinemeter</li>
<li class="destroy">|</li>
<li>All rights reserved.</li>
</ul>
</div>
</div>
</div>
Firebase Database
This is my website
While Firebase can order results, the results are always ascending. If you want to show them in descending order, you'll have to reverse them in your application code.
Something like this:
const query = query(child(dbRef,"Movies"), orderByChild("movieScore"));
get(query).then((snapshot)=>{
var movies=[];
snapshot.forEach(childSnapshot => {
movies.push(childSnapshot.val())
});
movies.reverse
});
If you want to get the top scores, you can use limitToLast in the query too:
const query = query(child(dbRef,"Movies"), orderByChild("movieScore"), limitToLast(5));
Also see the Firebase documentation on ordering and filtering data and limiting the number of results.
A few notes on your data structure:
Using sequential numeric keys for you nodes is an anti-pattern in Firebase, and it is typically better to use push keys. Also see Best Practices: Arrays in Firebase.
You're storing the score as a string, which is bound to lead to problems as strings are sorted lexicographically. I recommend converting your data to store the scores as numbers (so without " quotes around them).
Related
I'm trying to make my navbar sticky when it gets to a certain section of my website but my intersectionObserverApi isn't working. I think it has something to do with my useRefs being null when I try to select the section element I want to observe.I have tried selecting them using querySelector but didn't work either.
This is in React btw any help would be appreciated.
Here is my component:
import { React, useRef } from "react";
import "./About.css";
import Image from "../Images/7F1E6503-0880-4C1A-B2E8-070D0FAE543B.jpg";
const About = () => {
const aboutSectionRef = useRef("");
console.log(aboutSectionRef); // getting object with key value pair of current: ''
const el = aboutSectionRef.current;
console.log(el); // I'm getting null in the console.log
function stickyNavBar(entries, observer) {
console.log(entries);
}
document.addEventListener("DOMContentLoaded", function () {
const sectionObserver = new IntersectionObserver(stickyNavBar, {
root: null,
threshold: 0.1,
});
sectionObserver.observe(el);
});
// const aboutSectionRef = useRef(null);
// document.addEventListener(
// "DOMContentLoaded",
//
// );
return (
<section
ref={aboutSectionRef}
id="about-section"
className="about-section aboutsectionref"
>
<img className="headshot" src={Image} alt="pic of Osman" />
<h1>Nice to meet you</h1>
<p>
Over the past 2 years I have embarked on a journey that has undoubtedly
<span className="blue"> challenged</span> me like never before when I
decided to start
<span className="blue"> learning</span> how to code. I am a{" "}
<span className="blue"> self-taught</span> web developer with{" "}
<span className="blue"> passion</span> and{" "}
<span className="blue"> determination</span> for anything I set my mind
to.
</p>
<h2>Attributes I bring to the team</h2>
<div className="two-uls">
<ul>
<li>
<i className="fa-solid fa-circle-check fa-1x"></i> Open-Minded
</li>
<li>
<i className="fa-solid fa-circle-check fa-1x"></i> Team Player
</li>
<li>
<i className="fa-solid fa-circle-check fa-1x"></i> Drive to
self-improve
</li>
</ul>
<ul>
<li>
<i className="fa-solid fa-circle-check fa-1x"></i> Time Management
</li>
<li>
<i className="fa-solid fa-circle-check fa-1x"></i> Communication
</li>
<li>
<i className="fa-solid fa-circle-check fa-1x"></i> Attention to
detail
</li>
</ul>
</div>
</section>
);
};
export default About;
<div class="tabs__content tabs__content--bg js-tab-panel">
<div class="tabs__panel tabs__panel--active">
<div class="product__sizes-wrapper">
<ul class="product__sizes-select js-size-select-list" data-locale="UK">
<li class="product__sizes-option" data-msg="Sample Message" data-name="6" data-value="060">
<span class="product__sizes-size">
<span class="product__sizes-size-1">6</span>
<span class="product__sizes-size-2"></span>
</span>
</li>
<li class="product__sizes-option" data-msg="Sample Message" data-name="7" data-value="070">
<span class="product__sizes-size">
<span class="product__sizes-size-1">7</span>
<span class="product__sizes-size-2"></span>
</span>
</li>
<li class="product__sizes-option" data-msg="Sample Message" data-name="8" data-value="080">
<span class="product__sizes-size">
<span class="product__sizes-size-1">8</span>
<span class="product__sizes-size-2"></span>
</span>
</li>
<li class="product__sizes-option" data-msg="Sample Message" data-name="9.5" data-value="095">
<span class="product__sizes-size">
<span class="product__sizes-size-1">9.5</span>
<span class="product__sizes-size-2"></span>
</span>
</li>
</ul>
</div>
</div>
I want to extract the values from the product__sizes-size-1 classes and transform them into an array. I have tried to use a .map() function to try and populate an array but it appears empty. To make it clear I want to have the array populated like [6,7,8,9.5] etc...
const sizes = $(".product__sizes-wrapper [data-locale = 'UK']").map(function() {
return $(this).text();
}).get();
Your approach is correct, you just use the wrong selector. Use product__sizes-size-1 instead:
$(document).ready(function(){
var sizes = $('.product__sizes-size-1').map(function(){return $(this).text()}).get();
});
To select it
$('#product__sizes-select li.product__sizes-size-1');
In array
var product_sizes = [];
$('ul').each(function() {
var localproduct_sizes = [];
$(this).find('li').each(function(){
localproduct_sizes.push( $(this).attr('product__sizes-size-1') );
});
product_sizes.push(localproduct_sizes);
});
I'm trying to upload a file from a node application to my local Alfresco.
I managed to login, create and delete folders but not files.
let AlfrescoApi = require('alfresco-js-api');
let alfrescoJsApi = new AlfrescoApi();
let fs = require('fs');
alfrescoJsApi.login('admin', 'admin').then(function (data) {
console.log('API called successfully login ticket:' + data);
var fileToUpload = fs.createReadStream('./testFile.txt');
fileToUpload.name= "testFile.txt"
alfrescoJsApi.upload.uploadFile(fileToUpload, 'Sites/test-site/documentLibrary')
.then(function () {
console.log('File Uploaded in the root');
}, function (error) {
console.log('Error during the upload' + error);
});
}, function (error) {
console.log("Error, cannot connect to Alfresco");
});
The previous code return the error :
Error during the uploadError: {"error":{"errorKey":"Required parameters are missing","statusCode":400,"briefSummary":"05010132 Required parameters are missing","stackTrace":"Pour des raisons de sécurité, le traçage de la pile n'est plus affiché, mais la propriété est conservée dans les versions précédente.","descriptionURL":"https://api-explorer.alfresco.com"}}
And I don't know what I am doing wrong, I tried every methods with differents parameters listed here : https://www.npmjs.com/package/alfresco-js-api#upload-file but always got the same error...
If anyone could help me it would be great, thanks =)
EDIT :
So I gave up this method, and start trying directly with rest requests, I managed to write this piece of code :
var http = require("http");
var options = {
'host': 'localhost',
'port': '8080',
'path': '/alfresco/service/api/upload?alf_ticket='+ticket,
'method': 'POST',
'Content-Type': 'application/json'
};
var fs = require('fs')
var fileToUpload = fs.createReadStream('./testFile.txt');
var body = {
"filedata": fileToUpload,
"filename": "testFile.txt",
"description": "none",
"siteid": "test-site",
"containerid": "documentLibrary"
}
var req = http.request(options, function(res) {
console.log('STATUS: ' + res.statusCode);
console.log('HEADERS: ' + JSON.stringify(res.headers));
res.setEncoding('utf8');
res.on('data', function (chunk) {
console.log('BODY: ' + chunk);
});
});
req.write(JSON.stringify(body));
req.end();
But, now, I have an error 500 ...
STATUS: 500
HEADERS: {"server":"Apache-Coyote/1.1","cache-control":"no-cache","expires":"Thu, 01 Jan 1970 00:00:00 GMT","pragma":"no-cache","content-type":"application/json;charset=UTF-8","transfer-encoding":"chunked","date":"Thu, 01 Jun 2017 14:20:43 GMT","connection":"close"}
BODY: {
"status" :
{
"code" : 500,
"name" : "Internal Error",
"description" : "An error inside the HTTP server which prevented it from fulfilling the request."
},
"message" : "05010287 Unexpected error occurred during upload of new content.",
"exception" : "",
"callstack" :
[
],
"server" : "Community v5.2.0 (r135134-b14) schema 10 005",
"time" : "1 juin 2017 16:20:43"
}
I searched online, but I couldn't find any answers to this :/
Please if anyone have any idea ... thanks
Basically there are some issues with let fs = require('fs'); line.I just got it on below link.
https://github.com/angular/angular-cli/issues/5324
Below is the working example of file upload, using html file input element.I didn't override much thing.Basically on default alfresco angular component i just used home component and added your code in it and modified the required things like adding an html file upload element.
home.component.ts
import { Component } from '#angular/core';
import { AlfrescoApi } from 'alfresco-js-api';
#Component({
selector: 'home-view',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
public file: File;
changeListener(event) {
this.file = event.target.files[0];
}
uploadFileFromUI() {
let fs = require('fs');
let alfrescoApi = require('alfresco-js-api');
let alfrescoJsApi = new alfrescoApi();
let fileToUpload = this.file;
alfrescoJsApi.login('admin', 'admin').then(function (data) {
console.log('API called successfully login ticket:' + data);
alfrescoJsApi.upload.uploadFile(fileToUpload, 'Sites/test-site/documentLibrary')
.then(function () {
console.log('File Uploaded in the root');
}, function (error) {
console.log('Error during the upload' + error);
});
}, function (error) {
console.log('Error, cannot connect to Alfresco');
});
}
}
home.component.html
<!-- DOCUMENT LIST-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/files">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">dvr</i>
<span class="home--card__text">DocumentList - Content Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
Demonstrates multiple Alfresco Content Services components used together to display the files of your Content Services instance:
<ul class="home--feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with the Rest Api and core services</span>
ng2-alfresco-core
</li>
<li>
<i class="material-icons home--feature-list__icon">dvr</i>
<span class="home--feature-list__text">Document List</span>
ng2-alfresco-documentlist
</li>
<li>
<i class="material-icons home--feature-list__icon">file_upload</i>
<span class="home--feature-list__text">Upload</span>
ng2-alfresco-upload
</li>
<li>
<i class="material-icons home--feature-list__icon">view_module</i>
<span class="home--feature-list__text">DataTable</span>
ng2-alfresco-datatable
</li>
</ul>
</div>
</div>
<!-- Process Services-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/activiti">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">apps</i>
<span class="home--card__text">Process Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
Demonstrates multiple Alfresco Process Services components used together to show your Process Services process and tasks:
<ul class="home--feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with the Rest Api and core services</span>
ng2-alfresco-core
</li>
<li>
<i class="material-icons home--feature-list__icon">view_module</i>
<span class="home--feature-list__text">App List</span>
ng2-activiti-apps
</li>
<li>
<i class="material-icons home--feature-list__icon">view_headline</i>
<span class="home--feature-list__text">Task List</span>
ng2-activiti-tasklist
</li>
<li>
<i class="material-icons home--feature-list__icon">view_headline</i>
<span class="home--feature-list__text">Process List</span>
ng2-activiti-processlist
</li>
<li>
<i class="material-icons home--feature-list__icon">view_quilt</i>
<span class="home--feature-list__text">Form</span>
ng2-activiti-form
</li>
<li>
<i class="material-icons home--feature-list__icon">pie_chart</i>
<span class="home--feature-list__text">Analytics</span>
ng2-activiti-analytics,
ng2-activiti-diagrams
</li>
<li>
<i class="material-icons home--feature-list__icon">view_module</i>
<span class="home--feature-list__text">DataTable</span>
ng2-alfresco-datatable
</li>
</ul>
</div>
</div>
<!-- DATATABLE-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/datatable">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">view_module</i>
<span class="home--card__text">DataTable - Content Services & Process Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
Basic table component:
<ul class="home--feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with the Rest Api and core services</span>
ng2-alfresco-core
</li>
</ul>
</div>
</div>
<!-- UPLOADER-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/uploader">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">file_upload</i>
<span class="home--card__text">Uploader - Content Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
Basic table uploader component for the Content Services & Process Services:
<ul class="home--feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with the Rest Api and core services</span>
ng2-alfresco-core
</li>
</ul>
</div>
</div>
<!-- LOGIN-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/login">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">account_circle</i>
<span class="home--card__text">Login - Content Services & Process Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
Login component for the Content Services and Process Services:
<ul class="home--feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with the Rest Api and core services</span>
ng2-alfresco-core
</li>
</ul>
</div>
</div>
<!-- WEBSCRIPT-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/webscript">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">extension</i>
<span class="home--card__text">Webscript - Content Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
Displays and creates webscripts in your Content Services instance:
<ul class="home--feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with the Rest Api and core services</span>
ng2-alfresco-core
</li>
</ul>
</div>
</div>
<!-- TAG-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/tag">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">local_offer</i>
<span class="home--card__text">Tag - Content Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
Displays and adds tags to the node of your Content Services instance:
<ul class="home--feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with Rest</span>
ng2-alfresco-core
</li>
</ul>
</div>
</div>
<br/>
<br/>
<br/>
<input type="file" (change)="changeListener($event)">
<button (click)='uploadFileFromUI()'>upload</button>
So, I figured out how to upload a file :
var fs = require('fs')
var request = require('request')
var r = request.post('http://localhost:8080/alfresco/api/-default-/public/alfresco/versions/1/nodes/-root-/children?alf_ticket='+JSON.parse(chunk).data.ticket, function callback(err, httpResponse, body) {
if(err || JSON.parse(body).error) {
return console.log('Upload failed : ' + body)
}
console.log('Upload success')
})
var form = r.form()
form.append("name", "testFile.txt")
form.append("nodeType", "cm:content")
form.append("relativePath", "Sites/test-site/documentLibrary")
form.append("filedata",fs.createReadStream('./testFile.txt'))
Works fine to me =)
alfresco-js-api work fine but you made the wrong choice of module in your first code.
You had to choose alfresco-js-api-node instead of alfresco-js-api
Installer for browser versions:
npm install --save alfresco-js-api
Installer for node versions:
npm install --save alfresco-js-api-node
Import library for node projects
var AlfrescoApi = require('alfresco-js-api-node');
I have two controllers headerController, aboutController.
headerController -> To maintain the navigation and redirection
aboutController -> works when about-us page loads.
My issue is I have to update the headerController variable value when aboutController loads. i.e When about us page loads, the navigation about-us should active, similar to all the pages.
This is my code:
app.service('shareService', function () {
var data;
return {
getProperty: function () {
return data;
},
setProperty: function (value) {
data = value;
}
};
});
app.controller('headerController', function ($scope, shareService) {
$scope.navigation = [
{url: '#!/home', name: 'Home'},
{url: '#!/about-us', name: 'About Us'},
{url: '#!/services', name: 'Services'}
];
var data = shareService.getProperty();
console.log(data);
$scope.selectedIndex = 0;
$scope.itemClicked = function ($index) {
console.log($index);
$scope.selectedIndex = $index;
};
});
app.controller('aboutController', function ($scope, shareService) {
console.log('test');
$scope.selectedIndex = 1;
shareService.setProperty({navigation: $scope.selectedIndex});
});
header.html:
<header ng-controller="headerController">
<div class="header">
<div class="first-half col-md-6">
<div class="row">
<div class="logo">
<img src="assets/img/logo.png" alt=""/>
</div>
</div>
</div>
<div class="second-half col-md-6">
<div class="row">
<div class="social-share">
<ul id="social-share-header">
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
<nav>
<ul ng-repeat="nav in navigation">
<li class="main-nav" ng-class="{ 'active': $index == selectedIndex }"
ng-click="itemClicked($index)">
{{nav.name}}
</li>
</ul>
</nav>
</div>
</header>
index.html
This is how my template works.
<body ng-app="myApp">
<section class="first-section">
<div ng-include="'views/header.html'"></div>
</section>
<section class="second-section">
<div ng-view></div>
</section>
<section class="last-section">
<div ng-include="'views/footer.html'"></div>
</section>
</body>
Update 1: Added index.html file.
Update 2: Issue explanation: If I run directly to the about us page, then still the home navigation is on active. But it should be About us
What is you are looking for is event based communication between your controllers. This can be easily done using. $rootScope.$on, $rootScope.$emit and $rootScope.$broadcast. Since explaining all three of them in this answer will be overkill. Kindly go through this article
First of all, I list the e-mail from coming ActionResult in the first cycle.
I want to see the details by clicking on the listed data. I open with the help of jQuery details. The problem arises in this section. in this case ,the opening of the details of the first mail in the detail of each row.
There are details of the message in the second loop.To connect to the two loops in a guid font was coming. (MessageId).
id=messageId (guid type)
mailing list
<div class="message-list-container">
<div class="message-list" id="message-list">
#foreach (var item in Model)
{
<div id="#item.MessageId" class="message-item">
<span class="sender" title="#item.From">
#item.From
</span>
<span class="time">#mvcHelper.saatAyarla(item.Date)</span>
#if(item.Attachments.Any())
{
<span class="attachment">
<i class="ace-icon fa fa-paperclip"></i>
</span>
}
<span class="summary">
<span class="text">
#item.Subject
</span>
</span>
</div>
}
</div>
</div>
mailing details
<!--Messsage details-->
#foreach (var item in Model)
{
<!-- <div class="hide message-content" id="id-message-content">-->
<div class="hide message-content" id="#item.MessageId">
<div class="message-header clearfix">
<div class="pull-left">
<span class="blue bigger-125"> #item.Subject </span>
<div class="space-4"></div>
<i class="ace-icon fa fa-star orange2"></i>
<img class="middle" alt="John's Avatar" src="/Areas/admin/Content/images/avatars/avatar.png" width="32" />
#item.From
<i class="ace-icon fa fa-clock-o bigger-110 orange middle"></i>
<span class="time grey">#mvcHelper.saatGoster(item.Date)</span>
</div>
</div>
<div class="hr hr-double"></div>
<div class="message-body">
<p>
#item.TextBody
</p>
</div>
<div class="hr hr-double"></div>
<!--Eklenti paneli-->
<div class="message-attachment clearfix">
#if (item.Attachments.Any())
{
<div class="attachment-title">
<span class="blue bolder bigger-110">Eklentiler</span>
<span class="grey">(#item.Attachments.Count() Dosya)</span>
</div>
<ul class="attachment-list pull-left list-unstyled">
#foreach (var attachment in item.Attachments)
{
<li>
<a href="#" class="attached-file">
<i class="ace-icon fa fa-file-o bigger-110"></i>
<span class="attached-name">#mvcHelper.getAttachmentName(attachment.ToString())</span>
</a>
<span class="action-buttons">
<a href="#">
<i class="ace-icon fa fa-download bigger-125 blue"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-trash-o bigger-125 red"></i>
</a>
</span>
</li>
}
</ul>
}
</div>
</div><!-- /.message-content -->
}
<!--Eklenti paneli Son-->
<!--message details end-->
loop connecting two points.
first foreach = <div id="#item.MessageId" class="message-item">
//Places where the problem is. They need to be connected.
second foreach = <!-- <div class="hide message-content" id="id-message-content">-->
<div class="hide message-content" id="#item.MessageId">
var content = message.find('.message-content:last').html($('#id-message-content').html());
jQuery code
$('.message-list .message-item .text').on('click', function () {
var message = $(this).closest('.message-item');
//if message is open, then close it
if (message.hasClass('message-inline-open')) {
message.removeClass('message-inline-open').find('.message-content').remove();
return;
}
$('.message-container').append('<div class="message-loading-overlay"><i class="fa-spin ace-icon fa fa-spinner orange2 bigger-160"></i></div>');
setTimeout(function () {
$('.message-container').find('.message-loading-overlay').remove();
message
.addClass('message-inline-open')
.append('<div class="message-content" />');
var content = message.find('.message-content:last').html($('#id-message-content').html());
//remove scrollbar elements
content.find('.scroll-track').remove();
content.find('.scroll-content').children().unwrap();
content.find('.message-body').ace_scroll({
size: 150,
mouseWheelLock: true,
styleClass: 'scroll-visible'
});
}, 500 + parseInt(Math.random() * 500));
});
Your first problem is that you are creating multiple elements with identical id properties. This makes your HTML invalid.
Here is the problem code:
#foreach (var item in Model)
{
<div id="#item.MessageId" class="message-item">
...
#foreach (var item in Model)
{
<div class="hide message-content" id="#item.MessageId">
...
For each message in your model, this will create 2 <div> elements whose id has the value of the #item.MessageID variable. The second of these is and illegal element because it has the same ID as an earlier element. You will need to make these <div>s have unique IDs.
The second problem is:
When you run
var content = message.find('.message-content:last').html($('#id-message-content').html());
this part:
$('#id-message-content').html()
cannot find anything because there is no element whose id is "id-message-content". Also every time you open the message, you are appending another "message-content" div into the message-item. This is not necessary.
To fix these issues, you can change the code like this:
First loop:
#foreach (var item in Model)
{
<div data-messageid="#item.MessageId" class="message-item">
...
<span class="summary">
<span class="text">
#item.Subject
</span>
</span>
<div class="message-content" hidden></div>
...
Second loop:
#foreach (var item in Model)
{
<div class="hide message-content" id="message-content-#item.MessageId">
...
jQuery:
$('.message-list .message-item .text').on('click', function () {
var message = $(this).parents('.message-item');
//if message is open, then close it
if (message.hasClass('message-inline-open')) {
message.removeClass('message-inline-open').find('.message-content').hide();
return;
}
$('.message-container').append('<div class="message-loading-overlay"><i class="fa-spin ace-icon fa fa-spinner orange2 bigger-160"></i></div>');
setTimeout(function () {
$('.message-container').find('.message-loading-overlay').remove();
message.addClass('message-inline-open');
var content = message.find(".message-content");
content.show();
content.html($('#message-content-' + message.data("messageid")).html());
//remove scrollbar elements
content.find('.scroll-track').remove();
content.find('.scroll-content').children().unwrap();
content.find('.message-body').ace_scroll({
size: 150,
mouseWheelLock: true,
styleClass: 'scroll-visible'
});
}, 500 + parseInt(Math.random() * 500));
});
Solved
public static class mvcHelper
{
public static string variableReplace(string id)
{
string yazi = null;
if (id != null)
{
yazi = id.Replace('#', 'a').ToString();
}
else
{
yazi = id;
}
return yazi;
}
}
<div data-messageid="#mvcHelper.variableReplace(item.MessageId)" class="message-item">
<div class="hide message-content" id="message-content-#mvcHelper.variableReplace(item.MessageId)">