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

Question

samsons17 -4 Posting Whiz in Training

15 Years Ago

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??

javascript

Edited 15 Years Ago by samsons17 because: n/a

2 Contributors
5 Replies
179 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by Taywin

Dani AI

Generated 6 Months Ago

Short diagnosis and a safe fix.

The reason the date printed as the literal "success" is that jQuery’s success callback delivers the server payload as the first argument and the text status (the string "success") as the second. As noted, expecting two separate success parameters for two server values caused the date variable to receive the status string. The reliable approach is to return both values from the server as structured JSON, let jQuery parse it, and then use the parsed fields on the client.

Return JSON and build the DOM safely. Set dataType: 'json' on the AJAX request and use one response argument in success. Prefer building the reply element with jQuery and inserting text with .text() (or otherwise escaping) to avoid XSS instead of concatenating raw HTML templates. Example client pattern:

$.ajax({
  url: 'reply.php',
  type: 'POST',
  data: $form.serialize(),
  dataType: 'json',
  success: function(resp) {
    var $item = $('<div>').addClass('load_reply').hide();
    $item.append(
      $('<div>').addClass('reply_text').append(
        $('<a>').attr('href','#').addClass('blue').text('Test Name'),
        $('<p>').addClass('tex').text(resp.discuss_text)
      )
    );
    var $date = $('<div>').addClass('date').text(resp.date + ' - ');
    $date.append($('<a>').attr('href','#').addClass('light_blue').text('Like'));
    $date.append(' - ');
    $date.append($('<a>').attr('href','#').addClass('light_blue').text('Comment'));
    $item.append($date);
    $item.prependTo($replyOut).fadeIn();
  },
  error: function(xhr, status, err) { console.error(status, err); }
});

Minimal server-side (PHP) behavior:

<?php
$response = ['discuss_text' => $safe_text, 'date' => $formatted_date];
header('Content-Type: application/json; charset=utf-8');
echo json_encode($response);

Troubleshooting notes: inspect the Network tab and console.log(resp) to confirm the actual server response; ensure no PHP notices, extra whitespace or BOM appear before JSON (they break parsing); and prefer JSON over ad-hoc delimiter splitting (the latter is brittle). If keeping the template-string approach that used, still parse a JSON response first and then replace placeholders or, better, construct elements programmatically for safer output.

All 5 Replies

Taywin 312 Posting Virtuoso

15 Years Ago

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...

Edited 15 Years Ago by Taywin because: n/a

Taywin 312 Posting Virtuoso

15 Years Ago

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();

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

samsons17 -4 Posting Whiz in Training · Answer 1 · 2011-02-28T00:40:16+00:00

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..

samsons17 -4 Posting Whiz in Training · Answer 2 · 2011-03-01T09:58:18+00:00

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 312 Posting Virtuoso · Answer 3 · 2011-03-01T23:49:03+00:00

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.

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

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers