ck editor text area send a null value yet there is a text value-CodePudding

i am fetching data from the database and then viewing it ata form where i want to update it.so i want o get the rental details value from the table in the database and view it in the text area input form.also i have integrated ck editor so that the user can make an edit efficiently on the text area.the issue am getting is am able to get the value of the rental details from the table and shows very well in the textarea but when i send the request it shows a null value yet on the text area it shows there is a text. i have tested another case whereby when i remove the ck editor from the text area the value is sent on post request

[![in the form][1]][1]

The form

upon making a post request

[![when i send a post request][2]][2]

where might I be going wrong?

in the blade file

<div >
      <label>Rental Details<span >*</span></label>
       <textarea  name="rental_details" placeholder="Describe the Rental property here.explain it with as more details as possible" rows="4">
            </textarea>
   </div>

in the script

$('.rental-details').ckeditor();
$('.rental_details').val(response.editrentalhsedetail.rental_details);

here is my ajax code in the script that sends the data in the form to the controller

$('#edithouse').click(function(){

     var url = '{{ route("updaterentaldetails", ":id") }}';
     updatehseurl = url.replace(':id',rentalhsedetailsid);

     var form = $('.updaterentaldetails')[0];
     var formdata=new FormData(form);
     $.ajax({
        url:updatehseurl,
        method:'POST',
        processData:false,
        contentType:false,
        data:formdata,
        success:function(response)
        {
           console.log(response);
           if (response.status==400)
           {
              $('#update_errorlist').html(" ");
              $('#update_errorlist').removeClass('d-none');
              $.each(response.message,function(key,err_value)
              {
                 $('#update_errorlist').append('<li>'   err_value   '</li>');
              })

           } else if (response.status==200)
           {
                 alertify.set('notifier','position', 'top-right');
                 alertify.success(response.message);
                 activerentalhousestable.ajax.reload();
                 $('#editrentalhsedetailsmodal').modal('hide'); 
           }

        }
     });
  })

