cannot display comment list using jquery - javascript

Just want to display comment list in the following way but something is wrong with my code and I cannot get expected result. Could you please check it and help me to find the mistake.
I get following result:
var item = $('<div>');
$.each(data.results, function(i, res) {
var photo = $('<div>'),
block1 = $('<div style="float: left;">'),
block2 = $('<div>'),
title = $('<h4>'),
info = $('<p>');
photo.html('<img src="xyz">');
title.html('<hr/>'+res.name+','+res.country);
info.html(res.comment_text);
block1.append(photo);
block2.append(title, info);
item.append(block1, block2);
});
$("#comments").html(item);

This seems to be a clearing issue. You need to clear the parent divs. You can easily do so by adding a clear class to those items and applying the following CSS:
.clear:after {
content: "";
display: table;
clear: both;
}
Here is a test case.
It would have been better if you supplied the output HTML and preferably a fiddle to play with. Now you forced us to figure it out all by ourselves. Make your questions as clear and to the point as possible, so people will answer to you more quickly and thoroughly.

First off your selectors are bad, you have 3 vars that are calling the same thing. Use this as a guideline for your selectors. jQuery Selectors Also it will be helpful to know what is failing exactly, maybe paste some HTML so we can better help you.
Edit: Try removing the block1 and block2 vars and see how it looks. With those selectors they are appending the photo and title info to the very first div. Try using the selector $(this) instead of block1 and block2.
Edit2: Ok so what is going on is your item.append(block1, block2); part is adding the blocks you create to the first div.
EDIT3: You need to create a new div and add the new blocks to create the new "item" Something along the lines of item.append("< /div>< div>"+ photo + title + info+'< /div>')
Edit 4: Without knowing your html I can't really write any code for your situation I can only assume and guess.

You should use stylesheets over inline styles, but essentially you just need to clear the float you're creating.
Change:
var item = $('<div>');
to:
var item = $('<div style="clear:left">'),

where are you closing your elements? try with this code:
var item = $('<div/>');
$.each(data.results, function(i, res) {
var photo = $('<div/>'),
block1 = $('<div style="float: left;"></div>'),
block2 = $('<div/>'),
title = $('<h4/>'),
info = $('<p/>');
photo.html('<img src="xyz"/>');
title.html('<hr/>'+res.name+','+res.country);
info.html(res.comment_text);
block1.append(photo);
block2.append(title, info);
item.append(block1, block2);
});
$("#comments").html(item);

Related

jquery detach() inside custom click event

