Response title
This is preview!
- Screen name: Silver Jigghart
Silver Jigghart's Profile
1 Posts
1 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 20-Apr-2016 07:44 AM
- Forum: Getting Started
Hello everyone,
I've tried to sort links I've got in a XML file. I've using AJAX from jquery but I have problems.
I wanted to create links order by their number into panels that can slide.
Panels can slide but I'm a beginner using Jquery and Javascript and i don't know how I can do using AJAX to import my XML and sort it.
But wait there's more ! In my XML I have a "commen" section that I wanted to show in "commentaire" section on my HTML every time mouse come over a link...
I know it's a little bit complicated for a beginner, and my skills in english are not great to explicated what i wanted to do.
There's my code :- <HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index intuitif</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<table id = "tableau" border =1>
<td>
<div class="toggle-info" onClick=theme1()>
<h1>Theme 1 </h1>
</div>
<div class="info-panel">
<ul id = "theme1">
<li> <a href= "" onMouseOver=displayBD(1)> Lien 1 </a> </li>
<li> <a href= "" onMouseOver=displayBD(2)> Lien 2 </a> </li>
<li> <a href= "" onMouseOver=displayBD(3)> Lien 3 </a> </li>
<li> <a href= "" onMouseOver=displayBD(4)> Lien 4 </a> </li>
<li> <a href= "" onMouseOver=displayBD(5)> Lien 5 </a> </li>
<li> <a href= "" onMouseOver=displayBD(6)> Lien 6 </a> </li>
<li> <a href= "" onMouseOver=displayBD(7)> Lien 7 </a> </li>
</ul>
</div>
</td>
<td>
<div class="toggle-info">
<h1>Theme 2 </h1>
</div>
<div class="info-panel" onClick=theme2()>
<ul id = "theme2">
<li> <a href= "" onMouseOver=displayBD(1)> Lien 1 </a> </li>
<li> <a href= "" onMouseOver=displayBD(2)> Lien 2 </a> </li>
<li> <a href= "" onMouseOver=displayBD(3)> Lien 3 </a> </li>
<li> <a href= "" onMouseOver=displayBD(4)> Lien 4 </a> </li>
<li> <a href= "" onMouseOver=displayBD(5)> Lien 5 </a> </li>
<li> <a href= "" onMouseOver=displayBD(6)> Lien 6 </a> </li>
<li> <a href= "" onMouseOver=displayBD(7)> Lien 7 </a> </li>
</ul>
</div>
</td>
<td>
<div class="toggle-info">
<h1>Theme3</h1>
</div>
<div class="info-panel" onClick=theme3()>
<ul id= "theme3">
<li> <a href= "" onMouseOver=displayBD(1)> Lien 1 </a> </li>
<li> <a href= "" onMouseOver=displayBD(2)> Lien 2 </a> </li>
<li> <a href= "" onMouseOver=displayBD(3)> Lien 3 </a> </li>
<li> <a href= "" onMouseOver=displayBD(4)> Lien 4 </a> </li>
<li> <a href= "" onMouseOver=displayBD(5)> Lien 5 </a> </li>
<li> <a href= "" onMouseOver=displayBD(6)> Lien 6 </a> </li>
<li> <a href= "" onMouseOver=displayBD(7)> Lien 7 </a> </li>
</ul>
</div>
</td>
</table>
<div id="commentaire">
Bonsoir
</div>
<script>
var nbr_lignes = document.getElementById('tableau').rows.length;
var nbr_colonnes = document.getElementById('tableau').getElementsByTagName('tr')[0].getElementsByTagName('td').length;
var nbr_colonnes = document.getElementById('tableau').rows[0].cells.length;
var themeSelect ;
var i = 0 ;
var ndecs;
var contenu=" ";
var results = new Array ;
var descrithem1= new Array;
var descrithem2= new Array;
var descrithem3= new Array;
var length1 = $('#theme1 > *').length;
var length2 = $('#theme2 > *').length;
var length3 = $('#theme3 > *').length;
var lengthmax1= length1;
var lengthmax2= length2;
var lengthmax3= length3;
var themeSelect;
var commentaira;
var $xml= $.parseXML('<bds> <serie1 id="1"> <desc> <num> 2 </num><title>we are on 1 </title><commen>HI </commen><URL>Idk</URL></desc><desc><num> 1 </num><title>we are on 2 </title><commen>Hello world </commen><URL>Baptiste</URL></desc></serie1></bds>')
/*
function theme1(){
themeSelect = 1 ;
}
function theme2(){
themeSelect = 2 ;
}
function theme3(){
themeSelect = 3 ;
}
function ajout(){
var themeajout=prompt("theme to add");
if (themeajout==1)
{
ndecs = prompt ("new description");
descrithem1.push(ndecs);
}
if (themeajout==2)
{
ndecs = prompt ("new description");
descrithem2.push(ndecs);
}
if (themeajout==3)
{
ndecs = prompt ("new description");
descrithem3.push(ndecs);
}
}
function affichage ()
{
var div = document.getElementById("commentaire");
div.textContent = descri[i];
var text = div.textContent;
}
*/
/*
function ajoutLien(){
var numtheme = prompt("numero de votre theme");
if (numtheme == 1)
{
lengthmax1= lengthmax1 +1 ;
document.getElementById('theme1').innerHTML += "<li> <a href= \"\" id=\"3-1\" onMouseOver=Lien(1)> Lien " + lengthmax1 +" </a> </li>";
}
if (numtheme == 2)
{
lengthmax2= lengthmax2 +1 ;
document.getElementById('theme2').innerHTML += "<li> <a href= \"\" id=\"3-1\" onMouseOver=Lien(1)> Lien " + lengthmax2 +" </a> </li>";
}
if (numtheme == 3)
{
lengthmax3= lengthmax3 +1 ;
document.getElementById('theme3').innerHTML += "<li> <a href= \"\" id=\"3-1\" onMouseOver=Lien(1)> Lien " + lengthmax3 +" </a> </li>";
}
}
*/
$(function() {
$(".toggle-info").on("click", function() {
if($(this).next(".info-panel").attr('style') == 'display: block;'){
$(this).next(".info-panel").slideUp(200);
} else {
$(".info-panel").each(function(){
$(this).slideUp(200);
});
$(this).next(".info-panel").slideToggle(200);
}
});
$(".info-panel").on("click", function() {
$(this).slideUp(200);
});
});
$(document).ready(
function()
{$.ajax({
type: "GET",
url: "text.xml",
dataType: "xml",
success: function(xml)
{
$(xml).find('bds').each(
function()
{
var id = $(this).attr('id');
alert (id);
$(this).find('desc').each(
function()
{
var commen = $(this).find('commen').text();
var title = $(this).find('title').text();
var URL = $(this).find('URL').text();
});
});
}
});
}
);
$($xml).find('serie1').each(function() {
var commen = $(this).find('commen').text();
var title = $(this).find('title').text();
var URL = $(this).find('URL').text();
var num = $(this).find('num').text();
results.push({
id: $(this).attr('id'),
num : num,
commen: commen,
title: title,
URL: URL
});
})
results.sort(function(a, b) {
return a.num > b.num;
});
var html=[];
$.each(results, function() {
html.push('<div>commentaires : ' + this.commen + '</div>')
})
$('body').append( html.join(''))
function displayBD(inte)
{
alert(this.results);
if (this.num ==inte)
{commentaira = results.commen;
document.getElementById("commentaire").innerHTML = results.commen;
}
alert(commentaira);
}
</script>
<style type='text/css'>
.toggle-info {
cursor: pointer;
}
.info-panel {
display: none;
cursor: pointer;
}
* { font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: .95em; }
fieldset { margin: 15px; padding-left: 1em; padding-right: 1em; padding-bottom: 1em; }
legend { margin: 10px; }
#outputBDFieldset { display: none; }
#nbBD { font-weight: normal; }
</style>
</body>
</HTML>
I'm using the var $xml for testing. But my XML is bigger :- <?xml version="1.0" encoding="iso-8859-1"?>
<bds>
<serie1 id="1">
<desc>
<num> 1 </num>
<title>nous sommes sur le lien 1 </title>
<commen>Hello </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 2 </num>
<title>nous sommes sur le lien 2 </title>
<commen>HI </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 3 </num>
<title>nous sommes sur le lien 3 </title>
<commen>How are you </commen>
<URL>Gars inconnu</URL>
</desc>
<desc>
<num> 4 </num>
<title>nous sommes sur le lien 4 </title>
<commen>Idk </commen>
<URL>Raymond</URL>
</desc>
<desc>
<num> 5 </num>
<title>nous sommes sur le lien 5 </title>
<commen>Thank you </commen>
<URL>Eric</URL>
</desc>
<desc>
<num> 6 </num>
<title>nous sommes sur le lien 6 </title>
<commen>You're welcome </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 7 </num>
<title>nous sommes sur le lien 7 </title>
<commen>Sorry </commen>
<URL>Céline</URL>
</desc>
</serie1>
<serie2 id="2">
<desc>
<num> 1 </num>
<title>nous sommes sur le lien 1 </title>
<commen>Hello </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 2 </num>
<title>nous sommes sur le lien 2 </title>
<commen>HI </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 3 </num>
<title>nous sommes sur le lien 3 </title>
<commen>How are you </commen>
<URL>Gars inconnu</URL>
</desc>
<desc>
<num> 4 </num>
<title>nous sommes sur le lien 4 </title>
<commen>Idk </commen>
<URL>Raymond</URL>
</desc>
<desc>
<num> 5 </num>
<title>nous sommes sur le lien 5 </title>
<commen>Thank you </commen>
<URL>Eric</URL>
</desc>
<desc>
<num> 6 </num>
<title>nous sommes sur le lien 6 </title>
<commen>You're welcome </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 7 </num>
<title>nous sommes sur le lien 7 </title>
<commen>Sorry </commen>
<URL>Céline</URL>
</desc>
</serie2>
<serie3 id="3">
<desc>
<num> 1 </num>
<title>nous sommes sur le lien 1 </title>
<commen>Hello </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 2 </num>
<title>nous sommes sur le lien 2 </title>
<commen>HI </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 3 </num>
<title>nous sommes sur le lien 3 </title>
<commen>How are you </commen>
<URL>Gars inconnu</URL>
</desc>
<desc>
<num> 4 </num>
<title>nous sommes sur le lien 4 </title>
<commen>Idk </commen>
<URL>Raymond</URL>
</desc>
<desc>
<num> 5 </num>
<title>nous sommes sur le lien 5 </title>
<commen>Thank you </commen>
<URL>Eric</URL>
</desc>
<desc>
<num> 6 </num>
<title>nous sommes sur le lien 6 </title>
<commen>You're welcome </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 7 </num>
<title>nous sommes sur le lien 7 </title>
<commen>Sorry </commen>
<URL>Céline</URL>
</desc>
</serie3>
</bds>
I don't even know if i can do that. But thank you for your reading.- «Prev
- Next »
Moderate user : Silver Jigghart