am passing the data current data to amodal using an ajax call

   $('body').on('click','.editrentalhsedetails',function(){
        var rentalhsedetailsid=$(this).data('id');
        $.ajax({
          url:'{{ url("admin/activerental",'') }}'   '/'   rentalhsedetailsid   '/edit',
        method:'GET',
        processData: false,
        contentType: false,
        success:function(response)
        {
           if (response.status==404)
           {
              alert(response.message);
           } 
           else if(response.status==200)
           {
              // console.log(response.editrentalhsedetail.rental_details)
              $('#editrentalhsedetailsmodal').modal('toggle');
              $('#rentalhouseid').val(response.editrentalhsedetail.id);
              $('.edit_title').html('Edit details for Rental house');
              $('#rental_title').val(response.editrentalhsedetail.rental_name);
              $('#rental_slug').val(response.editrentalhsedetail.rental_slug);               $('#monthly_rent').val(response.editrentalhsedetail.monthly_rent);         $('#rentldetails').val(response.editrentalhsedetail.rental_details);
              

              $('#totalrooms').val(response.editrentalhsedetail.total_rooms);
              $('.rentalhseimage').val(response.editrentalhsedetail.rental_image);
              
              $('.rentalhsevideo').val(response.editrentalhsedetail.rental_video);

              $(".rentalselectcat").select2();
              $(".rentalselectcat").val(response.editrentalhsedetail.housecategory.id).trigger('change');

              $(".rentalhsevacancy").select2();
              $(".rentalhsevacancy").val(response.editrentalhsedetail.vacancy_status).trigger('change');

              $(".rentalhselocation").select2();
              $(".rentalhselocation").val(response.editrentalhsedetail.houselocation.id).trigger('change');

              
              var tagsobject = response.editrentalhsedetail.housetags;
              var tagsarray = $.map(tagsobject, function(el) { 
                 return el['id']; 
              });
              //pass array object value to select2
              $(".rentaltagselect2").select2();
              $('.rentaltagselect2').val(tagsarray).trigger('change');

              // preview an image that was previously uploaded
              var showimage=$('#showimage').attr('src', '/imagesforthewebsite/rentalhouses/rentalimages/small/'   response.editrentalhsedetail.rental_image);
              $('.rentalimg').html(showimage);

              $('input[name^="is_featured"][value="' response.editrentalhsedetail.is_featured '"').prop('checked', true);

              $('input[name^="waterbill"][value="' response.editrentalhsedetail.waterbill '"').prop('checked', true);

              $('input[name^="electricitybill"][value="' response.editrentalhsedetail.electricitybill '"').prop('checked', true);

              $('input[name^="wifi"][value="' response.editrentalhsedetail.wifi '"').prop('checked', true);

              $('input[name^="generator"][value="' response.editrentalhsedetail.generator '"').prop('checked', true);

              $('input[name^="balcony"][value="' response.editrentalhsedetail.balcony '"').prop('checked', true);

              $('input[name^="parking"][value="' response.editrentalhsedetail.parking '"').prop('checked', true);

              $('input[name^="cctv_cameras"][value="' response.editrentalhsedetail.cctv_cameras '"').prop('checked', true);

              $('input[name^="servant_quarters"][value="' response.editrentalhsedetail.servant_quarters '"').prop('checked', true);
           }
        }
     })

     //   update rental tags details
     $('#edithouse').click(function(){

        var url = '{{ route("updaterentaldetails", ":id") }}';
        updatehseurl = url.replace(':id',rentalhsedetailsid);

        var form = $('.updaterentaldetails')[0];
        var formdata=new FormData(form);
        $.ajax({
           url:updatehseurl,
           method:'POST',
           processData:false,
           contentType:false,
           data:formdata,
           success:function(response)
           {
              console.log(response);
              if (response.status==400)
              {
                 $('#update_errorlist').html(" ");
                 $('#update_errorlist').removeClass('d-none');
                 $.each(response.message,function(key,err_value)
                 {
                    $('#update_errorlist').append('<li>'   err_value   '</li>');
                 })

              } else if (response.status==200)
              {
                    alertify.set('notifier','position', 'top-right');
                    alertify.success(response.message);
                    activerentalhousestable.ajax.reload();
                    $('#editrentalhsedetailsmodal').modal('hide'); 
              }

           }
        });
     })
  })```


where might I be missing the point here


 [1]: https://i.stack.imgur.com/L4CyO.png
 [2]: https://i.stack.imgur.com/6GGZ1.png

CodePudding user response：

Try to this code

   <script>
    ClassicEditor
    .create( document.querySelector( '#rental-details' ) )
    .catch( error => {
    console.error( error );
    } );
    </script>

Note that, Don’t forget to add the following CDN file to your blade view file in laravel or any project

<script src="https://cdn.ckeditor.com/ckeditor5/23.0.0/classic/ckeditor.js"></script>

if want to ckeditor data get into jquery or javascript see the details click here

CodePudding user response：

Did you add ID to CKeditor textarea for the answer above?

HTML:

    <div >
      <label>Rental Details<span >*</span></label>
       <textarea  name="rental_details" id="rental_details" placeholder="Describe the Rental property here.explain it with as more details as possible" rows="4">
            </textarea>
   </div>

JS:

<script>
        ClassicEditor
            .create( document.querySelector( '#rental_details' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>

If this doesn't work, can u tell us if u type in the data through editor or just post default value? Cuz maybe ur not setting it right. From the code above we can only see the placeholder, so there is no actual data.

UPDATE: so if u want to post your old data that is coming from db (what you would want to do for example in edit functionality):

    <textarea rental_details" id="rental_details">{!! old('rental_details', $oldDataDbQuery->rental_details) !!}</textarea>

assuming ur getting object from $oldDataDbQuery object that has property of 'rental_details' Anyway just pass data u want to be in field by default inside textarea, and be careful to use {!! !!} instead of {{ }}

UPDATE 2: API WAY

Controller:

public function getRentalDetails(Request $request)
    {
        $rentalDetails = Model::where('id', $request->product_id)->find($request->product_id);

            return response()->json($product->rental_details);
    }

where Model is your model that holds object that has property rental_details, product_id (just as example) is that object that you're currently working with, u can take it from request if ur passing data from browser with route like {id}. Then u return json response of that string.

web.php:

    Route::match('getRentalDetails', 'Model@getRentalDetails')->name('getRentalDetails');

then in your blade file u just make ajax request to that route with product_id that will compare it and find value for specific one. I know too little info so that i can help u doing this completely but u should understand how it works now.