skip to Main Content

In the text area of my form, I have integrated CK editor and it shows the editor very well in the textarea, but the issue is when I add value in the text area and try to send it via ajax I get a null value being sent. But when I remove the ck editor code the code is being sent. Which point might I be missing here?

on clicking the create policy button the addeitpolicymodal is called..
// add a new policy

  $(document).on('click','#createpolicy',function(){
     $('#addeditpolicymodal').modal('toggle');
     $('.addeditpolicy_title').html('Add A new Policy');
     $('#savepolicy').html('Create the Policy');
     // integrate ck editor
     $("#policy_description_ck").html('<textarea class="form-control text-white bg-dark policydesceditor" name="policy_description" placeholder="Describe the Policy Details here.explain it with as more details as possible"></textarea>');
     ClassicEditor
     .create( document.querySelector( '.policydesceditor' ),
     {
        toolbar: {
           items: [
              'heading', '|',
              'bold', 'italic', '|',
              'link', '|',
              'outdent', 'indent', '|',
              'bulletedList', 'numberedList', '|',
              'undo', 'redo'
           ],
           shouldNotGroupWhenFull: true
        }
     })
     $("#addremovevideo").hide();
  });

Here is my ajax code that sends data:

$('#savepolicy').click(function(e){
        e.preventDefault();
        var policyid=$('#policyid').val();
        var url = '{{ route("createupdate.policy", ":id") }}'; 
        policyupdateurl = url.replace(':id',policyid);

        var form = $('#addeditpolicyform')[0];
        var formdata=new FormData(form);

        $.ajax({
           url:policyupdateurl,
           method:'POST',
           processData:false,
           contentType:false,
           data:formdata,
           success:function(response)
           {
              console.log(response);
              if (response.status==400)
              {
                 $('.policy_errorlist').html(" ");
                 $('.policy_errorlist').removeClass('d-none');
                 $.each(response.message,function(key,err_value)
                 {
                    $('.policy_errorlist').append('<li>' + err_value + '</li>');
                 })
              } else if (response.status==200)
              {
                    alertify.set('notifier','position', 'top-right');
                    alertify.success(response.message);
                    policycatstable.ajax.reload();
                    $('.addeditcatpolicy').html('');
                    $('.catlabel').html('');
                    $('.save_button').html('');
                    $('.policycat_id').val('');
                    $('#policycat_title').val('');
                    $('.adminaddeditpolicy').modal('hide');
              }
            });
          });

2

Answers


  1. Please find below the changes in your code.

    $('#savepolicy').click(function(e){
            e.preventDefault();
            var policyid=$('#policyid').val();
            var url = '{{ route("createupdate.policy", ":id") }}'; 
            policyupdateurl = url.replace(':id',policyid);
    
            var form = $('#addeditpolicyform')[0];
            var formdata=new FormData(form);
            formdata.policy_description = CKEDITOR.instances['policy_description'].getData();
        
    
            $.ajax({
               url:policyupdateurl,
               method:'POST',
               processData:false,
               contentType:false,
               data:formdata,
               success:function(response)
               {
                  console.log(response);
                  if (response.status==400)
                  {
                     $('.policy_errorlist').html(" ");
                     $('.policy_errorlist').removeClass('d-none');
                     $.each(response.message,function(key,err_value)
                     {
                        $('.policy_errorlist').append('<li>' + err_value + '</li>');
                     })
                  } else if (response.status==200)
                  {
                        alertify.set('notifier','position', 'top-right');
                        alertify.success(response.message);
                        policycatstable.ajax.reload();
                        $('.addeditcatpolicy').html('');
                        $('.catlabel').html('');
                        $('.save_button').html('');
                        $('.policycat_id').val('');
                        $('#policycat_title').val('');
                        $('.adminaddeditpolicy').modal('hide');
                  }
                });
              });
    
    Login or Signup to reply.
  2.    let editor;
        
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .then( newEditor => {
            editor = newEditor;
        } )
        .catch( error => {
            console.error( error );
        } );
    
    // Assuming there is a <button id="submit">Submit</button> in your application.
    document.querySelector( '#submit' ).addEventListener( 'click', () => {
        const editorData = editor.getData();
    
        // ...
    

    } );

    I update this for CkEditor 5.

    https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/saving-data.html

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search