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

stephenWeru
August 23, 2022
56 views
3 votes
3 Answers

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 class="form-group inputdetails">
      <label>Rental Details<span class="text-danger inputrequired">*</span></label>
       <textarea class="form-control text-white bg-dark rental-details" 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

Answers

- sherazahmad
- August 23, 2022 at 7:48 am
- 0 votes
0
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
Login or Signup to reply.

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

HTML:

    <div class="form-group inputdetails">
      <label>Rental Details<span class="text-danger inputrequired">*</span></label>
       <textarea class="form-control text-white bg-dark rental-details" 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 class="form-control text-white bg-dark rental-details name="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.

EDIT 3:
after private discussion i have made u working example of what should u do on page to properly render ck editor field after displaying modal and getting an api response:

let response = {
    key1    : 'val1',
  key2  : 'val2',
  rental_details_ck : '<p><b>data</b></p> from api with rental details of ckeditor', //this is data like ckeditor saves in database, for example
};

$(document).ready(function(){
  $("#rental_details_edit").click(function(){
  // here u do ur ajax request, u can return rest of code block on success, make sure to pass in id for ajax call so that u can return relevant data for that record in database.
  //query should look like this - $rental_details_editor = Model::where('id', $id)->first();
  // from controller u can return just object property needed, doesn't have to be whole object.
    $("#rental_details_ck").html('<textarea id="editor">' + response.rental_details_ck + '</textarea>');
        ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
<body>

<button id="rental_details_edit">Edit</button>

<div id="rental_details_ck">

</div>

</body>
</html>

in order to setup api from index page u must register route in web.php, setup method in controller and return response as json. ajax call should be done in marked place.

if (typeof ClassicEditor !== 'undefined') {
        var editorData
        ClassicEditor
            .create(document.querySelector('#editor'), {
                toolbar: {
                    items: [
                        'heading',
                        '|',
                        'bold',
                        'italic'
                    ],
                    shouldNotGroupWhenFull: true
                }
            }) .then( editor => {
                editorData = editor;
            } )
            .catch(error => {
            });
    }

this code is working in my case

Please signup or login to give your own answer.

Click here to cancel reply.

ck editor text area send a null value yet there is a text value – Jquery

Answers