Develop Reference

Preppend a new child div ahead of previous child div's jquery

I am trying to a do a simple media posting project. When new records are added to the database I use ajax to add a new child div to a parent div based on the info in the record. I have it working except for the order that children are added in. Doing a prepend does not place the new div as the first child of the parent div, it puts it as the last child of the specified parent. That's no good when I want new posts displayed on top. Here is the code for the file I'm working on. How do I prepend above previously added children?
$(document).ready(function (){
setInterval(function(){
$.ajax({
type: 'GET',
url: 'JSONFile.php',
data: { get_param: 'value' },
dataType: 'json',
success: function(retrieved){
//$("#MainContent").empty();
$.each(retrieved, function(index, i){
$('#MainContent').append('<br><div class="Post"><h2>' + i.UserName + '</h2><br><p>' + i.Content + '</p></div>');
});
}
});
},3000);
});

Instead of using .append, you can use .prepend, which was made for exactly this purpose:
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
So, you can use the code:
$.each(retrieved, function(index, i){
$('#MainContent').prepend('<br><div class="Post"><h2>' + i.UserName + '</h2><br><p>' + i.Content + '</p></div>');
});

Ajax jQuery Multiple Step Form instead of reloading div, just append new content

I wonder if it's possible to do this multistep form on one single page, so not reloading the div with the content received from the php file but append it right below..
This is what I've got so far:
$(document).on('submit', '#reg-form', function(){
var ln = $('#submit').val();
var id = $('#id').val();
var data = 'submit='+ln;
$.ajax({
type: 'GET',
url : 'step.php',
dataType : 'html',
data : data,
success : function(data)
{
$('#reg-form').fadeOut(500).hide(function()
{
$('.result').fadeIn(500).show(function()
{
$('.result'+id).append(data);
});
});
}
});
return false;
});
Also I tried to use different divs, with incremental id's to put every content in it's own div. The Problem is, I'm only getting the "second" step, so it's not going through the whole formular.
I guess it's because the form of the first page is still there and all have the same id.. Can anyone help me out here please?

id of element in document should be unique. Change the duplicate id at html source or using javascript
success : function(data) {
// change duplicate `reg-form` `id` to value
// corresponding to `.length` of elements having `id`
// containing `"reg-form"`
$(data).filter("#reg-form")
.attr("id", "reg-form-" + $("[id*='reg-form']").length);
$("#reg-form").fadeOut(500).hide(function() {
$(".result").fadeIn(500).show(function() {
$(".result" + id).append(data);
});
});
}

html() , append() is not working on elements coming through ajax call, remove is working

here id the div where my ajax cal content will display
<div class="topics"></div>
here is my ajax call
$.ajax({
type : "GET",
data : {
q : typedString
},
url : "/parent/childAjax?hideList=" + hideList,
success : function(msg) {
if (msg != '') {
$(".topics").html(msg).show();
}
}
});
here is backend code in childAjax action
.......
......
StringBuilder output = new StringBuilder();
output.append("<li><a href='#' onclick='addTopic(this.id)' class='catClass ${count%2==0?'odd':'even'} ui-link' id='${document.uniqueId}'>")
output.append("${document.name}")
output.append("</a>")
output.append("<span id='tick-${document.uniqueId}'><img src='${resource(dir:'images/mobile',file:'plus-icon.png')}' alt='' style='width:16px; height:16px' /></span></li>")
what actually i need to do is when i click on <a> element my js function is being called and in that i am replacing image plus-icon.png with other image using .html("replacing image code"). some how its(.html()) not working.
here is response data sample...
<li>Core Java<span id="tick-551"> <img src="http://192.168.0.105:8080/images/mobile/tick.png?v=0521" alt="" style="width: 16px; height: 16px"></span></li>
<li>Advanced JAVA<span id="tick-776"> <img src="http://192.168.0.105:8080/images/mobile/tick.png?v=0521" alt="" style="width: 16px; height: 16px"></span></li>

