Dev Faq
0
votes

Comment utiliser ce code en javascript html? cloner()

J'ai trouvé ce code (Exemple https://jsfiddle.net/uxo27cq0/ ) 

<html>
<style>
</style>
<body>

// div here

<script type="text/javascript">

// i put the code here

</script>
</body>
</html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Je ne sais pas comment le faire fonctionner en html de la manière suivante: 

function displaytickets(){
		var $panel = $('<div/>').addClass('col-xs-3 panel panel-default')
    $panel.append($('<div><h3 class="panel-title">Title</h3></div>').addClass('panel-heading'))
    $panel.append($('<div>Panel content</div>').addClass('panel-body'));
    $('body').append($panel);
    
  	// let's assume your ajax returns 4 tickets
    var data = {
    	'tickets' : [
      	{'description' : 'Description_1', 'status': 'Status_1', 'subject': 'Subject_1' },
      	{'description' : 'Description_2', 'status': 'Status_2', 'subject': 'Subject_2' },
      	{'description' : 'Description_3', 'status': 'Status_3', 'subject': 'Subject_3' },
      	{'description' : 'Description_4', 'status': 'Status_4', 'subject': 'Subject_4' }
      ]
    };
    
    for (i = 0; i < data.tickets.length; i++) {
    	var new_panel = $panel.clone(); // note the use of .clone()
      new_panel.find('.panel-title').text(data.tickets[i].subject);
      new_panel.find('.panel-body').text(data.tickets[i].description);
      $('body').append(new_panel);
		}
}

displaytickets();

évidemment cela n'a pas fonctionné, donc, si quelqu'un peut me dire comment cela devrait être, cela résoudrait complètement mon problème

Merci !!!

p >

4 commentaires

quel est le problème et que voulez-vous réaliser?

@Jess Yerena, l'extrait de code est bon, mais nous devons savoir quel est le problème, qu'avez-vous essayé et où vous êtes bloqué plus en détail.

vous pouvez consulter ce jsfiddle.net/8c95b6y7

mais je veux extraire les éléments html du code afin de pouvoir les éditer librement, puis les appeler avec l'identifiant ou autrement. (voir ma dernière réponse)

4 Réponses :

1
votes 

<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> 
<style>
</style>
<body>

// div here
</body>
<script type="text/javascript">

function displaytickets() {
    var $panel = $('<div/>').addClass('col-xs-3 panel panel-default')
                 $panel.append($('<div><h3 class="panel-title">Title</h3></div>').addClass('panel-heading'))
                 $panel.append($('<div>Panel content</div>').addClass('panel-body'));
$('body').append($panel);

  	// let's assume your ajax returns 4 tickets
     var data = {
	'tickets' : [
  	{'description' : 'Description_1', 'status': 'Status_1', 'subject': 'Subject_1' },
  	{'description' : 'Description_2', 'status': 'Status_2', 'subject': 'Subject_2' },
  	{'description' : 'Description_3', 'status': 'Status_3', 'subject': 'Subject_3' },
  	{'description' : 'Description_4', 'status': 'Status_4', 'subject': 'Subject_4' }
     ]
};

for (i = 0; i < data.tickets.length; i++) {
	var new_panel = $panel.clone(); // note the use of .clone()
  new_panel.find('.panel-title').text(data.tickets[i].subject);
  new_panel.find('.panel-body').text(data.tickets[i].description);
  $('body').append(new_panel);
	}
}

displaytickets();

</script>

</html>

1 commentaires

Cela a fonctionné pour moi, mais j'essaie que les éléments html soient hors du code javascript pour pouvoir les modifier librement, quelque chose comme ceci: (voir ma dernière réponse)

0
votes

@Jess Yerena, voici ce dont vous avez besoin - créez deux fichiers et exécutez index.html: index.html 

function displaytickets() {
  var $panel = $('<div/>').addClass('col-xs-3 panel panel-default');
  $panel.append(
    $('<div><h3 class="panel-title">Title</h3></div>').addClass('panel-heading')
  );
  $panel.append($('<div>Panel content</div>').addClass('panel-body'));
  $('body').append($panel);

  // let's assume your ajax returns 4 tickets
  var data = {
    tickets: [
      {
        description: 'Description_1',
        status: 'Status_1',
        subject: 'Subject_1'
      },
      {
        description: 'Description_2',
        status: 'Status_2',
        subject: 'Subject_2'
      },
      {
        description: 'Description_3',
        status: 'Status_3',
        subject: 'Subject_3'
      },
      { description: 'Description_4', status: 'Status_4', subject: 'Subject_4' }
    ]
  };

  for (i = 0; i < data.tickets.length; i++) {
    var new_panel = $panel.clone(); // note the use of .clone()
    new_panel.find('.panel-title').text(data.tickets[i].subject);
    new_panel.find('.panel-body').text(data.tickets[i].description);
    $('body').append(new_panel);
  }
}

