Can't loop through Giphy API Array - javascript

I have a CodePen utilizing the GIPHY API that calls GIFs based off user input. It works except it only calls the first item in an array. I realize because this is calling the first item in an array. I tried replacing 0 with i and attempted a for loop but it would not make the call. Please note I am using jQuery.
https://codepen.io/anon/pen/wdewjL
HTML
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h1>GIF Search</h1>
</div>
</div><!-- END ROW-->
<div class="row">
<div class="col-sm-12 outerWrapper">
<form>
<input type="text" id="userQuery" value="" placeholder="">
<br>
<button class="btn" type="submit" id="searchButton">Search</button>
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="search-text">
</div>
<div class="img-container">
<a class="img-link" target="_blank" href="#"><img id="searchResults" src="" /></a>
</div><!-- END IMG-CONTAINER -->
</div><!-- END COL -->
</div><!-- END ROW -->
Share
</div><!-- END CONTAINER -->
JAVASCRIPT
$( document ).ready(function(){
// Construct the URL
$('#searchButton').on('click', function(e){
e.preventDefault();
var queryURL= "https://api.giphy.com/v1/gifs/search?q=" + $('#userQuery').val() + "&api_key=dc6zaTOxFJmzC";
var limit = '&limit=24';
var q = $('#userQuery').val();
// Call API
$.ajax(
{
type: 'GET',
url: queryURL,
success:function(response){
// This is the API response data. It's a JSON object of 24 gifs
response.data.forEach(function() {
var giphyURL = response.data[0].images.fixed_height.url;
console.log(giphyURL);
var imageResult = $('<img class=img-result src=' + giphyURL + ' />');
imageResult.appendTo($('.img-container'));
});
$('.search-text').html('<p>Search result for ' + q + '</p>');
}
});
})
});


Here is the updated codepen
https://codepen.io/anon/pen/dWRbaj
Problem was in the foreach, the item being iterated on is passed in as the argument to the callback function you provide.
let data = [1,2,3,4];
data.foreach(function(item){
console.log(item);
})

Related

Handlebars lookup to make an href