I have a fairly complex situation (to me at least):
I have a click function that was used to show an overlay. Inside the click function, the element in question is determined dynamically:
$('a.overlay-show').click(function() {
var id = $(this).attr('id');
var el_id = '#project-details-overlay-' + id;
Now what I'd like to do is something like:
$(el_id).detach();
But I am seeing that this doesn't work because I am passing in an element not a selector. So how would one do this?
What I need to do is grab that element and re-attach it somewhere else. I have tried to just deal with the element's contents using .html() and so forth but because the content, at times contains javascript elements such as slideshows, this doesn't seem to work out too well...
Any suggestions?
should work this way:
$('a.overlay-show').click(function() {
var id = $(this).attr('id');
var el_id = $('#project-details-overlay-' + id);
el_id.detach();
});
i'm not familiar with detach.. if you're trying to move it somewhere else:
<div id="somewhereElse"></div>
then you would write:
el_id.appendTo('#somewhereElse');
if you want to keep it where it is AND copy it somewhere else:
el_id.clone().appendTo('#somewhereElse');
lastly, if you're not using el_id anywhere else beyond this one line of code, you don't even need the extra variable... just condense the var statement and the append statement into one:
$('#project-details-overlay-' + id).appendTo('#somewhereElse');
Thanks #erikruina - appendTo() works much better. I ended up fixing it with
$('a.overlay-show').click(function() {
var id = $(this).attr('id');
var el_id = $('#project-details-overlay-' + id);
$(el_id).appendTo('#selected-project');
});
I suspect that the issue is that with detach(); you also need to deal with all the child elements, whereas appendTo() just works.

how to check if a div has a class out of multiple classes in jquery

I have a dynamic div which can generate over 1000 different classes... its a wordpress theme.
Now i am wanting to check if a div has one of 52 classes.
.bg1, .bg2, .bg3 etc etc...
I know that you can use hasClass();
But how do I check for each one and then get the value. For instance here is the div as it stands
<div id="wordpresspost" class="bodyclass post-id-193 wordpresswrap bg1"></div>
Please bare in mind I dont really know jquery :D
I was thinking it would be something like this but logically this does not make sense to me :(
var divclass = $("#wordpresspost").hasClass('bg1, bg2, bg3, bg4, bg5, bg6');
if(divclass == true){
var divsclass = $(this);
}
I need to know the class because I want to change it, for instance i would like to .removeClass and then addClass a new class without changing the others as they are dynamic
Thanks in advance for the advice :)
Use .is():
var divclass = $("#wordpresspost").is('.bg1, .bg2, .bg3, .bg4, .bg5, .bg6');
You can use starts with selector.
Caveat with this is that if you have another class starts with bg[something] it would be impacted
if($("#wordpresspost[class^=bg]").length > 0)
{
....
}
In order to remove it probably regex might help.
$("#wordpresspost[class^=bg]").each(function(){
this.className = this.className.replace(/\bbg.*?\b/g, 'newclass');
});
var el = document.getElementById('wordpresspost');
var regxpr = /\b(bg(?:[1-9]|[1-4]\d|5[0-2]))\b/g, match;
while(match = regxpr.exec(el.className)){
// match[1] contains the current matching class
console.log(match[1]);
// Then you can do:
$(el).removeClass(match[1]).addClass(replacementForMatch);
}
JSFiddle
If you are searching for bg* in only one element, you could just use simple regex.
var hasBg = /bg[\d]+/.test(document.getElementById("mydiv").className);

Add a div arround a while loop

I have this script.
var $bigList = $('.list-products'), group;
while((group = $bigList.find('li:gt(3):lt(4)').remove()).length) {
$('<ul class="list-products"/>').append(group).appendTo('.box-products');
}
But i want a div around every .
$('<div class="container"><ul class="list-products"/>').append(group).appendTo('.box-products');
But that is not working. What do i wrong?
It looks like you are creating a div, but not actually adding the <ul> tag as a child, try something like:
$('<div class="container"></div>').append($('<ul class="list-products"/>').append(group)).appendTo('.box-products');
or if that still doesn't solve your problem, you may want to split the statement.
var $div = $("<div></div>");
$div.append($('<ul class="list-products"/>').append(group)).appendTo('.box-products');
I don't have time to make a fiddle, but I can if neither of these solutions work.

jQuery Clone inputs in two forms on the same page?

I have been trying to get two forms on the same page to work and the only issue i'm having is not getting the clone inputs to work, they seem to conflict with each other due to the div elements.
I have been using this tutorial as a guide:
http://www.9lessons.info/2009/06/submit-multiple-forms-jquery-ajax.html
Here is the code working with one form:
http://jsfiddle.net/yBdTA/
And this is what i want to achieve:
http://jsfiddle.net/c4Uce/
Notice when you click on the second 'Add More' link the first input clones rather than the second.
I know i could duplicate the jQuery function for the clone to match the second form:
$(function(){
var removeLink = ' <a class="remove" href="#" onclick="jQuery(this).parent().slideUp(function(){ jQuery(this).remove() }); return false">remove</a>';
jQuery('a.add').relCopy({ append: removeLink});
});
but i want this to be, how can i call it, dynamic? like the 9lessons guide, i can use PHP to create unique identifiers for the clone elements and want the jQuery to match the ID's,
Hope i made this clear.
Help appreciated.
U can try it , it work to multi form
http://jsfiddle.net/yBdTA/2/
(function($) {
function remove(){
$('.clone').each(function(i){
var input= $(this);
input.find('a.remove').click(function(){
input.remove();
});
});
}
$('form').each(function(i){
var form = $(this);
var removeLink = '<a class="remove" href="#">remove</a>';
var iputclone = form.find('p.clone').append(removeLink);
form.find('a.add').click(function(){
iputclone.clone().insertBefore(this);
remove();
});
});
})(jQuery);
Update :
iputclone.clone().insertBefore(this).find('.input').attr('value','');
//So easy, U can think a object when we start will is ifself, use it next, and next

How to swap two div tags?

I want to swap two html div tags entirely, tags and all. I tried the code below code but it does not work.
jQuery('#AllBlock-'+Id).insertAfter('#AllBlock-'+Id.next().next());
How to swap two div tags entirely.
You have some bracket mismatching in your code, it looks like you might be trying to do this:
jQuery('#AllBlock-'+Id).insertAfter($('#AllBlock-'+Id').next().next());
Which would take something like:
<div id="AllBlock-5"></div>
<div id="AllBlock-6"></div>
<div id="AllBlock-7"></div>
And, if called with Id 5, turn it into this:
<div id="AllBlock-6"></div>
<div id="AllBlock-7"></div>
<div id="AllBlock-5"></div>
This is because you're taking block 5, and moving it (using insertAfter) to the place after the block that's next().next() (or next-but-one) from itself, which would be block 7.
If you want to always swap #AllBlock-Id with #AllBlock-[Id+2], so they switch places and end up like the following:
<div id="AllBlock-7"></div>
<div id="AllBlock-6"></div>
<div id="AllBlock-5"></div>
You might want to try:
var $block = jQuery('#AllBlock-'+Id);
var $pivot = $block.next();
var $blockToSwap = $pivot.next();
$blockToSwap.insertBefore($pivot);
$block.insertAfter($pivot);
You can't do this because you can't concatenate a string and a jQuery object.
Try this:
var div = $('#AllBlock-'+Id);
div.insertAfter(div.next().next());
it should be like this
you should close the bracket after Id,
jQuery('#AllBlock-'+Id).insertAfter('#AllBlock-'+Id).next().next());
You'll need to detach the existing dom object first, then re-use it later:
$('#divid').detach().insertAfter('#someotherdivid');
What I understand is you want to swap a div when clicked with the last div. What will you do if it is the last div? move it to the top?
This solution should solve the problem, furthermore, you can modify this regex to match the format of your ID. This can probably be made more concise and robust. For example, you could get the last ID a bit more sophisticatedly. This may just be modifying the selector or something more. I mean, you do not want to go rearranging the footer or something just because its the last div on the page.
$('div').click(function() {
//set regex
var re = /(^\w+-)(\d+)$/i;
//get attr broken into parts
var str = $(this).attr('id').match(re)[1],
id = $(this).attr('id').match(re)[2];
//get div count and bulid last id
var lastStr = $('div:last').attr('id').match(re)[1],
lastID = $('div:last').attr('id').match(re)[2];
//if we have any div but the last, swap it with the end
if ( id !== lastID ) {
$(this).insertAfter('#'+lastStr+lastID);
}
//otherwise, move the last one to the top of the stack
else {
$(this).insertBefore('div:first');
} });
Check out this working fiddle: http://jsfiddle.net/sQYhD/
You may also be interested in the jquery-ui library: http://jqueryui.com/demos/sortable/

Categories