Use event delegation. This will ensure the event is fired for elements that did not exist at DOM load. Bind to a static parent element (in this case the body).
$('body').on('click', '.catClass', function(){
addTopic(this.id);
});

You can bind events to dynamically loaded content via jQuery's $.live().
From jQuery http://api.jquery.com/live/:

Deleting only one link which should be removed from list

HTML
<a href="/portfolio/${portfolio.id}" data-portfolio-id="${portfolio.id}" data-bookmark-id="${bookmark.id}" class="ac-hns">
<span>${portfolio.title}</span>
<span>By ${portfolio.ownerName}</span>
<img src="${portfolio.coverImage()}" alt="">
</a>
<a href="/portfolio/${portfolio.id}" data-portfolio-id="${portfolio.id}" data-bookmark-id="${bookmark.id}" class="ac-hns">
<span>${portfolio.title}</span>
<span>By ${portfolio.ownerName}</span>
<img src="${portfolio.coverImage()}" alt="">
</a>
JS
$('.ac-hns').on('click', '.icn-close-white', function (e) {
e.preventDefault();
deleteBookmarkItem( $(this), $(this).parent().attr('data-portfolio-id'), $(this).parent().attr('data-bookmark-id') );
});
function deleteBookmarkItem( btn, itemID, bookmarkID ) {
$.ajax({
url: '/api/bookmarks/'+ bookmarkID,
type: 'DELETE',
success: function( response ) {
$('.ac-hns').remove();
console.log('delete portfolio from bookmark');
}
});
}
The items are dynamic via json. If delete one of items on the list, say 3 items under one same bookmark, one item should be removed under the same bookmark and it wouldn't be on same bookmark anymore.
But right now, click on close icon on one of the items, all the items are removed under the same bookmark which is not right.
Help or insight appreciated.
Update
Just realize - could remove data-bookmark-id="${bookmark.id}" from tag and it won't appear in the bookmark list. I tried removeData('data-bookmark-id'), but it doesn't take bookmark id out.

$('.ac-hns').remove(); in the callback is removing everything with that class. Hard to tell with your HTML structure but I think you want something like this:
function deleteBookmarkItem( btn, itemID, bookmarkID ) {
$.ajax({
url: '/api/bookmarks/'+ bookmarkID,
type: 'DELETE',
success: function( response ) {
$('[data-bookmark-id="'+bookmarkID+'"]').remove();
console.log('delete portfolio from bookmark');
}
});
}

Because $('.ac-hns').remove(); removes all element with class .ac-hns.
You have to specify on your script which element with class of .ac-hns should be removed.
And since you want to change the whole group, it's parent including other child elements, do this $(itemID).remove();
Edit: also $(this).parent().attr('data-portfolio-id') when you pass as parameter, remove the .attr so it will only pass the parent and thus when you $(itemID).remove();, the script will able to know which parent it is then remove that element including its children.

How can I append new elments returned by Jquery/AJAX with shapeshift plugin to keep the grid-layout

How can I apply shapeshift to elements returned by AJAX placed in a div and give them the grid layout look ?
Also , it seems that Shapeflit breaks when I use it inside Jquery tabs .. like if I use it inside a tab , when I click on a tab , the grid layout is broken .. How can I fix those two issues ? Otherwise GOOD job with this plugin !!!
For example with AJAX .. when I scroll , new elements are appended with AJAX .. How can I make shapelift be applied to the new appended elements in the loaded_data div
$(window).scroll(function(){
if ($(window).height() + $(window).scrollTop() == $(document).height()) {
// make an ajax call to your server and fetch the next 100, then update
//some vars
var url = '<?php echo $image_url;?>';
$.ajax({
type:'POST',
url: "scroll_data.php",
data:{image_url: '<?php echo $image_url;?>'},
success: function(result){
var obj = $($.parseHTML(result));
// how can I append elements with shapelift so they can keep the grid layout ?
$(".loaded_data").append(obj);
$('.tweet_link').embedly({
key: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
query: {maxwidth:270, maxheight:1100}
});
}
});
}
});