Question

I’m kinda new in jquery & ajax. I have 2 problems. I have the following html hierarchy ;

<div id="tasks">

    <!-- I want to inject another div  task_element and change the values inside -->

    <div id="task_element">

        <section class="actionframe"> ...
        <nav class="commentsDetail">  ...       

    </div>

    <div id="task_element">
        ....
    </div>

</div>

The commented injection in html is handled by a html button click. I have the following jquery to handle the event;

$('.addTaskBtn').click(function() {

    if(!$('#add_task_name').val())
    {
        $('.dropinput nav').slideUp(300);
        return false;
    }
    else
    {           
        // call ajax
        var $task_name = $('#add_task_name').val();
        var $task_date_time = $('#add_task_date').val();        
        var $task_location = $('#add_task_location').val();
        var $add_task = 'add_task';
        var sent_data = { 
               "op": $add_task ,
               "task_name" : $task_name,
               "task_date_time" : $task_date_time,
               "task_location" : $task_location
        };      

        var $out = JSON.stringify(sent_data);

        $.ajax({

              type: 'POST',
              url: 'ajax_service.php',                    
              contentType: "application/json; charset=utf-8",
              dataType: 'json',
              data: $out,        
              success: function() {
                  //$('.dropinput nav').slideUp(300);
                  // append jquery div
                  //window.location.reload();
                  $('#add_task_name').val('');
                  $('#add_task_date').val('');
                  $('#add_task_location').val('');
                  $('.dropinput nav').slideUp(300);                                                                   
                  $('#tasks').closest('#task_element').prependTo('#tasks');
              },
              error: function(xhr, ajaxOptions ,thrownError) {          
                  console.log(xhr);
                  console.log(thrownError);
              }

         });                    
    }

});

The first problem is obviously I can’t achieve the injection in html. The second problem is when I change code inside the success function, ajax_service became unstable to work. By unstable I mean that in first button click, it works correctly, but in the next click it doesn’t work at all (vice versa) and throws internal server error.

Any ideas to solve the problem ?

Is it wrong to change ui in success function ?

P.S : I’m almost sure that ajax_service.php works correctly

EDIT : Based on comment, I’ll add ajax_service.php ;

...some session variables and includes other php files here ...

$data = file_get_contents('php://input');
$data = json_decode($data, true);

if($data['op'] == 'add_task')
{
        $task_name = $data['task_name'];
        $task_location = $data['task_location'];        
        $task_date_time = $data['task_date_time'];
        $task_date_time = trim($task_date_time);

        if($task_date_time != "")
        {           
            $date_time = explode(" ", $task_date_time);             
            $task_date = "'".$date_time[0]."'";         
            $task_time = "'".$date_time[1]."'"; 

            if(trim($task_date) == "''")
            {
                $task_date = 'NULL';
            }
            if(trim($task_time) == "''")
            {
                $task_time = 'NULL';
            }       
            if( ($task_date == 'NULL'))
            {               
                $task_time = "'".$date_time[0]."'";
            }
        }
        else
        {           
            $task_date = 'NULL';
            $task_time = 'NULL';            
        }

        // 0 : history, 1 : today, 2 : later
        // compare browser time and task_date and define $time3 variable
        $task_time3 = 1;

        if(isset($task_name))
        {
            if($task_location == "")
            {
                $task_location = NULL;
            }

            $result_add_task = add_task($profile_id, $task_name, $task_location, $task_date, $task_time3, $task_time);
            if($result_add_task['result'])
            {
                $return['error'] = false;
                $return['msg'] = $result_add_task['description'];
                $return['op'] = 'add_task';
            }
            else 
            {
                $return['error'] = true;
                $return['msg'] = $result_add_task['description'];
                $return['op'] = 'add_task';         
            }

        }
        else 
        {
            $return['error'] = true;
            $return['msg'] = 'task_name is empty';
            $return['op'] = 'add_task';
        }

        echo json_encode($return);  
}

Answer 1

The internal server error hints at ajax_service.php not working correctly. Changing the ui in the success function is ok in principle. However, from your code I cannot easily spot what you are tring to do. From what I understand from your comments you are trying to add a task in the following form to #tasks

<div id="task_element">
    <section class="actionframe"> ...
    <nav class="commentsDetail">  ...       
</div>

If that is the case you might want to create a new div and append it like so

var div = '<div id="task_element"><section class="actionframe">' + whatever_data_has_been_returned_from_server + '<nav class="commentsDetail"></div>'
$('#tasks').prepend($(div))

instead of this part of your code

$('#add_task_name').val('');
$('#add_task_date').val('');
$('#add_task_location').val('');
$('.dropinput nav').slideUp(300);
$('#tasks').closest('#task_element').prependTo('#tasks');