How to .append() different data to the same element at the same time?

[samsons17]

Hi all :)
I basically want to use the .append() data to append the data that I got to the selected div.

this is variable that i've declared

var li_template = '<div style="display:none" class="load_reply"><div class="reply_img"><img src="status/blankSilhouette.png" /></div><div class="reply_text"><a href="#" class="blue">Test Name</a><p class="tex">%s</p><div class="date">%r &middot; <a href="#" class="light_blue">Like</a> &middot; <a href="#" class="light_blue">Comment</a></div></div><div class="clear"></div></div>';

and below is my ajax code :

$.ajax({
      type: "POST",
      url: "reply.php",
      data: $this.serialize(),//easier than building the string manually.
      success: function(discuss_text,date){
	    var data1 = $(li_template.replace('%s',discuss_text));
	    var data2 = $(li_template.replace('%r',date));
	    var combine = $add(data1,data2);
$(data1+data2).prependTo($reply_text).fadeIn();//insert, then fadeIn a new li element and its contents.
  $this.val('');//empty the textarea
			},
      error: function(){
	  //you should display something to advise the user if ajax fails.
      },
      complete: function(){
          //something here...
      }
		});

so if you notice on the code above, I've tried to combine two varibales and append them to the $reply_text.which i've tried to do by writing like this :

var data1 = $(li_template.replace('%s',discuss_text));
	    var data2 = $(li_template.replace('%r',date));
	    var combine = $add(data1,data2);
$(data1+data2).prependTo($reply_text).fadeIn();

I know that my attempt is wrong,and I hope you guys could show me the real way to do this.

So any help guys??

[Taywin]

Hmm... I am not familiar with JQuery that much, but I have a question about the way you use it.

Your li_template is not a DOM element but it is a string, but you are using it as if it is a DOM element? I don't think JQuery would allow that. Shouldn't the value inside $() an element name or ID?

i.e.

var li_template = '<div style="display:none" class="load_reply"><div class="reply_img"><img src="status/blankSilhouette.png" /></div><div class="reply_text"><a href="#" class="blue">Test Name</a><p class="tex">%s</p><div class="date">%r &middot; <a href="#" class="light_blue">Like</a> &middot; <a href="#" class="light_blue">Comment</a></div></div><div class="clear"></div></div>';

//var data1 = $(li_template.replace('%s',discuss_text));  // this won't work
var data1 = li_template.replace('%s',discuss_text);
//var data2 = $(li_template.replace('%r',date));  // this won't work either
var data2 = $li_template.replace('%r',date);
var combine = $add(data1,data2);  // don't know whether you want to concatenate the text?
$(data1+data2).prependTo($reply_text).fadeIn();  // this won't work...

[samsons17]

Hmm... I am not familiar with JQuery that much, but I have a question about the way you use it.

Your li_template is not a DOM element but it is a string, but you are using it as if it is a DOM element? I don't think JQuery would allow that. Shouldn't the value inside $() an element name or ID?

i.e.

var li_template = '<div style="display:none" class="load_reply"><div class="reply_img"><img src="status/blankSilhouette.png" /></div><div class="reply_text"><a href="#" class="blue">Test Name</a><p class="tex">%s</p><div class="date">%r &middot; <a href="#" class="light_blue">Like</a> &middot; <a href="#" class="light_blue">Comment</a></div></div><div class="clear"></div></div>';

//var data1 = $(li_template.replace('%s',discuss_text));  // this won't work
var data1 = li_template.replace('%s',discuss_text);
//var data2 = $(li_template.replace('%r',date));  // this won't work either
var data2 = $li_template.replace('%r',date);
var combine = $add(data1,data2);  // don't know whether you want to concatenate the text?
$(data1+data2).prependTo($reply_text).fadeIn();  // this won't work...

Hi :)
thanks for replying..
I forgot to mention actually that I got the container which is this :

<div class="load_reply_out"></div>

and whatever data that i send and retrieve via the ajax request should then be append() within this container..

so basically in the variable which I've created with the name of li_template contains
this two symbol which are %s for the reply text and %r for the date.

the next step that i need to do is just to replace both of these with the data and then append() both of them to the "load_reply_out" container.

But my problem is, i only manage and know how to replace one symbol at a time and also append() only 1 data at a time.

if the only data that i want to append is the reply text than I just need to do this :

say that i make this li_template variable simpler :

var li_template = '<div style="display:none" class="load_reply">%s</div>';

