I'm having a hard time doing something that seems really simple.
I have a javascript object:
var main = {
pages : {
"123" : {
"content": "<div><p>The div</p></div><nav><p>The nav</p></nav>",
"foo":"bar"
},
"456" : {
"content": "<div><p>The div</p></div><nav><p>The nav</p></nav>",
"foo":"bar"
}
}
};
I'm trying the following code:
$(function(){
var p = main.pages;
$.each(p,function(i,el){
var c = p[i].content;
var newc = $(c).find('nav').html('<p>New content</p>');
//console.log(c);
//console.log(newc);
});
//console.log(p)
});
To make my object look like:
var main = {
pages : {
"123" : {
"content": "<div><p>The div</p></div><nav><p>New content</p></nav>",
"foo":"bar"
},
"456" : {
"content": "<div><p>The div</p></div><nav><p>New content</p></nav>",
"foo":"bar"
}
}
};
But I'm having a hard time doing it. What am I missing?
I have set up the former example in jsfiddle
I do understand that it's generally not a good idea trying to manipulate strings as dom elements but I have no other choice since the object comes from a RESTful server and it doesn't make much sense to inject the html in the current page for that.
You can actually build the HTML in jQuery without appending it into the DOM.
$(function () {
var p = main.pages;
//a temporary div
var div = $('<div>');
$.each(p, function (i, el) {
//append to div, find and replace the HTML
div.append(p[i].content).find('nav').html('<p>New content</p>');
//turn back into a string and store
p[i].content = div.html();
//empty the div for the next operation
div.empty();
});
console.log(p);
});
Because $(p[i].content) is not one element but two, so based on your code:
var tmp = $(p[i].content);
tmp.eq(1).html('<p>new content');
console.log(tmp.html());
Related
I have the following array and I'm trying to loop through it to create a div, within that div will be the image and a button that toggles the ingredients showing.
var cocktailsArray = [
{image: "mojito.jpeg", ingredients:["lime", "rum", "sugar"]},
{image: "pinacolada.jpeg", ingredients:["coconut liquer", "rum", "pineapple juice"]},
{image: "tomcollins.jpeg", ingredients:["lemon", "gin", "sugar"]}
]
These are my functions:
var createObject = function(){
$("div/div").addClass("cocktail").appendTo("main")
}
var createImage = function(image){
var img = $("<img>").addClass("cocktail-image").appendTo(".cocktail");
img.attr('src', image)
}
var createIngredients = function(ingredients){
$("<button/>").text("Ingredients").addClass("ingredients-button").appendTo(".cocktail")
$("div/div").addClass("ingredients").appendTo(".cocktail")
$.each(ingredients, function(key, ingredient){
var li = $("<li/>").text(ingredient).appendTo(".ingredients")
})
}
var addCocktail = function(picture, ingredients){
createObject();
createImage(picture);
createIngredients(ingredients);
}
and its called like this:
$(document).ready(function(){
$.each(cocktailsArray, function(key, cocktail){
addCocktail(cocktail.image, cocktail.ingredients)
})
});
The output i'm getting is:
mojito pinacollada tomcollins
pinacollada tomcollins
tomcollins
Can anyone explain why the second two lines are populating? Why does it not just stop making objects once its looped through once?
Well that is because you are appending content to all elements with class cocktail(using .appendTo()). you should be only appending to last element in matched set.
You can use :last selector in this case:
var img = $("<img>").addClass("cocktail-image").appendTo(".cocktail:last");
Firstly note that "div/div" is not a valid selector. If you want to create a div you can use $('<div /').
The issue is because you're appending to the new elements by classname within each iteration of the loop. This means that on successive iterations you fill the new elements, but also those .cocktail and .ingredient elements which were created previously.
To fix this you need to keep a reference to the created .cocktail and .ingredients within the loop, and then only append to them directly, something like this:
var cocktailsArray = [{
image: "mojito.jpeg",
ingredients: ["lime", "rum", "sugar"]
}, {
image: "pinacolada.jpeg",
ingredients: ["coconut liquer", "rum", "pineapple juice"]
}, {
image: "tomcollins.jpeg",
ingredients: ["lemon", "gin", "sugar"]
}]
var createObject = function() {
return $("<div />").addClass("cocktail").appendTo("main")
}
var createImage = function($obj, image) {
var img = $("<img>").addClass("cocktail-image").appendTo($obj);
img.attr('src', image)
}
var createIngredients = function($obj, ingredients) {
$("<button/>").text("Ingredients").addClass("ingredients-button").appendTo($obj)
var $ings = $("<div />").addClass("ingredients").appendTo($obj)
$.each(ingredients, function(key, ingredient) {
var li = $("<li/>").text(ingredient).appendTo($ings)
})
}
var addCocktail = function(picture, ingredients) {
var $obj = createObject();
createImage($obj, picture);
createIngredients($obj, ingredients);
}
$(document).ready(function() {
$.each(cocktailsArray, function(key, cocktail) {
addCocktail(cocktail.image, cocktail.ingredients)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<main></main>
Note how createObject() now returns the new div element, and that reference is used in the createImage() and createIngredients() functions. The same technique is used to store a reference to the .ingredients div, although that's kept local within createIngredients().
I have spent hours trying to figure out why the $('#news-main-container').html(itemlist); isn't working and found that when I use alert($('[id="news-main-container"]').length); it returns 0, implicating the element doesnt exist but I can see the element in the code when I inspect element. The itemlist is alerting but it won't insert into #news-main-container because it thinks it doesn't exist. Does anyone know what could cause this?
//get cached News JSON
function getNewsCache(){
cache['news'] = JSON.parse(localStorage.getItem('news'));
var objCache = cache['news'].data;
objCache = JSON.parse(objCache); //Parse string to json
buildNewsList(objCache);
}
//build HTML list of news items
function buildNewsList(objCache){
var itemlist='';
$.each(objCache, function(i, jd) {
var newstitle = jd.title.rendered;
var newsexcerpt = jd.excerpt.rendered;
var newscontent = jd.content.rendered;
var newsimageid = jd.featured_media;
var thumbsrc = '';
itemlist = itemlist+'<div class="content-news-box" id="newsclick" data-newscontent="'+newscontent+'" data-newstitle="'+newstitle+'"><div class="news-thumb-img"><img height="150px" src="'+thumbsrc+'"/></div><div class="news-title">'+newstitle+'</div><div class="news-excerpt">'+newsexcerpt+'<img height="40px" class="news-arrow-right" src="img/icon-arrow-right.png"/></div></div>';
});
alert(itemlist);
alert($('[id="news-main-container"]').length); //returns 0 but I can see it in the code!!
$('#news-main-container').html(itemlist); //WHY DOESNT THIS WORK?!?!?!
}
$("#load-news").click(function(event){
$('#stage').html('');
$('#stage').css('background','none');
$("#stage").load("news.html");
var data = {};
//get cache
cache['news'] = JSON.parse(localStorage.getItem('news'));
getNewsCache();
});
I re-arranged my code so that everything comes within $( "#stage" ).load( "news.html", function() { } and that works. Thanks #The_ehT, your suggestion got me there!
Most likely you run this code before DOM is rendered, so element doesn't exist at the runtime. Try enclosing your code in "document ready"
$(function(){
// Your code
});
This is the script present in the html web-page.
jQuery(function($) {
new Shopify.OptionSelectors('productSelect', {
product: {
"id":626976579,
"title":"changedMacbook Air",
"handle":"macbook-air",
"description":"\u003cp\u003elightweight \u003c\/p\u003e\n\u003cp\u003eawesome performance\u003c\/p\u003e\n\u003cp\u003ewow display\u003c\/p\u003e\nHello World626976579[\"78000.00\"] [\"78000.00\"]\\n[\"78000.00\"] [\"78000.00\"]\u003cbr\u003e[\"78000.00\"]\u003cbr\u003e626976579\u003cbr\u003e626976579\u003cbr\u003e626976579",
"published_at":"2015-05-25T02:39:00-04:00",
"created_at":"2015-05-25T02:40:44-04:00",
"vendor":"Test_Store",
"type":"Computers",
"tags":[],
"price":7800000,
"price_min":7800000,
"price_max":7800000,
"available":true,
"price_varies":false,
"compare_at_price":null,
"compare_at_price_min":0,
"compare_at_price_max":0,
"compare_at_price_varies":false,
"variants":[{"id":1754837635,"title":"Default Title","options":["Default Title"],"option1":"Default Title","option2":null,"option3":null,"price":7800000,"weight":800,"compare_at_price":null,"inventory_quantity":-29,"inventory_management":null,"inventory_policy":"deny","available":true,"sku":"20","requires_shipping":true,"taxable":true,"barcode":"","featured_image":null}],"images":["\/\/cdn.shopify.com\/s\/files\/1\/0876\/1234\/products\/overview_wireless_hero_enhanced.png?v=1432536113"],"featured_image":"\/\/cdn.shopify.com\/s\/files\/1\/0876\/1234\/products\/overview_wireless_hero_enhanced.png?v=1432536113","options":["Title"],"content":"\u003cp\u003elightweight \u003c\/p\u003e\n\u003cp\u003eawesome performance\u003c\/p\u003e\n\u003cp\u003ewow display\u003c\/p\u003e\nHello World626976579[\"78000.00\"] [\"78000.00\"]\\n[\"78000.00\"] [\"78000.00\"]\u003cbr\u003e[\"78000.00\"]\u003cbr\u003e626976579\u003cbr\u003e626976579\u003cbr\u003e626976579"},
onVariantSelected: selectCallback,
enableHistoryState: true
});
How the value of "title" field be accessed, which here it is "changedMacbook Air" via my own JavaScript?
Thanks in advance.
I don't know if it will work but try
var myProduct = new Shopify.OptionSelectors('productSelect', {
....
})
then try
console.log(myProduct)
or you can try this:
$(document).ready(function(e){
console.log(document.title);
})
I think you might have to pass it through the callback.
$('#productSelect').on('change', function(e) {
var t = e.target || e.srcElement,
title = t.title.value;
selectCallback(title);
break;
}
}
});
//If you want to trigger it right away for some reason, just use this...
$("#productSelect").change();
Look for the code for option_selection.js in your products template or somewhere in your Snippets, Assets, or Templates. See this fiddle for an example of what the code looks like. option_selection.js
You might also want to check this link, it's setting up an onchange event on the product variants. I'm not sure what your ultimate goal is but I see you are working with product options and variants so it might be helpful.
You can modify option_selection.js if you need to, but more than likely you will just need some jquery in the document.ready.
Here is an example from option_selection.js that builds the names of each selector. Though you probably don't need to modify this, see link above.
Shopify.OptionSelectors.prototype.buildSelectors = function() {
for (var t = 0; t < this.product.optionNames().length; t++) {
var e = new Shopify.SingleOptionSelector(this, t, this.product.optionNames()[t], this.product.optionValues(t));
e.element.disabled = !1, this.selectors.push(e)
}
var o = this.selectorDivClass,
i = this.product.optionNames(),
r = Shopify.map(this.selectors, function(t) {
var e = document.createElement("div");
if (e.setAttribute("class", o), i.length > 1) {
var r = document.createElement("label");
r.htmlFor = t.element.id, r.innerHTML = t.name, e.appendChild(r)
}
return e.appendChild(t.element), e
});
return r
},
Trying to add a save/load feature using JSON to a diagram that uses jsPlumb. The save feature works like a charm however the load feature is not able to replicate full initial saved state. That is, the problem occurs when jQuery is trying to append to a freshly/dynamically created div.
The jsfiddle has the following functionality:
I can add projects which are div containers. Inside these I can add tasks by clicking on the green projects.
http://jsfiddle.net/9yej6/1/
My saving code plugins everything into an array which then becomes a string (using JSON).
$('#saveall').click(function(e) {
// Saving all of the projects' parameters
var projects = []
$(".project").each(function (idx, elem) {
var $elem = $(elem);
projects.push({
blockId: $elem.attr('id'),
positionX: parseInt($elem.css("left"), 10),
positionY: parseInt($elem.css("top"), 10)
});
});
// Saving all of the tasks' parameters
var tasks = []
$(".task").each(function (idx, elem) {
var $elem = $(elem);
tasks.push({
blockId: $elem.attr('id'),
parentId: $elem.parent().attr('id')
});
});
// Convert into string and copy to textarea
var flowChart = {};
flowChart.projects = projects;
flowChart.tasks = tasks;
var flowChartJson = JSON.stringify(flowChart);
$('#jsonOutput').val(flowChartJson);
});
The load code does the same in reverse.
$('#loadall').click(function(e) {
// Delete everything from the container
$('#container').text("");
// Convert textarea string into JSON object
var flowChartJson = $('#jsonOutput').val();
var flowChart = JSON.parse(flowChartJson);
// Load all projects
var projects = flowChart.projects;
$.each(projects, function( index, elem ) {
addProject(elem.blockId);
repositionElement(elem.blockId, elem.positionX, elem.positionY)
});
// Try to load all tasks
var tasks = flowChart.tasks;
$.each(tasks, function( index, elem ) {
//Problem occurs here, I am unable to reference the created project
$(elem.parentId).text('This is a test');
addTask(elem.parentId, 0);
});
});
Basically, what's not working is the $(parentId).append(newState); line 75 in the jsFiddle, I can't seem to reference that div because it was just created using jquery ?
edit:
More specifically, I make use of these functions to create actual project and task divs
function addProject(id) {
var newProject = $('<div>').attr('id', id).addClass('project').text(id);
$('#container').append(newProject);
jsPlumb.draggable(newProject, {
containment: 'parent' });
}
function addTask(parentId, index) {
var newState = $('<div>').attr('id', 'state' + index).addClass('task').text('task ' + index);
$(parentId).append(newState);
}
It should be:
$('#' + parentId).append(newState);
To search for an ID in a jQuery selector, you need the # prefix.
What I'm trying to do is create a dynamic wall of images.
What I'm doing is this:
Call an API to get some response. Create an array of objects based on response
Based on the array, make HTML elements for each object where there's an img in it too.
When all of these HTML elements are created, attach it to the DOM, and call a final function.
This is what I have so far (truncated to get the point across):
EDIT: code has changed a bit. scroll to bottom of question for link to current code.
// based on one post, construct the html and return it
function getOneHtml(post, w) {
console.log("getting one html");
var outerDiv = $("<div>", {class: "brick"});
outerDiv.width(w);
var img = $("<img />");
img.attr("src", post.img_src);
img.on('load', function() {
console.log("img loaded");
var ratio = this.width / w;
h = this.height / ratio;
$(this).css({'height': h});
// ...
// ...
// create the element
// an alternative I'm using for now is directly append
// the created HTML onto the page, but that results
// in a kinda messy interface.
return outerDiv[0].outerHTML;
});
}
// queries an api and then calls callback after everything is done
function requestData(subreddit, callback) {
// array of objects with link to image, post title, link to reddit
posts = [];
var w = $(window).innerWidth() / 3,
html = ''; // holds all of the inner HTML for all elements
$.get("url here", function(data) {
var arr = data.data.children;
arr.forEach(function(res_post) {
console.log("looping in requestData");
// prepare a post object
// ...
// ...
html += getOneHtml(post, w); // get the HTML for this post
});
// this should happen after everything else is done
console.log("calling callback");
callback(html);
});
}
// complete the DOM
function makeWall(html) {
console.log("making wall");
// do stuff
}
Now the trace of the program in console is this:
looping in requestData
getting one html
looping in requestData
getting one html
... // bunch of times
calling callback
making wall
(20) img loaded
So now the problem is that the HTML isn't prepared until each image is loaded, and so it doesn't actually get attached to the DOM.
How can I make sure that things happen in order in which I want them to? I tried refactoring code into more of an async style but that didn't work (not my strongest point).
I also tried looking at $.Deferred but I don't understand it, and how to integrate it into my code.
Any help is appreciated.
EDIT:
I think it might help to see what I'm doing: http://karan.github.io/griddit/
When you load, I want the images to load first, and then fade in. Currently, they show up, then hide and then fade in. Here's the source: https://github.com/karan/griddit/blob/gh-pages/js/main.js.
Also, if you scroll down one or two pages, then scroll back up, some images show up behind others.
You can use .done(), as explained in the jQuery API documentation on .done() specifically explains how to use .done() with $.get().
It's as simple as:
$.get( "test.php" ).done(function() {
alert( "$.get succeeded" );
});
Concretely...
As the API documentation link provided above indicates, you can daisy chain .done() calls together.
$.get(url,handler).done(function(){console.log('calling callback')},callback);
Note, Not certain about functionality of included plugins, i.e.g., #grid layout,
css, etc. image width, height and #grid layout not addressed, save for existing pieces re-composed in attempt at flow clarity.
Piece below solely to fulfill // Do something when all dynamically created images have loaded requirement. See console at jsfiddle
Note also, piece at jsfiddle format issue. In order to test piece, drew in 2 plugins from links at original post. Tried jsfiddle's TidyUp feature, which inserted linebreaks.
Piece may need some re-formatting; though current jsfiddle does provide callback functionality, as per original post. Again, see console. Thanks for sharing.
updated
$(function() {
// the name of the last added post
var last_added = '';
// to control the flow of loading during scroll var scrollLoad = true;
var q = 'cats';
var callbacks = $.Callbacks();
// callback,
// Do something when all dynamically created images have loaded
var callback = function (cb) {
return console.log( cb||$.now() )
};
callbacks.add(callback);
function getOneHtml(post, w, count){
var img = $("<img>", {
"src" : post.img_src,
"width" : w
});
img.on('load', function(e) {
var ratio = e.target.width / w;
h = e.target.height / ratio;
$(e.target).css('height',h)
});
var link = $("<a>", {
"href" : post.permalink,
"target" : "_blank",
"html" : img
});
var outerDiv = $("<div>", {
"class" : "brick",
"style" : "width:" + w
});
$.when($(outerDiv).appendTo("#grid"),
$(link),
count)
.then(function(div, _link, _count) {
// `image` `fadeIn`; adjustable
$(_link).appendTo($(div)).hide(0).fadeIn(2000);
return _count
})
.always(function(_count){
callbacks.fireWith(window, [_count + " images appended to grid at " + $.now()])
});
};
function requestData(subreddit,callback) {
//array of objects with link to image, post title,link to reddit
posts=[];
var w = $(window).innerWidth() / 3;
html = '';
$.ajax({
type : 'get',
url : "http://api.reddit.com/r/" + subreddit + "/hot.json?&after=" + last_added,
beforeSend : function () {
$("#searchterm").addClass("loadinggif");
},
complete : function () {
$("#searchterm").removeClass("loadinggif");
},
success : function (data) {
var arr = data.data.children;
var count = null;
arr.forEach(function(res_post) {
if(!res_post.data.is_self&&(/\.(gif|jpg|jpeg|tiff|png)$/i).test(res_post.data.url)) {
// `images` count
++count;
var post = {
'title' : res_post.data.title,
'img_src': res_post.data.url,
'name' : res_post.data.name,
'permalink': 'http://reddit.com' + res_post.data.permalink
};
getOneHtml(post, w, count);
}
last_added = res_post.data.name;
});
scrollLoad = true;
// callback,
// Do something when all dynamically created images have loaded
// see `console`; adjustable
callbacks.fireWith( window, [$(".brick img").size() + " appended to grid, callback at " + $.now()]);
}});
}
// function makeWall() {}
})
jsfiddle http://jsfiddle.net/guest271314/ggsY9/