I am trying to make a mod on an existing app. All I want to do is create an href that contains a url, but using the handlebars lookup function. When I try it just returns a blank value.
Here is my function:
var cardLink = function generateCardLink() {
var url = `"url/container-scan-reports/${vendor}/${product}/${image}"`
return url;
}
//...
res.render('vendor', {
title: 'Vendor Images',
images: images,
tags: tags,
cardLink: cardLink
});
I am then trying to pass in href this way on the top div of template.
<div class="row row-cards-pf ">
{{#each images}}
<div href={{lookup ../cardLink #index }} class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
<div class="card-pf-body">
<div class="card-pf-top-element">
<span class="pficon-image card-pf-icon-circle"></span>
</div>
<h2 class="card-pf-title text-center">
{{ this }}
</h2>
<div class="card-pf-items text-center">
<div class="card-pf-item">
{{{ lookup ../tags #index}}}
</div>
</div>
<!-- <p class="card-pf-info text-center"><strong>Most recent image</strong> {{ lookup ../mostRecentImages #index}}</p> -->
</div>
<div class="card-pf-view-checkbox">
<input type="checkbox">
</div>
</div>
</div><!-- /col -->
{{/each}}
Can anyone help me?

You don't need lookup in this case. I think you want to display the url, so #index is not the right reference. Try it this way:
<div href={{../cardLink}} class="col-xs-12 col-sm-6 col-md-4 col-lg-4">

How to load XML data on button click?

I created a sample code to view xml data. When the page is loading, my current code load full xml file. But I need to load XML file after the button click. How can I fix the issue?
here is the code
$(document).ready(function(){
$.ajax({
type:"GET",
url:"contact.xml",
dataType:"xml",
success:showCD
});
});
function showCD(xml){
xml = $(xml).children();
$(xml).children().each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<div class="thumbnail">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div> </div>`;
$("#xmldata").append(html);
});
}
<section>
<div class="container">
<input type="button" value="View All" id="myButton1" class="reveal" style="float: right;" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hide'>
<div class="block">
<div class="row" id="xmldata"></div>
</div>
</div>
</div>
</section>
Plunker

Just add a click event listener to the button and put the AJAX request inside the handler.
$(document).ready(function(){
// adding click event listener to the button
$('#myButton1').on('click', function() {
// make the AJAX request
$.ajax({
type:"GET",
url:"contact.xml",
dataType:"xml",
success:showCD
});
});
});
function showCD(xml){
xml = $(xml).children();
$("#xmldata").empty();
xml.each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<div class="thumbnail">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div> </div>`;
$("#xmldata").append(html);
});
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<section>
<div class="container">
<input type="button" value="View All" id="myButton1" class="reveal" style="float: right;" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hide'>
<div class="block">
<div class="row" id="xmldata"></div>
</div>
</div>
</div>
</section>

How to count number of classes generated using jQuery?

I have following HTML code.
Here 2 add/remove link exists. 1) Add More Details(+) 2) Add(+)
when I click on Add(+) link its clone the tour_wrap class div and counting the number of trip_counting class div cloned/added. Like: Trip 1, Tip 2, Trip 3 etc..
And, I have another link called Add More Details (+) which is clone the tour_wrap div.
So when I click on this link twice for e.g then it's clone the tour_wrap div 2 times, That's good.
Now I have 3 tour_wrap div. In this div's you can see that I have the link Add(+) 3 times, right? Yes. So when I click on any Add(+) link then it's counting the Total number of trip_counting classes added But I want to count only corresponding trip_counting classes.
Check this image:
HTML Code:
<div class="tour_wrap">
<!-- some other html code for the tour -->
<div class="trip_wrap">
<h5 class="badge badge-success trip_counting">Trip 1</h5>
<div class="col-md-4">
<div class="form-group">
<label>From</label>
<input type="text" name="ow_from[]" class="form-control" placeholder="From">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>To</label>
<input type="text" name="to[]" class="form-control" placeholder="To">
</div>
</div>
<div class="col-md-12">
<div class="change_trip text-right">
<a class="btn add_button_trip trip_btn">Add(+)</a>
</div>
</div>
</div> <!-- end trip_wrap -->
</div> <!-- end tour wrap -->
<div class="row">
<div class="col-md-12">
<div class="form-group change text-right">
<a class="btn add_button add_more add_more_btn"><strong>Add More Details (+)</strong></a>
</div>
</div>
</div> <!-- end row -->
jQuery Code:
// for all way
$("body").on("click",".add_button",function(){
var html = $(".tour_wrap").first().clone();
$(html).find(".change").html("<a class='btn remove remove_more'>Remove Details(-)</a>");
$(".tour_wrap").last().after(html);
$('.counting').each(function(i, elm) {
$(elm).text('Detail ' + (i + 1));
});
});
$("body").on("click",".remove",function(){
$(this).parents(".tour_wrap").remove();
});
// add more trip
$("body").on("click",".add_button_trip",function(){
var html = $(".trip_wrap").first().clone();
$(html).find(".change_trip").html("<a class='btn remove_trip remove_more trip_btn_remove'>Delete(-)</a>");
//$(".trip_wrap").last().after(html);
$('.trip_wrap').each(function(i, elm) {
$(elm).last().after(html);
});
$('.trip_counting').each(function(i, elm) {
$(elm).text('Trip ' + (i + 1));
});
});
$("body").on("click",".remove_trip",function(){
$(this).parents(".trip_wrap").remove();
});

How i can do a modal with picture

I ask a question about my function Javascript.
I recover a data list after an a ajax call.
In the list i have a field with a picture and i want show this in a modal bootstrap.
In my code the picture is displayed below the column.
Thanks in advance guys :)
$.when(promiseListeRubriqueDocument).then(function(result) {
var data = JSON.parse(result);
$(".listRubrique").html("");
$.each(data, function(index, item) {
console.log(item);
var rubTemplate = $(".template");
var modal = (".img");
var rub = $(rubTemplate).clone().removeClass("template").removeClass("hide");
$(rub).find(".labelRubrique").text(item.codeRubrique);
$(rub).find(".inputRubrique").val(item.libelleRubrique);
$(rub).find("div.rubrique-image").attr("data-rubrique-id", item.idRub);
$(rub).find("div.rubrique-image[data-rubrique-id=" + item.idRub + "]").click(function(i, element) {
if (item.imageRubrique) {
if ($("" + "[data-rubrique-id=" + item.idRub + "]").find('img.rubrique-exemple').length < 1) {
$("" + "[data-rubrique-id=" + item.idRub + "]").append("<div><img class='rubrique-exemple' src=" + item.imageRubrique + " width='100px' /></div>");
}
}
});
$(".listRubrique").append(rub);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="list-group-item template hide">
<label class="labelRubrique" style="font-weight:bold"></label>
<div class="row rubrique-image" data-rubrique-id="">
<div class="col-md-8">
<input name="enteteRubrique" id="enteteRubrique" maxlength="255" type="text" class="form-control aveo-icon aveo-magnifier inputRubrique" disabled/>
</div>
<div class="col-md-3">
<a class="seeImage" href="javascript:void(0);" role='button' aria-expanded='false' aria-controls='collapseExample'><span class='glyphicon glyphicon-eye-open fa-lg'></span></a>
</div>
</div>
</li>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<liferay-ui: messagekey="admin.gestion.documents.rubriques.disponibles" />
</div>
<div class="panel-body">
<ul class="list-group listRubrique">
</ul>
</div>
</div>
</div>
</div>

"Lightbox" is the common name for what you've described. Since you mentioned a modal bootstrap, something like http://jbutz.github.io/bootstrap-lightbox/ is likely to be aligned with your goals.

simply clone your "field" div, give it id then append to a bootstrap modal body. Or to avoid appending new clone everytime: use .html() instead.
from https://www.w3schools.com/bootstrap/bootstrap_modal.asp with modification, using bootstrap 3.3.7, jquery 3.3.1
<body>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id='myColumn'>
<img src="https://via.placeholder.com/350x150"/>
<p>Some text in the modal.</p>
</div>
</div>
<script>
$(document).ready(function(){
// var field = $("" + "[data-rubrique-id=" + item.idRub + "]").clone();
var fieldtest= $('#myColumn').clone();
var modal = $("<div id='myModal' class='modal'>\
<div class='modal-dialog'>\
<div class='modal-content'>\
<div id='myBody' class='modal-body'>\
</div>\
</div>\
</div>\
</div>").appendTo('body');
// $('#myBody').html(field);
$('#myBody').html(fieldtest);
});
</script>
</body>
`

jquery add HTML code to the page

I have a this HTML Code in a separate file and I have to add it to a another HTML page.
<!-- TAGLIO DONNA MEDIO -->
<div class="form-inline divNoMargin col-md-12 def_taglioDonnaMedio noPadding ">
<!-- TITLE -->
<label class="col-md-5 noPaddingLeft divNoMargin defTaglioDonnaMedioTitle testoPiccolo">Taglio Donna Medio</label>
<!--OPRZIONI PREZZO -->
<!-- SELECT 1 -->
<div class=" col-md-8 divNoMargin select1">
<label class="testoPiccolo pull-left">prezzo:</label>
<label for="" id="" class="col-md-4 pull-right testoMedio text-right prezzo defPrezzoTagliodonnaMedio">,00</label>
</div>
<!-- SELECT 2 -->
<div class=" col-md-8 noMarginLeft2 hidden select2">
<label class="pull-left testoPiccolo">prezzo a partire da:</label>
<label for="" id="" class="pull-right col-md-4 testoMedio text-right prezzo noMarginLeft2 defPrezzoTagliodonnaMedio">,00</label>
</div>
</div>
I tried using this jquery but doesn't work. Anyone
var parentDiv2 = $(document).find('.nuoviServiziReview1');
$.get( "nuoviServiziReview.html", function( data ) {
var nuovoServizioReview = $('<div/>',{id:'Servizio'+ incremento}).append(parentDiv2);
nuovoServizioReview.html(data);
})

It is because, you are not doing anything to the DOM:
var parentDiv2 = $(document).find('.nuoviServiziReview1');
$.get( "nuoviServiziReview.html", function( data ) {
var nuovoServizioReview = $('<div/>',{id:'Servizio'+ incremento});
nuovoServizioReview.html(data);
nuovoServizioReview.appendTo(parentDiv2);
})

Have you tried load?
http://api.jquery.com/load/
Description: Load data from the server and place the returned HTML into the matched element.
$('.nuoviServiziReview1').load('nuoviServiziReview.html');

append(content) appends content to the inside of every matched element.
appendTo(selector) appends all of the matched elements to another specified set of elements.
Also
A.append(B) appends B to A
A.appendTo(B) appends A to B
So you need to use appendTo() instead of append() as:
var parentDiv2 = $(document).find('.nuoviServiziReview1');
$.get( "nuoviServiziReview.html", function( data ) {
var nuovoServizioReview = $('<div/>',{id:'Servizio'+ incremento});
nuovoServizioReview.html(data);
nuovoServizioReview.appendTo(parentDiv2);
});
This should work :)

Categories

Resources