Je suis toujours dans le processus d'apprentissage et j'aimerais savoir comment je peux combiner les deux scripts ci-dessous, mon code fonctionne bien maintenant mais je veux le minimiser et les combiner.
Voici les deux différences dans les deux scripts ci-dessous:
& $ filter = substringof ('Consumer Products', Line1) ",
$("#boxWrap").append(
<script type="text/JavaScript">
$(document).ready(function(){
$.ajax({
url: "/NewBusiness/_api/web/lists/GetByTitle('CompletedSubmissionTiles')/Items?$select=EncodedAbsUrl,Title,Line1,Line2,Hyperlink,TargetWindow,DescriptionHTMLOption,Line1,Line2,Line3,Line4,Line5,Line6,Line7,Line8,TileOrder&$orderby=TileOrder asc,Title asc&$filter=substringof('Healthcare',Line1)",
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: function (data) {
if (data.d.results) {
var object = data.d.results;
var TileDesc;
var Line1var;
var Line2var;
var Line3var;
var Line4var;
var Line5var;
var Line6var;
var Line7var;
var Line8var;
var Line9var;
var Line10var;
for(var i = 0; i < object.length; i++)
{
if(object[i].DescriptionHTMLOption != null) { // Covers 'undefined' as well
TileDesc = "<div class='TileDescr'>" + object[i].DescriptionHTMLOption + "</div>";
} else {
TileDesc = "";
}
if(object[i].Line1 != null) { // Covers 'undefined' as well
Line1var = "<div class='Line1'>" + object[i].Line1 + "</div>";
} else {
Line1var = "";
}
$("#boxWrap").append("<div class='col-md-4 box' data-toggle='modal' data-target='#modal"+object[i].TileOrder+"' id='TileBox"+object[i].TileOrder+"'><div id='titleBox' class='titleBox'><h1>" + object[i].Title + "</h1><div style='width:250px; height: 130px;background-color: white; border: 1px solid lightgrey;'><img style='width: auto; height: inherit; padding-left: 10px;' src='" + object[i].EncodedAbsUrl + "' alt='" + object[i].Title +"'/></div></div></div>");
}
}
}
})
});
</script>
<script type="text/JavaScript">
$(document).ready(function(){
$.ajax({
url: "/NewBusiness/_api/web/lists/GetByTitle('CompletedSubmissionTiles')/Items?$select=EncodedAbsUrl,Title,Line1,Line2,Hyperlink,TargetWindow,DescriptionHTMLOption,Line1,Line2,Line3,Line4,Line5,Line6,Line7,Line8,TileOrder&$orderby=TileOrder asc,Title asc&$filter=substringof('Consumer Products',Line1)",
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: function (data) {
if (data.d.results) {
var object = data.d.results;
var TileDesc;
var Line1var;
var Line2var;
var Line3var;
var Line4var;
var Line5var;
var Line6var;
var Line7var;
var Line8var;
var Line9var;
var Line10var;
for(var i = 0; i < object.length; i++)
{
if(object[i].DescriptionHTMLOption != null) { // Covers 'undefined' as well
TileDesc = "<div class='TileDescr'>" + object[i].DescriptionHTMLOption + "</div>";
} else {
TileDesc = "";
}
if(object[i].Line1 != null) { // Covers 'undefined' as well
Line1var = "<div class='Line1'>" + object[i].Line1 + "</div>";
} else {
Line1var = "";
}
$("#boxWrap2").append("<div class='col-md-4 box' data-toggle='modal' data-target='#modal"+object[i].TileOrder+"' id='TileBox"+object[i].TileOrder+"'><div class='titleBox'><h1>" + object[i].Title + "</h1><div style='width:250px; height: 130px;background-color: white; border: 1px solid lightgrey;'><img style='width: auto; height: inherit; padding-left: 10px;' src='" + object[i].EncodedAbsUrl + "' alt='" + object[i].Title +"'/></div></div></div>");
}
}
}
})
});
</script>
3 Réponses :
Vous n'avez pas à faire grand-chose,
<script>
$(document).ready(function(){
getConsumerProducts();
getHealthcare();
});
function getConsumerProducts(){
$.ajax({
// your many many lines of code
// ...
)}
}
function getHealthcare(){
$.ajax({
// your many many lines of code
// ...
)}
}
</script>
Je suggérerais de créer sa propre fonction qui prend en compte l'ID d'élément qui recevra l'ajout ainsi que le filtre, donc quelque chose comme ceci:
DoMyApiCalls("boxWrap", "substringof('Healthcare',Line1)");
DoMyApiCalls("boxWarp2", "substringof('Consumer Products',Line1)");
Ensuite, vous pouvez simplement appeler cette fonction x nombre de fois où chaque filtre et chaque identifiant d'élément sont transmis à la fonction. Vous pouvez donc mettre ceci dans le document.ready:
function DoMyApiCalls(elementId, filter){
.ajax({
//Inside here append your parameters into your strings,
url: url: "/NewBusiness/_api/web/lists/GetByTitle('CompletedSubmissionTiles')/Items?$select=EncodedAbsUrl,Title,Line1,Line2,Hyperlink,TargetWindow,DescriptionHTMLOption,Line1,Line2,Line3,Line4,Line5,Line6,Line7,Line8,TileOrder&$orderby=TileOrder asc,Title asc&$filter=" + filter,
type: "GET",
//etc.
success:function(data){
//etc.
//Append to passed in element id
$('#' + elementId).append();
}
});
}
Puisque filter et id sont les seules variables ici, vous pouvez créer une fonction séparée qui prend ces 2 paramètres et y faire l'appel ajax. Ajoutez le filtre à la fin de l'URL. Utilisez le id dans le sélecteur $ (id) .append Puis créez un tableau d'objets avec 2 propriétés. Appelez la fonction ajax générique pour chaque élément du tableau:
function getDataFromAjax(filter, id) {
$.ajax({
// append "filter" to the end of url
url: "/NewBusiness/_api/web/lists/....Title asc&$filter=" + filter,
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: function(data) {
if (data.d.results) {
var object = data.d.results;
var TileDesc;
// OTHER VARIABLES
for (var i = 0; i < object.length; i++) {
/*
LOTS OF LOGIC
*/
// get the dynamic id
$("#" + id).append("<div class='col-md-4 box' and so on");
}
}
}
})
}
var array = [{
filter: "substringof('Healthcare',Line1)",
id: "boxWrap"
},
{
filter: "substringof('Consumer Products',Line1)",
id: "boxWrap2"
}
]
array.forEach(i => getDataFromAjax(i.filter, i.id))
C'est une aide incroyable, mais malheureusement cela ne remplit rien maintenant, est-ce que je lance la fonction dans
Il semble que les deux appels
ajaxfont tout de même, sauf pour l'élément auquel ils s'ajoutent, ai-je raison?Correct, il ajoute simplement différemment et le filtre est différent.