I am facing a challenge with jQuery as a beginner. I have been struggling for the past week to load data from a JSON array using an ajax call. I'm also using a swipe plugin to swipe and display all images on the same div, but I'm unsure of how to add classes to both parent and child elements in my code:
url : "http://my_ip/App/event_h/get_a_evnts",
type:"POST",
dataType:"json",
success: function(data)
{
var event1=data.event1;
var total_event=event1.length;
var event1=data.event1;
var DOM=$('#DOM');
var path="http://my_ip/App/";
var media1=data.media;
var location=json.location;
var event2=data.event;
var rating=data.rating;
var event1[i].event_id =1;//this value also retrived from json array
var output= '<div class="container-fluid" ><section class="row">';
output +='<div class="col-sm-12 col-md-12 col-xs-12"><div class="panel panelstyle">';
output +='<header><h1><small>Event : </small>'+event1[i].event_title+'</h1></header><div class="panel-body">';
output +='<div id="div1" class="swiper-container" ><div id="div2" class="swiper-wrapper" >';
for(j=0; j<media1.length; j++) {
if(event1[i].event_id === media1[j].event_id){
output +='<img id="newimg" class="swiper-slide" src='+path+media1[j].media_path+' alt="new image" />';
}
}});
I've only included the necessary part of the code here, and everything seems to be working fine without any errors in the console. However, the classes .swiper-container, .swiper-container, .swiper-slide aren't loading when the page loads, preventing me from swiping through the images. I've attempted to use "on", "delegate", and "bind", but I can't seem to attach those classes when the page loads.