displaytickets();

main.js 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="./main.js"></script>
  </body>
</html>

0 commentaires
0
votes

Essayez ceci: entrez le code ici

​​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-clone-here">

</div>
$(document).ready(function(){
  displaytickets();
});
function displaytickets() {
  var $panel = $('<div/>').addClass('col-xs-3 panel panel-default')
  $panel.append($('<div><h3 class="panel-title">Title</h3></div>').addClass('panel-heading'))
  $panel.append($('<div>Panel content</div>').addClass('panel-body'));
  $('#div-clone-here').append($panel);

  // let's assume your ajax returns 4 tickets
  var data = {
    'tickets': [{
        'description': 'Description_1',
        'status': 'Status_1',
        'subject': 'Subject_1'
      },
      {
        'description': 'Description_2',
        'status': 'Status_2',
        'subject': 'Subject_2'
      },
      {
        'description': 'Description_3',
        'status': 'Status_3',
        'subject': 'Subject_3'
      },
      {
        'description': 'Description_4',
        'status': 'Status_4',
        'subject': 'Subject_4'
      }
    ]
  };

  for (i = 0; i < data.tickets.length; i++) {
    var new_panel = $panel.clone(); // note the use of .clone()
    new_panel.find('.panel-title').text(data.tickets[i].subject);
    new_panel.find('.panel-body').text(data.tickets[i].description);
    $('#div-clone-here').append(new_panel);
  }
}

0 commentaires
0
votes

Cela a fonctionné pour moi

​​

<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> 
<style>
 .panel {
   background-color: red;
   border-radius: none;
 }
 .heading {
   background-color: purple;
   width: 100%;

 }
 .panel-body {
   background-color: green;
 }
</style>
<body>

<div id="container" class="panel">
<div id="header" class="heading"><h3 class="panel-title">Title</h3></div>
<div id="content" class="panel-body">Panel content</div>

<script type="text/javascript">

function displaytickets() {
	var $panel = $('container')
	$panel.append($('header'));
	$panel.append($('content'));
	$('body').append(($panel));

	// let's assume your ajax returns 4 tickets
	var data = {
		'tickets': [
  	{'description' : 'Description_1', 'status': 'Status_1', 'subject': 'Subject_1' },
  	{'description' : 'Description_2', 'status': 'Status_2', 'subject': 'Subject_2' },
  	{'description' : 'Description_3', 'status': 'Status_3', 'subject': 'Subject_3' },
  	{'description' : 'Description_4', 'status': 'Status_4', 'subject': 'Subject_4' }
     ]
	};

	for (i = 0; i < data.tickets.length; i++) {
		var new_panel = $panel.clone(); // note the use of .clone()
		new_panel.find('.panel-title').text(data.tickets[i].subject);
		new_panel.find('.panel-body').text(data.tickets[i].description);
		$('body').append(new_panel);
	}
}

displaytickets();
</script>
</body>
</html>

mais je souhaite extraire les éléments html du code afin de pouvoir les modifier librement, puis les appeler avec l'identifiant ou autrement. 

<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> 
<style>
</style>
<body>

// div here
</body>
<script type="text/javascript">

function displaytickets() {
    var $panel = $('<div/>').addClass('col-xs-3 panel panel-default')
                 $panel.append($('<div><h3 class="panel-title">Title</h3></div>').addClass('panel-heading'))
                 $panel.append($('<div>Panel content</div>').addClass('panel-body'));
$('body').append($panel);

  	// let's assume your ajax returns 4 tickets
     var data = {
	'tickets' : [
  	{'description' : 'Description_1', 'status': 'Status_1', 'subject': 'Subject_1' },
  	{'description' : 'Description_2', 'status': 'Status_2', 'subject': 'Subject_2' },
  	{'description' : 'Description_3', 'status': 'Status_3', 'subject': 'Subject_3' },
  	{'description' : 'Description_4', 'status': 'Status_4', 'subject': 'Subject_4' }
     ]
};

for (i = 0; i < data.tickets.length; i++) {
	var new_panel = $panel.clone(); // note the use of .clone()
  new_panel.find('.panel-title').text(data.tickets[i].subject);
  new_panel.find('.panel-body').text(data.tickets[i].description);
  $('body').append(new_panel);
	}
}

displaytickets();

</script>

</html>

1 commentaires

Yerana: Vous pouvez vous référer à la réponse donnée par Carl Kevin Garcia.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO