$.each(v.Modifiers, function (_k, _v) {
$modifierDiv.append(
`<div class="col-xs-12 cart-modifier" style="padding: 0;" data-id="${_v.ModifierOptionID}">
<p class="text-muted" style="padding: 5px; margin: 0; line-height: 14px;">
${_v.ModifierOption.Name + " " + formatCurrency(_v.TotalPrice)}
</p>
</div>`
);
});
$(".cart-items-right").find('ul').append(
`<div class="row">
<li class="col-xs-12 receipt-item" data-order-line-id="${obj.OrderLineID}" data-id="${obj.ID}" data-qty="${obj.Qty}" data-remarks="${obj.Remarks}" data='${JSON.stringify(obj)}'>
<div class="row">
<div class="col-xs-9" style="padding: 0;">
<span class="col-xs-8 text-muted" style="padding:5px 0px;margin:0px;line-height:14px;">
${common.translate("Regular") + " " +formatCurrency(obj.Price)}
</span>
</div>
<div class="col-xs-12 hidden" style="margin: 8px 0;">${$modifierDiv}</div>
</div>
</div>
</li>
</div>`
);
I appended $modifierDiv inside a div that also append to .cart-items-right. But it just returned me [Object Object]. Need help. Thanks
You can create a jQuery object for the <li> then append within that object
Simplified example:
const $div = $('<div>',{text:'My Div'})
const $li = $(`<li><div class="hidden"></div></li>`);
$li.find('.hidden').append($div)
$('ul').append($li)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul></ul>
Related
I'm trying to update item totals when an image card is clicked and update the corresponding totals and prices in an order panel. See screenshot.
I'm currently incrementing the quantity total onclick in the black circle qty-icon div on the image card using the "Update food quantity" function below which increments the number, but how do I pass that incremented value to the "0 Items" field in the add-order-panel panel at the bottom and update the price in "Add to Order"?
Link to GitHub repo
Live GitHub page
// Update food quantity
$(function() {
$('.food-container').click( function() {
var num = $(this).find('.qty-icon');
num.text( parseInt(num.text()) + 1 );
});
});
<!-- Sliders -->
<div class="food-container">
<div class="food-icon">
<div class="qty-icon">0</div>
<img src="images/food/icons/sliders.png" alt="">
</div>
<div class="food-details">
<div class="food-title left">
<h4>Sliders</h4>
</div>
<div class="food-title right">
<h4>$5</h4>
</div>
</div>
</div>
<!-- Add to Order Panel -->
<div class="add-order-panel down">
<!-- Order Buttons -->
<div class="order-buttons">
<a href="#">
<div class="order-but-container one">
<h4><span class="bold-cash">0</span> Items</h4>
</div>
</a>
<a href="#">
<div class="order-but-container two">
<div class="order-label">
<h4>Add to Order</h4>
</div>
<div>
<h4><span class="bold-cash">$0</span></h4>
</div>
</div>
</a>
</div>
</div>
You can use .each loop to iterate through your food-container div then inside this you need to get qty ,price and add them to some variable . Finally ,show these values insid your total & item quantity spans.
Demo code :
$(function() {
$('.food-container .qty-icon').click(function() {
var num = $(this);
num.text(parseInt(num.text()) + 1);
var qty = 0;
var total = 0;
//loop through your food conatiner divs
$(".food-container").each(function() {
//add total qty on evry iteration
qty += parseInt($(this).find(".qty-icon").text())
//get actual qty
var qty_of_item = parseInt($(this).find(".qty-icon").text())
//mutliply it with price add total
total += parseInt($(this).find('.price').text().replace('$', '')) * qty_of_item;
})
$(".order-but-container.one .bold-cash").text(qty); //set new qty
$("#total").text("$" + total) //set total
});
});
.food-container {
width: 105px;
height: 150px;
border: 1px solid blue;
margin-bottom: 5px
}
.food-icon {
text-align: right;
font-size: 20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Order Buttons -->
<div class="order-buttons">
<a href="#">
<div class="order-but-container one">
<h4><span class="bold-cash">0</span> Items</h4>
</div>
</a>
<a href="#">
<div class="order-but-container two">
<div class="order-label">
<h4>Add to Order</h4>
</div>
<div>
<!--added here id-->
<h4><span id="total" class="bold-cash">$0</span></h4>
</div>
</div>
</a>
</div>
<div class="food-container">
<div class="food-icon">
<div class="qty-icon">0</div>
<img src="images/food/icons/sliders.png" alt="">
</div>
<div class="food-details">
<div class="food-title left">
<h4>pizza</h4>
</div>
<div class="food-title right">
<!--added here class-->
<h4 class="price">$10</h4>
</div>
</div>
</div>
<div class="food-container">
<div class="food-icon">
<div class="qty-icon">0</div>
<img src="images/food/icons/sliders.png" alt="">
</div>
<div class="food-details">
<div class="food-title left">
<h4>burger</h4>
</div>
<div class="food-title right">
<h4 class="price">$5</h4>
</div>
</div>
</div>
<div class="food-container">
<div class="food-icon">
<div class="qty-icon">0</div>
<img src="images/food/icons/sliders.png" alt="">
</div>
<div class="food-details">
<div class="food-title left">
<h4>somethings</h4>
</div>
<div class="food-title right">
<h4 class="price">$5</h4>
</div>
</div>
</div>
<div class="add-order-panel down">
You're over thinking it :) You're already storing the element your wanting into a variable called "num". Then you're grabbing the text inside of it. Here's what you do.
redefine num to be the text of the element.
do this for every other element you want to update the text for.
then add all of the values of those inside the function.
save that in a var called total and update that in the area where the total should be
make sure to start total at 0 every time the function runs or you will compound the value
note you'll want to declare all of your variables globally and then update them locally. Don't declare any variables locally or they will come back undefined when you try to update them in other functions
$(function() {
let total = 0
$('.food-container').click( function()
{var num = $(this).find('.qty-icon');
num = num.text( parseInt(num.text()) + 1 );
total = num + otherVar + yetAnotherVar});});
I'm a little overtaxed right now. I want to copy the last div with the class .recipe-options-line and paste it behind the last div with the class .recipe-options-line. That works so far.
I have to make some changes to the element before inserting the div. How can I do that?
i want to delete any entries in the textarea that are present in the copied element.
i want to replace in the copied element the number in the textarea (name="recipeOptions[0][number]") by the content of the variable RecipeOptionNumber.
i want to replace in the copied element the last number of the data-limit-target="unique-10-1" and of the span id="unique-10-1" in the last div with the content of the variable RecipeOptionNumber, too.
Is that possible? Or do I have to look for another solution? Can someone help me?
HTML:
<div class="col-md-12" id="recipe-options-div">
<div class="recipe-options-line">
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
<textarea class="hide" name="recipeOptions[0][number]" rows="1"></textarea>
<i class="fa fa-dot-circle-o"><!-- icon --></i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
<textarea class="hide" name="recipeOptions[0][unit]" rows="1"></textarea>
<i class="fa fa-dot-circle-o"><!-- icon --></i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-6">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
<textarea class="hide" name="recipeOptions[0][name]" rows="1"></textarea>
<textarea data-limit-target="unique-10-1" class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
<i class="fa fa-comment"><!-- icon --></i>
<span id="unique-10-1" class="maximum-limit"></span>
</div>
</div>
</div>
</div>
<div class="text-center mb-15">
<a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption"><i class="glyphicon glyphicon-plus"></i>option</a>
</div>
JS:
var RecipeOptionNumber = 2;
$(document).on("click", "#addRecipeOption", function () {
$(".recipe-options-line:last").clone().insertAfter("div.recipe-options-line:last");
RecipeOptionNumber ++;
});
Is that possible? Or do I have to look for another solution? Can someone help me?
Yes, of course it's possible! A good solution here would be to create a blank template for recipe options and a re-usable function to add them programmatically. See example below with comments:
$(function() {
var recipeOptionsDiv = $("#recipe-options-div");
var RecipeOptionNumber = 0;
// Re-usable function to add recipe options
function addRecipeOption() {
// A blank recipe <div>
var newRecipe = $("#recipe-template-wrapper .recipe-options-line").clone();
// Iterate through each [data-recipe] element and set its [name] attribute accordingly
newRecipe.find("[data-recipe]").each(function() {
var recipeOption = $(this).attr("data-recipe");
$(this).attr("name", "recipeOptions[" + RecipeOptionNumber + "][" + recipeOption + "]");
});
// Set [data-limit-target] to RecipeOptionNumber + 1
newRecipe.find("[data-limit-target]").attr("data-limit-target", "unique-10-" + (RecipeOptionNumber + 1));
// Insert the new HTML
recipeOptionsDiv.append(newRecipe);
// Increment recipe counter
RecipeOptionNumber++;
}
// Add click event listener for Add Option button
$("#addRecipeOption").click(addRecipeOption);
// Add the first recipe option on page load
addRecipeOption();
});
#addRecipeOption {
background-color: tomato;
cursor: pointer;
display: table;
margin-bottom: 5px;
margin-top: 10px;
min-width: 100px;
padding: 10px;
text-align: center;
}
#recipe-template-wrapper {
display: none;
}
.recipe-options-line {
border-bottom: 1px solid;
margin-bottom: 15px;
padding-bottom: 10px;
}
<!-- Add option button -->
<div class="text-center mb-15">
<a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption">
<i class="glyphicon glyphicon-plus"></i>option
</a>
</div>
<!-- Recipe option divs will be appended here -->
<div class="col-md-12" id="recipe-options-div"></div>
<!--
Hidden recipe option template HTML
Elements' custom data-* attributes will be used to set their name attributes
-->
<div id="recipe-template-wrapper">
<div class="recipe-options-line">
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
<textarea class="hide" data-recipe="number" rows="1"></textarea>
<i class="fa fa-dot-circle-o">
<!-- icon -->
</i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
<textarea class="hide" data-recipe="unit" rows="1"></textarea>
<i class="fa fa-dot-circle-o">
<!-- icon -->
</i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-6">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
<textarea class="hide" data-recipe="name" rows="1"></textarea>
<textarea data-limit-target class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
<i class="fa fa-comment">
<!-- icon -->
</i>
<span id="unique-10-1" class="maximum-limit"></span>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Well your are missunderstanding th concept och memory.
When you clon the items. make change to it before insertit
Example.
$("button").click(function(){
var inputCloned = $("input").last().clone();
// make changes
inputCloned.val("input nr " + $("input").length)
// add the cloned input to the body
$("body").append(inputCloned)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Clone last item</button>
<input type="text" />
Does anyone know why my if statement doesn't do anything when running at the end of my program? I'm wanting to replace null returns with no office and I can't seem to run it afterwards.
for (z = 0; z < items.length; z++) {
var team = '<div class="row"><div class="col-sm-8"><p style="margin-bottom: 0px;">' + items[z].TeamName + '</p></div><div class="col-sm-4 office"><p style="margin-bottom: 0px;">' + items[z].Office + '</p></div></div>';
var single = '<div class="row"><div class="col-sm-8"><p style="margin-bottom: 0px;">' + items[z].Title + '</p></div><div class="col-sm-4"><p class="office" style="margin-bottom: 0px;">' + items[z].Office +
'</p></div></div>';
if (items[z].Office == 'null') {
$(".office").append('No office');
}
}
<div class="row" style="padding-bottom: 10px;">
<div class="col-md-6">
<div>
<div class="row title">
<div class="col-md-8">
<span>Single Users</span>
</div>
<div class="col-md-4" style="padding-left: 4px;">
<span>Office</span>
</div>
</div>
<div class="col-md-12 teamsSingles" style="padding-left:0px; border-right: solid 1px #DCE1E5;">
</div>
</div>
</div>
<div class="col-md-6">
<div>
<div class="row title">
<div class="col-md-8">
<span>Teams</span>
</div>
<div class="col-md-4" style="padding-left: 4px;">
<span>Office</span>
</div>
</div>
<div class="col-md-12 teamsTeams" style="padding-left:0px;">
</div>
</div>
</div>
</div>
Remove the quotes from around null (and add another = to check for type, so === instead of ==)
var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q=funny&searchType=image&safe=high";
$(function () {
var jqxhr = $.getJSON(url, function () {
console.log("success");
}).done(function (data) {
for (var i = 0; i < 4; i++) {
var item = data.items[i];
document.getElementById("content11").innerHTML += "<br><div class='c'>"
+ "<div class='b'><img src="+ item.link +" height=200px width=200px /></div><div class='a mn-video-title'> "
+ item.title+"</div></div>";
}
}).fail(function (data) {
console.log("error");
});
});
button#findNow {
height: 40px;
width: 154px;
margin: 20px;
border-radius: 5px;
}
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml">
<?php include 'header.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="lan_flanger">
<div id="lan_musictted">
<div id="rt-showcase">
<div class="clear"></div>
<div id="rt-maintop">
<div class="rt-container">
<div class="rt-grid-10 rt-alpha">
<div class="rt-block lan_album">
<div class="module-surround">
<div class="module-title mn-vidio">
<h2 class="title">TOP IMAGES</h2>
<form id="search-form" name="search-form">
<div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div>
<div class="col-md-2 md">
<span class="input-group-btn">
<button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
Search <i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</form>
</div>
<div class="module-content">
<div class="content">
<div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<?php include 'footer.php'; ?>
<div class="gf-menu-toggle" style="display: none;"></div>
<div class="gf-menu-device-wrapper-sidemenu">
<div class="gf-menu-device-container responsive-type-panel">
<div class="gf-menu-device-container-wrapper"></div>
</div>
</div>
</body>
</html>
Hello Friends, I am new in google custom search API and jquery.
This code is perfect on page load but i want to load images on button click.
How to load images on button click i tried other peoples code but it can't do what i want.
I want to get the URL of images from custom search and display that images in html.
so, please help me
Add the json calling function inside the button click.And passing the input string to the URL
$('#findNow').on('click',function(){
document.getElementById("content11").innerHTML ="";
var a =$('#search1').val();
var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q="+a+"&searchType=image&safe=high";
var jqxhr = $.getJSON(url, function() {
console.log("success");
}).done(function(data) {
for (var i = 0; i < 4; i++) {
var item = data.items[i];
document.getElementById("content11").innerHTML += "<br><div class='c'>" + "<div class='b'><img src=" + item.link + " height=200px width=200px /></div><div class='a mn-video-title'> " + item.title + "</div></div>";
}
}).fail(function(data) {
console.log("error");
});
})
button#findNow {
height: 40px;
width: 154px;
margin: 20px;
border-radius: 5px;
}
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml">
<?php include 'header.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="lan_flanger">
<div id="lan_musictted">
<div id="rt-showcase">
<div class="clear"></div>
<div id="rt-maintop">
<div class="rt-container">
<div class="rt-grid-10 rt-alpha">
<div class="rt-block lan_album">
<div class="module-surround">
<div class="module-title mn-vidio">
<h2 class="title">TOP IMAGES</h2>
<form id="search-form" name="search-form">
<div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div>
<div class="col-md-2 md">
<span class="input-group-btn">
<button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
Search <i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</form>
</div>
<div class="module-content">
<div class="content">
<div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<?php include 'footer.php'; ?>
<div class="gf-menu-toggle" style="display: none;"></div>
<div class="gf-menu-device-wrapper-sidemenu">
<div class="gf-menu-device-container responsive-type-panel">
<div class="gf-menu-device-container-wrapper"></div>
</div>
</div>
</body>
</html>
I am trying to do a feed in HTML like facebook or twitter that contains the content of database.
I am using an generic div and using javascript to clone that generic div but I cant edit the content of each element after cloning it.
Is that the best way to do a feed in HTML?
JavaScript
for(i=0 ; i < 5 ; i++){0
var item = $("#template2 div.item").clone();
item.getElementById("title").text("aaaa"); //4 testing
$("#main1").append(item);
}
HTML
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12"><hr></div>
</div>
</div>
</div>
clone() returns object that you can manipulate using jQuery.
$('#addFeed').click(function() {
addFeed();
})
function addFeed() {
var item = $("#template2 div.item").clone();
$(item).find("h3").html("New Feed");
$("#main1").append(item);
}
.feed {
border: 1px solid black;
width: 150px;
}
.item {
background-color: lightgreen;
}
.item:nth-child(odd) {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12">
<hr>
</div>
</div>
</div>
</div>
<div id="main1" class="feed">
</div>
<button id="addFeed">Add Feed</button>