Question

I do an ajax call to post and then retrieve from the controller all the days between two given dates.
Here is my JS function :

function  getDays()
    {

          var  date1= $('#start_date').val();
          var  date2=$('#end_date').val();
          $.ajax({
            type:'POST',
            url : '<?php echo site_url()."/public/hours/getHoursDetails/"; ?>',
            data : 'start_date='+date1+'&end_date='+date2,

            success:function(data)
                 {  $('#result').html(data);
                    $('#hoursDetails').show();
                           }

                    }); 
     } 

I got on my view the list of all the days I need. But what I would like rather to do is to display after each date some inputs , like

<label><strong>Action(s)</strong></label>   
<textarea class="span8" style="height:100px" placeholder="Description de votre action"
id="action" name="action"></textarea> 
<label><strong>Number of hours :</strong></label><input type="text" class="span4" id="hours" name="hours" placeholder="number of hours"/>

My problem is that I can’t display row by row each date.
Here is an example of what I got on my view :

"Tuesday, October 09 2012."
"Wednesday, October 10 2012."
"Thursday, October 11 2012."
"Friday, October 12 2012."

Could anyone help me please?

Answer 1

Can’t you just take each date from the results, append the extra HTML and then add it all together before inserting into the #result element?

put the extra HTML in a variable:

var inputHTML = '<label><strong>Action(s)</strong></label><textarea class="span8" style="height:100px" placeholder="Description de votre action" id="action" name="action"></textarea><label><strong>Number of hours :</strong></label><input type="text" class="span4" id="hours" name="hours" placeholder="number of hours"/>';
var date1= etc...

then inside the success function:

var resultHTML = ""
var datesArray = data.split('.');
for (i=0;i<datesArray.length-1;i++) {
    resultHTML += datesArray[i] + inputHTML;
}
$('#result').html(resultHTML);