I have the following problem and would appreciate your help :) Excuse my "deepL" English :)
I am using ajax to retrieve the paths of images on my database to create a dynamic image gallery with the result. For this purpose a for-loop is run x times depending on the number of images. Within one run a slide shall be cloned and added. Afterwards, the image on the slide is to be refilled accordingly using the "src" attribute.
JS Code:
function show_anbieter_profilbilder(){
var sessionID = localStorage.getItem("SE_session_ID");
if (sessionID != null){
var postData={"contentID":6,"sessionID":sessionID};
var dataString= JSON.stringify(postData);
ajaks(myCallback, dataString, "http://localhost/Login/wf_loadContent.php");
function myCallback(result){
var Daten = result;
for(i=0; i<Daten.length; i++){
var Bildpfad = Daten[i][0];
var Bildstatus = Daten[i][1];
var source = "http://localhost/Login/" + Bildpfad;
if(Bildstatus == 1){
$('#anbieter_profilbildgallerie_bild').attr('src', source);
}
var anz = Daten.length +1;
$('#anbieter_profilbildergallerie_slide').attr('aria-label', "1 of " + anz);
$('.w-slider-aria-label').attr('aria-live', "polite");
$newslide = $('#anbieter_profilbildergallerie_slide').clone().insertBefore('#anbieter_profilbildergallerie_mask .w-slider-aria-label:last-child');
$newslide.attr('id', i);
var pos = i+2;
$('#' + i).attr('aria-label', pos + " of " + anz);
$('#' + i).children().children().attr('src', source);
}
}
}
}
php Code:
case 6:
$query = "SELECT Bild, Aktiv FROM profilbilder WHERE UserID = '".$sessionID."'";
$result = mysqli_query($conn, $query);
$bilder = [];
while ($row = mysqli_fetch_row($result)) {
array_push($bilder, $row);
}
echo json_encode($bilder);
HTML code (excerpt):
<div id="anbieter_profilbildergallerie_popup" class="anbieter_profilbildergallerie_popup">
<div id="anbieter_profilbildergallerie_popup_form" class="anbieter_profilbildergallerie_popup_form">
<div data-delay="4000" data-animation="slide" class="slider-4 w-slider" data-autoplay="false" data-easing="ease" data-hide-arrows="false" data-disable-swipe="false" data-autoplay-limit="0" data-nav-spacing="3" data-duration="500" data-infinite="true">
<div id="anbieter_profilbildergallerie_mask" class="anbieter_profilbildergallerie_mask w-slider-mask">
<div id="anbieter_profilbildergallerie_slide" class="anbieter_profilbildergallerie_slide w-slide">
<div class="container-10 w-container">
<img src="mySource :P" loading="lazy" id="anbieter_profilbildgallerie_bild" alt="" class="anbieter_profilbildgallerie_bild"/>
</div>
</div>
</div>
<div class="w-slider-arrow-left">
<div class="icon-2 w-icon-slider-left">
</div>
</div>
<div class="w-slider-arrow-right">
<div class="icon-3 w-icon-slider-right">
</div>
</div>
<div id="profilbildgallerie_slidenav" class="profilbildgallerie_slidenav w-slider-nav w-round">
</div>
</div>
<div class="section-31 w-clearfix wf-section">
<a href="#" class="anbieter_profilbilderdelete_button w-button">Löschen</a>
<a href="#" class="anbieter_profilbildersetactive_button w-button">Zum Profilbild machen</a>
</div>
</div>
</div>
The problem is that while the element is cloned correctly, it is not added as long as it is inside the ajax success function. Once I place it outside, it runs as intended. Now, however, due to the asynchronous nature of the ajax, I need to place everything inside the success function (feel free to teach me better here) to know how many slides I need (since the number of images is variable). Addition: I am working with webflow and the element to be cloned is a slide of the webflow "Slider" element. This should be added to the mask provided for it in the "Slider" element.
Eliminated error causes:
Syntax of the clone-append is wrong: The code works outside the success function.
ID of clone-object or append-object are not known inside the function (for whatever reason): Both objects could be styled using .css...
Result of the ajax does not return the desired result: Has been checked, runs correctly
Cloning and appending does not work within an ajax success function with webflow stuff: Exactly the same constellation works elsewhere! See the following code:
Working Code:
function show_anbieter_ausbildung(){
var sessionID = localStorage.getItem("SE_session_ID");
if (sessionID != null){
var postData={"contentID":2,"sessionID":sessionID};
var dataString= JSON.stringify(postData)
ajaks(myCallback, dataString, "http://localhost/Login/wf_loadContent.php");
function myCallback(result){
var Daten = result;
for(i=0; i<Daten.length; i++){
var EintragsID_r = Daten[i][0];
var Institution_r = Daten[i][1];
var Abschluss_r = Daten[i][2];
var Fachrichtung_r = Daten[i][3];
var Abschlussnote_r = Daten[i][4];
var Beginn_r = convertdate(new Date(Daten[i][5]));
var Ende_r = convertdate(new Date(Daten[i][6]));
var Kurzbeschreibung_r = Daten[i][7];
$ausbildungitem = $('#Ausbildungitem').clone(true).appendTo('#Ausbildung_Inhalt');
$ausbildungitem.attr('id',"item-" + EintragsID_r);
$ausbildungitem.show();
$ausbildungitem.attr('draggable', "true");
$ausbildungitem.children().children('.ausbildung_institution').text(Institution_r);
$ausbildungitem.children().children('.ausbildung_abschluss').text(Abschluss_r + ", " + Fachrichtung_r + ", Abschlussnote: " + Abschlussnote_r);
$ausbildungitem.children().children('.ausbildung_zeitraum').text(Beginn_r +" - " + Ende_r);
$ausbildungitem.children().children('.ausbildung_kurzbeschreibung').text(Kurzbeschreibung_r);
$ausbildungitem.children().children('.anbieter_ausbildungupdate_edit').attr('editID', EintragsID_r);
$ausbildungitem.children().children('.anbieter_ausbildungdelete_button').attr('deleteID', EintragsID_r);
}
$('#Ausbildung_Inhalt').height(140*Daten.length);
};
};
};
Update: It works now in some cases. Here the new added elements:
<div id="anbieter_profilbildergallerie_mask" class="anbieter_profilbildergallerie_mask w-slider-mask">
<div id="anbieter_profilbildergallerie_slide" class="anbieter_profilbildergallerie_slide w-slide" aria-label="1 of 4" role="group" style="transform: translateX(0px); opacity: 1; transition: transform 500ms ease 0s;"></div>
<div id="0" class="anbieter_profilbildergallerie_slide w-slide" aria-label="2 of 4" role="group" style="transform: translateX(0px); opacity: 1; transition: transform 500ms ease 0s;" aria-hidden="true"></div>
<div id="1" class="anbieter_profilbildergallerie_slide w-slide" aria-label="3 of 4" role="group" style="transform: translateX(0px); opacity: 1; transition: transform 500ms ease 0s;" aria-hidden="true"></div>
<div id="2" class="anbieter_profilbildergallerie_slide w-slide" aria-label="4 of 4" role="group" style="transform: translateX(0px); opacity: 1; transition: transform 500ms ease 0s;" aria-hidden="true"></div>
<div aria-live="polite" aria-atomic="true" class="w-slider-aria-label" data-wf-ignore="" aria-hidden="true">Slide 1 of 4.</div>
</div>
Now the problem ist, that the attribute "aria-live" is polite sometimes and sometimes it turns off (randomly?) and then the cloned elements are not shown and accessible in the slideshow. I updated my js code as well to set the appended elements before the slider, so that the slider includes all of them. Furthermore i try to set the aria-live attribute on polite, but this is not working. (I have no clue about the aria-live).