$("form.post_reply").submit(function() {
var $reply_text = $this.closest('.status_text').find('.load_reply_out');
$.ajax({
      type: "POST",
      url: "reply.php",
      data: $this.serialize(),//easier than building the string manually.
      success: function(discuss_text,date){
 // find any %s symbol and replace it with discuss_text and prepend it to container $reply_text.
//$reply_text is a varible i made to find the closest container to the object which call it(refer above)	    
 $(li_template.replace('%s',discuss_text)).prependTo($reply_text).fadeIn();           
}
});

So what if instead of just replace and append/prepend %s, i also want to replace %r and append/prepend it to the container of $reply_text?
How could i achieve this?

any idea?
this is really a simple thing but i dont know how to do..help please..
thanks..

[Taywin]

Ok, you mean you can do it with 1 replacement location, but not 2? Then it is actually not too difficult. From your current code...

$(li_template.replace('%s',discuss_text)).prependTo($reply_text).fadeIn();

may change to...

$(li_template.replace('%s',discuss_text).replace('%r',date)).prependTo($reply_text).fadeIn();

[samsons17]

Hi...ok now the problem is solved..
But unfortunately I got a little bit problem more and hope you still could help me out..

I succesfully done the 2 replacement, but it seems that the date did not shows up correctly.Instead of showing up the date, it turns out to display only the word "success".

I hope you could spend a little time of analyzing my code below..

this is my ajax code :

<script type="text/javascript">
$(document).ready(function(){

$(".input_box_reply").elastic().css("height","30px");


$(".input_box_reply").focus(function(){
$(this).filter(function(){
return $(this).val() == "" || $(this).val() == "Write something.."
}).val("").css("color","#000000");
});
$(".input_box_reply").blur(function(){
$(this).filter(function(){
return $(this).val() == ""
}).val("Write something..").css("color","#808080");
});


	$("form.post_reply").submit(function() {
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12){
a_p = "am";
}else{
a_p = "pm";
}
if (curr_hour == 0){
curr_hour = 12;
}
if (curr_hour > 12){
curr_hour = curr_hour - 12;
}
var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1){
curr_min = "0" + curr_min;
}
var m_names = new Array("Jan", "Feb", "Mar", 
"Apr", "May", "Jun", "Jul", "Aug", "Sep", 
"Oct", "Nov", "Dec");
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
var date = m_names[curr_month] +" "+ curr_date +" "+"at"+" "+ curr_hour + ":" + curr_min + " " + a_p;
	
		$this = $(this);//a jquery object for the particular form that is being submitted
		//var discuss_text = $this.find('[name=discuss_text]').val();
		var $reply_text = $this.closest('.status_text').find('.load_reply_out');//a jquery object for the form's corresponding "reply_text" list
		var $submit_button = $this.find('input:submit');
		
		var li_template = '<div style="display:none" class="load_reply"><div class="reply_img"><img src="status/blankSilhouette.png" /></div><div class="reply_text"><a href="#" class="blue">Test Name</a><p class="tex">%s</p><div class="date">%r &middot; <a href="#" class="light_blue">Like</a> &middot; <a href="#" class="light_blue">Comment</a></div></div><div class="clear"></div></div>';
		$.ajax({
			type: "POST",
			url: "reply.php",
			data: $this.serialize(),//easier than building the string manually.
			success: function(discuss_text,date){
				$(li_template.replace('%s',discuss_text).replace('%r',date)).prependTo($reply_text).fadeIn();//insert, then fadeIn a new li element and its contents.
				$this.val('');//empty the textarea
			},
			error: function(){
				//you should display something to advise the user if ajax fails.
			},
			complete: function(){
				$submit_button.attr('disabled', false);//enable submit button.
				$(".input_box_reply").val("Respond to this problem..").css("color","#808080").css("height","30px");
			}
		});
		return false;
	});
});
</script>

and this is my html form code :

<form name="disscuss_text" class="post_reply">
 <input type="hidden" name="test5" id="test5" value='.$id.'>
 <input type="hidden" name="date" id="date" value='.$date.'>
  <textarea id="discuss_text" name="discuss_text" class="input_box_reply">Respond to this problem..</textarea>
 <input type="submit" value="Post" name="Help" id="post-button" />
   </form>

DO you have any idea how should i code so that the date will show up?
Thank you :)

[Taywin]

Reading from JQuery Ajax API here, I found out that the success arguments are not what you are expecting. Its syntax is success(data, textStatus, jqXHR). As you see that the first argument is the data you pass into the function, and the second argument is the status. Because the second argument is the text status, it is 'success'.

What you may want to do is to concatenate the 'date' string to your 'discuss_text' with a unique known string for delimiter. Then use the delimiter to split the string inside the success function before using them to replace to the correct location.