Geek Answers Handbook

JQuery cleaner way to add

I recently created a wall similar to Facebook.

And I just need some advice or a better way.

So, when the user posted his post, I will add the results to the div, and I did it like that.

$('.get_posts').prepend('<div id="'+stream.sid+'"class="row stream-posts"><div class="span1 stream-thumb"><ul class="thumbnails"><li><a href="#" class="thumbnail"><img src="http://placehold.it/60x60" alt=""></a></li></ul></div><div class="span5 stream-content"><a href="#" class="author">'+stream.author+'</a><p>'+stream.text+'</p></div></div>');

I know this is not the best, and would like to ask for a more experienced developer if there is a cleaner way to add data.

+4
source share
4 answers

An easier way to do this is to create a function that generates the HTML code needed for the message.

 function createPost(postDetails){ var html = ''; html += '<div id="'+postDetails.sid+'"class="row stream-posts">'; html += ' <div class="span1 stream-thumb">'; html += ' <ul class="thumbnails">'; html += ' <li>'; html += ' <a href="#" class="thumbnail">'; ... return html; }

That way you can simply execute - $('.get_posts').prepend(createPost(postData)); and pass all the relevant data to the function through the postData argument. Much cleaner and easier to maintain.

Depending on how you implemented the updates on the wall, you can also create this HTML block on your server and send it as is. This way, your JavaScript does not have to worry about creating markup - you can just add the data that you received from the AJAX call.

+3
source

one parameter can create an html document and use the load() method:

Download data from the server and put the returned HTML in the appropriate element.

markup.html:

  <div class="span1 stream-thumb"> <ul class="thumbnails"> <li> <a href="#" class="thumbnail"><img src="http://placehold.it/60x60" alt=""></a> </li> </ul> </div> <div class="span5 stream-content"> <a href="#" class="author"></a> <p></p> </div> 

 $('.get_posts').prepend('<div id="'+stream.sid+'" class="row stream-posts"></div>'); $("#" + stream.sid).load('markup.html', function(){ $(this).find('a:last').text(stream.author); $(this).find('p:last').text(stream.text) })
+4
source

I also suggest using a function, my approach is much similar to other function-based approaches, but involves creating elements with their various attributes, rather than treating HTML as a string (both ways of working and the HTML-as-string approach are certainly more concise )

This approach, however, in my experience, makes it easier to make changes to the output without worrying about whether your HTML line is properly closed and escaped:

 function prependNewPost(elem, stream) { var outerDiv = $('<div />', { 'id': stream.sid, 'class': 'row stream-posts' }), innerDiv = $('<div />', { 'class': 'span1 stream-thumb' }).appendTo(outerDiv), ul = $('<ul />', { 'class': 'thumnails' }).appendTo(innerDiv), li = $('<li />').appendTo(ul), a = $('<a />', { 'href': '#' }).appendTo(li), image = $('<img />', { 'src': 'http://placehold.it/60x60', 'alt': '' }).appendTo(a), secondInnerDiv = $('<div />', {'class' : 'span5 stream-content'}).appendTo(outerDiv); var p = $('<p />').text(stream.text).appendTo(secondInnerDiv); outerDiv.prependTo(elem); } $('#add').click( function() { var stream = {}; stream.sid = 'two'; stream.author = 'Geoff'; stream.text = 'Some text, a pseudo-Lorem ipsum, if you will...'; prependNewPost($('#stream'),stream); });​

JS Fiddle demo .

Literature:

+3
source

How about calling an ajax function? Then you can save the entered data, perhaps parse the emoticons / links and return the entire div with the analyzed text and add it to the wall.

0
source

More articles: