I am trying to show images of a particular holiday package from my DB into a slider using jQuery append. My slider is inside a modal and this modal is shown from javascript function. But I am only getting one image into the slide show. I am using while loop to iterate the image array and it is added to the div using innerhtml. I don't know where I am going. Can anyone please help me?
Here is my code:
js
function showDetailsModal(id) {
$.post('uae-holidaydetails.php',{uaeid:""+id+""},function(data){
data = jQuery.parseJSON(data);
var datadet= data[0];
if(data[1]) {
var dataimg= data[1];
var imgarray=[];
for (index = 0; index < dataimg.length; index++) {
imgarray.push(dataimg[index].image);
}
var i=0;
while(imgarray[i]){
document.getElementById("detail-banner").innerHTML='<div class="item"><img src="../sysimages/origimages/'+imgarray[i]+'" alt=""></div>'; //here I am creating the div for slider
i++;
}
}
document.getElementById("uaetitle").innerHTML= datadet.title;
document.getElementById("subtitle").innerHTML= datadet.subtitle;
$('#holiday-details').modal('show'); //modal is shown
});
}
php
<?php
include_once("index.class.php");
$objScr = new INDEX();
if(isset($_POST['uaeid'])) {
$uaeid=$_POST['uaeid'];
$rslthlydata = $objScr->getUaedata($uaeid); //get holiday details
$rowuaedetails = $rslthlydata->fetchAssoc();
$resultimages= $objScr->getUaeholyImages($uaeid); //get images
while($resultimg=$resultimages->fetchAssoc()) {
$dataimg[]=$resultimg;
}
echo json_encode(array($rowuaedetails,$dataimg)) ;
}
html
<div class="modal fade" id="holiday-details" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">CLOSE <img src="images/close-btn.png" alt=""></button>
<div class="modal-body">
<!--<section class="banner detailed"></section> -->
<div class="owl-carousel owl-theme" id="detail-banner" >
//this is the slider
</div>
<div class="details">
<h3 class="top-line" id="uaetitle"></h3>
<h4 id="subtitle"></h4>
</div>
</div>
</div>
</div>
</div>
Edit 1
I tried append also. When I append I am getting the whole images but it's not shown as slider
$('#detail-banner').append('<div class="item"><img src="../sysimages/origimages/'+imgarray[i]+'" alt=""></div>');
Try this, no need to mix pure JS and jQuery. Pick one and stick to it ;)
jQuery(document).ready(function($){
function showDetailsModal(id) {
$.post('uae-holidaydetails.php', {uaeid: id }, function(data) {
var data = JSON.parse(data);
var dataDet = data[0];
if(data[1]) {
var dataImg = data[1];
var imgArray = [];
for (var index = 0; index < dataImg.length; index++) {
imgArray.push(dataImg[index].image);
}
var items = "";
for (var j = 0; j < imgArray.length; i++) {
items += '<div class="item"><img src="../sysimages/origimages/'+imgArray[j]+'" alt=""></div>';
}
$('#detail-banner').append(items);
}
$('#uaetitle').append(dataDet.title);
$('#subtitle').append(dataDet.subtitle);
$('#holiday-details').modal('show'); //modal is shown
});
}
});
You have to concat your image array data using + to create all images.You have to use innerHTML += to avoid replacing the content of a node Like following.
function showDetailsModal(id) {
$.post('uae-holidaydetails.php',{uaeid:""+id+""},function(data){
data = jQuery.parseJSON(data);
var datadet= data[0];
if(data[1]) {
var dataimg= data[1];
var imgarray=[];
for (index = 0; index < dataimg.length; index++) {
imgarray.push(dataimg[index].image);
}
var i=0;
var imageContent = "";
for (var j = 0; j < imgArray.length; i++) {
imageContent +='<div class="item"><img src="../sysimages/origimages/'+imgarray[j]+'" alt=""></div>'; //here I am creating the div for slider
}
}
document.getElementById("detail-banner").innerHTML = imageContent;
document.getElementById("uaetitle").innerHTML= datadet.title;
document.getElementById("subtitle").innerHTML= datadet.subtitle;
$('#holiday-details').modal('show'); //modal is shown
});
}
For example let's consider the following scenario:
var array = [1,2,3,4];
for(var i=1;i<=array.length;i++){
document.getElementById("test1").innerHTML = i+" ";
}
for(var j=1;j<=array.length;j++){
document.getElementById("test2").innerHTML += j+" ";
}
<div id="test1"></div>
<div id="test2"></div>
Related
I have three divs with a title and an image in an other, bigger div. I'm trying to drag and drop them around, but if I drop it above an other div they drop in each other. How can I disable de divs with the image as a dropzone?
I worked with JavaScript, HTML and css.
<div class=dirFiles>
<div draggable='true' onmousedown='ablegenVerbieten()' class='file'>
<p>Title</p>
<img></img>
</div>
<div draggable='true' onmousedown='ablegenVerbieten()' class='file'>
<p>Title</p>
<img></img>
</div>
<div draggable='true' onmousedown='ablegenVerbieten()' class='file'>
<p>Title</p>
<img></img>
</div>
</div>
<script>
function ziehen(ev) {
ev.dataTransfer.setData('text', ev.target.id);
}
function ablegenErlauben(ev) {
ev.preventDefault();
}
function ablegenVerbieten(ev) {
oevent.preventDefault ? event.preventDefault() : event.returnValue = false;
}
function ablegen(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData('text');
var target = ev.target;
while (" "+target.className+" ".indexOf(" dirFiles ") == -1) target = target.parentNode;
target.appendChild(document.getElementById(data));
}
window.addEventListener("load",function () {
var elms = document.querySelectorAll(".dirFiles");
for (var i = 0; i < elms.length; i++) {
var dirFiles = elms[i];
dirFiles.addEventListener("drop",ablegen);
dirFiles.addEventListener("dragover",ablegenErlauben);
};
elms = document.querySelectorAll("[draggable=true]")
for (var i = 0; i < elms.length; i++) {
var draggable = elms[i];
draggable.addEventListener("dragstart",ziehen);
};
});
</script>
I have multiple json object and each object have multiple same, For example:
A->
- A1
-A1A
-A1A
- A2
-A2A
-A2A
- A3
-A3A
-A3A
I have tired to execute in below code but it's not working. Can you please suggest me what is the issue in my code?
subscriptionbarMyData = JSON.parse(window.localStorage.getItem('subscriptionBarJson'));
$('.total-month-cost-product-header-names').text('').addClass('hidden');
for (var key in subscriptionbarMyData) {
if (subscriptionbarMyData.hasOwnProperty(key)) {
var val = subscriptionbarMyData[key];
$('.total-month-cost-product-header')
.find('.total-month-cost-product-header-names')
.removeClass('hidden')
.addClass('show')
.text(val.Name + val.ProductPrice);
var addonvalue = subscriptionbarMyData[key]["Add-on"];
for (var keyval in addonvalue) {
if (addonvalue != undefined) {
var TotalOneCostProduct = $('.total-month-cost-product-items').text('');
for (var keyval in addonvalue) {
// var dataValues = addonvalue[keyval].Name;
$('.total-month-cost-product-header-names')
.text(addonvalue[keyval].Name)
.appendTo(TotalOneCostProduct);
}
}
}
}
}
<div class="summary-block">
<div class="total-month-cost-summary">
<div class="total-month-cost-product-header">
<div class="total-month-cost-product-header-names"></div>
<div class="total-month-cost-product-header-price"></div>
</div>
<div class="total-month-cost-product-items">
<div class="total-month-cost-product-item-names"></div>
<div class="total-month-cost-product-item-price"></div>
</div>
</div>
</div>
I have one array that I want to show in a modal.
The array does have the elements as I have tested this, but it doesn't appear in the modal.
This is the code:
<script>
var selected_items = [];
var i = 0;
function LoadItems() {
for(var j = 0; j < i; j++) {
document.write('<li>' + skins_selected[j] + '</li>');
}
}
function UpdateArray(name)
{
selected_items[i] = name;
i++;
}
</script>
<div class="modal fade" id="modalItems" tabindex="-1" role="dialog" aria-labelledby="labelItems">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="labelItems">¿Confirma que desea depositar los siguientes items?</h4>
</div>
<form class="form-inline" role="form">
<div class="modal-body">
<div class="form-group">
<ul>
<script>
LoadItems();
</script>
</ul>
</div>
</div>
<div class="modal-footer">
<button onclick="mostrar()" class="btn btn-info">Depositar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
</div>
</form>
</div>
</div>
</div>
P.S: If I put:
<script>
function LoadItems() {
(var j = 0; j < 5; j++) {
document.write(j);
}
}
</script>
it shows me "01234", but when I put the array it doesn't show me anything.
Your current code is looping through the array i times. However, on the previous line i is set to 0. So it's looping 0 times, which is why you get nothing displayed.
I assume you want it to loop through all the items in the array, regardless of how
many elements there are. In that, case you should use the .length property of the skins_selected array:
function LoadItems() {
for(var j = 0; j < skins_selected.length; j++) {
document.write('<li>' + skins_selected[j] + '</li>');
}
}
You can dispense with the i variable entirely.
You are initially setting i, your loop exit condition, to 0. As a result your loop will never run. I.e. you are essentially saying:
for(var j=0; j < 0; j++){
//j is never < 0 so this code never runs
}
Your second example removes this and hardcodes the loop exit condition to the expected value.
<ul>
<script>
var selected_items=[1,2,3,4,5];
var i = 5;
function LoadItems() {
for(var j = 0; j < selected_items.length; j++) {
document.write('<li>' + selected_items[j] + '</li>');
}
}
LoadItems();
</script>
</ul>
your loop is not executing because for(var j = 0; j < i; j++) where j=0 and i=0, so j < i it can be like that.
you should declare i = 5 not i = 0;
Also your array is empty, please put something in your array like
var items_selected = [1,2,3,4,5];
I have written some code so that when I click on a specific div, a JavaScript function will be called to add some data into database. The problem is that the function is in a for loop, so when I click on it a success box will keep re-appearing, when I put the method out of loop, it don't work. This is the code:
for (i = 1; i <= data.length; i++) {
var objSkills = JSON.parse(data);
if (objSkills.skills[i - 1].idemetteur != <?php echo $me; ?>) {
$("div[class^='plus_']").click(function() {
var sk = $(this).attr("sk");
addSkillEndo(sk);
})
}
}
Here are the div examples:
<div id="itemskill">
<div class="skilltext" id="skilltext_1301" value="1301">Bourse</div>
<div id="counter" class="plus_1301" em="1301" sk="82" style="">+</div>
</div>
<div id="itemskill">
<div class="skilltext" id="skilltext_1301" value="1301">Finance</div>
<div id="counter" class="plus_1301" em="1301" sk="83" style="">+</div>
</div>
If you give your divs an unique ids, you can try to call them like:
$("#skilltext_1301").click(function() {
var sk = $(this).attr("sk");
addSkillEndo(sk);
});
Or try it this way:
$(document).ready(function(){
$("div[class^='plus_']").click(function() {
var sk = $(this).attr("sk");
addSkillEndo(sk);
});
});
for (i = 1; i <= data.length; i++) {
var objSkills = JSON.parse(data);
if (objSkills.skills[i - 1].idemetteur != <?php echo $me; ?>) {
// do anything
}
}
A side-note: change your for loop to:
for (i=0; i<data.length; i++){}
and you can erase "- 1" in your if statement.
When I try to get child div IDs within each parent div/class I get the error "Uncaught TypeError: Cannot set property '0' of undefined". I am using this javascript with scriptaculous so I have turned off the "$" shortcut.
Example HTML:
<div id="group1" class="section">
<h3 class="handle"><input type="hidden" name="groupName1" value="MyGroup1">MyGroup1</h3>
<div id="item_73548" class="lineitem">item a</div>
<div id="item_73386" class="lineitem">item b</div>
<div id="item_73163" class="lineitem">item c</div>
</div>
<div id="group2" class="section">
<h3 class="handle"><input type="hidden" name="groupName2" value="MyGroup2">MyGroup2</h3>
<div id="item_73548" class="lineitem">item d</div>
<div id="item_73386" class="lineitem">item e</div>
<div id="item_73163" class="lineitem">item f</div>
</div>
The Javascript:
$.noConflict();
var sections = document.getElementsByClassName('section');
var groups = new Array();
for (i = 0; i < sections.length; i++) {
var section = sections[i];
var sectionID = section.id;
var j = 0;
jQuery.each(jQuery("#" + sectionID + " .lineitem"), function () {
groups[i][j] = jQuery(this).attr('id');
j++;
});
}
console.log(groups);
The output should be:
groups[0][0]="item_73548";
groups[0][1]="item_73386";
groups[0][2]="item_73163";
groups[1][0]="item_73548";
groups[1][1]="item_73386";
groups[1][2]="item_73163";
Fiddle here: http://jsfiddle.net/qy9dB/3/
You just need to make sure that groups[i] is setup as an array before you try and add 2nd level elements to the array.
$.noConflict();
var sections = document.getElementsByClassName('section');
var groups = new Array();
for (i = 0; i < sections.length; i++) {
var section = sections[i];
var sectionID = section.id;
groups[i] = [];
var j = 0;
jQuery.each(jQuery("#" + sectionID + " .lineitem"), function () {
groups[i][j] = jQuery(this).attr('id');
j++;
});
}
console.log(groups);