Login

freddy · 09-16-2015, 02:11 AM

Hello guys thanks for some help in yesterday now i have little problem here is simple demo http://codepen.io/sidaurukfreddy/pen/LpGzjW

Please clcik edit and submit it automatically hide.

i have been success for edit form by using jquery and ajax but i can't show to users when form errors cause after submit the div will be hide, am not experts in jquery ajax but little bite know it, i want to make the form look like edit form php buth put the edit form in same position like demo, so here is my real script using jquery

view to edit click

Code:
<div class="col-md-4 box-2-add">

                      <div class="inner-2">

                          <!--enter kasih jarak-->

                        <div class="box-2-add-scroll">

                            <div class="enter-search-1"></div>

                           <div class="box-2-add-scroll-content" id="scroll-style-box-2-add-scroll">

                              <ul>

                                  <?php

                                    if ($allproducts->num_rows() > 0):

                                    foreach ($allproducts->result() as $row):

                                    ?>   

                                 <li class="child-products">

                                    <p>by <strong><?php echo $row->nama ?></strong> <?php echo tgl_indo($row->product_date) ?> 16:00</p>

                                    <p><?php echo $row->name_brand ?>, &nbsp;<?php echo $row->name_tipe ?>

                                       </p>

                                    <p> <?php echo "Rp.".number_format($row->product_harga,0,',','.'); ?> (<?php 

                                       if ($row->product_status !='')

                                       {

                                         echo "$row->product_status";

                                       }

                                       else

                                       {

                                       echo "Baru";

                                       }?>)</p>

                                    <p><?php echo $row->product_toko ?></p>

                                       <a href="#" id="edit" class="<?php echo $row->id_product_post ?>" >Edit</a>

                                       |

                                       <a href="<?php echo base_url()?>add/del/<?php echo $row->id_product_post ?>"  >Delete</a>

                                 </li>

                                 <?php endforeach; ?> 

                                 <?php endif; ?>

                              </ul>

                           </div>

                        </div>

                     </div>

                  </div>

                  <div class="col-md-4 box-3-add" id="edit-products">

                   </div>

Edit form

Code:
<div class="inner-3">

  <form class="form-horizontal" method="post" enctype="multipart/form-data" action="<?php echo site_url('add/update')?>" id="form-upload">

    <?php  foreach($editdata->result() as $detail){ ?>

      <fieldset>

         <input type="hidden" class="form-control"  name="id" value="<?php echo $detail->id_product_post ?>"   >

         <div class="form-group col-md-12 no-margin">

           <?php

               $image_path = base_url()."uploads/product";

               if ($detail->foto=='') 

               {

                  //echo "foto kosong";

                   echo " <img id='image_upload_preview-edit' src='$image_path/before-upload.png' alt='gambar products' width='365px' height='200px'/>";

               }

               else

               {

                  //echo "foto gak kosong";

                  echo " <img id='image_upload_preview-edit' src='$image_path/$detail->foto' alt='gambar products' width='365px' height='200px'/>";

               }

            ?>

             <input   id="inputFile-edit" type="file" name="inputFile-edit" class="input-file"  >

         </div>

         <!--<div class="form-group col-md-12 no-margin">

            <label class="control-label col-md-3 col-sm-3 col-xs-12"></label>

            <div class="col-md-6 col-sm-6 col-xs-12">

               <?php if(isset($errors)):?>

               <div class="alert alert-danger">

                  <?php echo $errors; ?>

               </div>

               <?php endif;?>

            </div>

         </div>-->

         <div class="form-group col-md-12 no-margin">

            <label for="email">Merek / Brand :</label>

            <input type="search" class='form-control' name="merk" value="<?php echo $detail->name_brand ?>" id="autocomplete_brand"/>

            <input type="hidden"  id="id_brand_edit" name="id_brand" value="<?php echo $detail->id_tipe ?>"  />

            <?php echo form_error('merk'); ?>

         </div>

         <div class="form-group col-md-12 no-margin">

            <label for="email">Tipe</label>

            <input type="search" class='form-control'  name="tipe" value="<?php echo $detail->name_tipe ?>" id="autocomplete_tipe"/>

            <input type="hidden"  id="id_tipe_edit" name="id_tipe"  value="<?php echo $detail->id_tipe ?>"/>

            <?php echo form_error('tipe'); ?>

         </div>

         <div class="form-group col-md-12 no-margin">

            <label for="email">Nama Toko/ Twitter:</label>

            <input id="namatoko" name="namatoko" value="<?php echo $detail->product_toko ?>"   type="search"  class="form-control input-md" required="">

            <?php echo form_error('namatoko'); ?>

         </div>

         <div class="form-group col-md-12 no-margin">

            <label for="email">Rp:</label>

            <input id="rp" name="rp" type="text"  class="form-control input-md" required="" onkeydown="return numbersonly(this, event);" onkeyup="javascript:tandaPemisahTitik(this);" value="<?php echo $detail->product_harga ?>">

            <label class="checkbox-inline"><input type="checkbox" value="Bekas" name="status">Bekas</label>

            <?php echo form_error('rp'); ?>

         </div>

         <div class="form-group col-md-12 last-no-margin">

            <label for="email">Keterangan (255 Char)</label>

            <textarea class="form-control" id="keterangan" name="keterangan"  required><?php echo $detail->product_keterangan ?></textarea>

            <?php echo form_error('keterangan'); ?>

         </div>

         <button type="submit" class="btn btn-success" id="edit-products" class="<?php echo $detail->id_product_post ?>">Tambahkan Data</button>

      </fieldset>

      <?php  }  ?>

   </form>

</div>

Thanks for any support or comment

PaulD · 09-16-2015, 06:57 AM

Hi,

When I am doing something similar I use the normal form validation on my ajax post url, but set the validation errors to :

Code:
$this->form_validation->set_error_delimiters('Error: ', '');

I also use CSRF protection so don't forget to post the relevant hash codes in your JS post as well.

If there is an error I just echo the validation_errors(); or echo the required response, which might just be a simple 'ok' or it might be some relevant HTML to be inserted somewhere.

Then in the JS I check the response of the ajax call for error or not like this:

Code:
var response = theResponse.substring(0,5);

if (response == 'Error') {

   // Do the error response

} else {

   // Do the correct response

}

That means that following an Ajax call I can deal with a form error or a correct form post result however I want. I often have three tests, an additional one to test if the user is logged in or if the login has expired too, as well as testing if the user is authorised or not. These have responses of their own for testing like 'Login' if re-login required or 'xAuth' if they are not authorised to do that action.

Hope that helps,

Best wishes,

Paul.

freddy · 09-16-2015, 07:56 PM

oh i'm still don't get it, please guide me in codepen.io or fiddle by your ways or is there any ways to keep this form show after click edit form by using pure php

Thanks

PaulD · 09-17-2015, 06:17 AM

It is hard to do a fiddle with it because of all the dependencies and CI itself of course.

This is how I would do it.

1. Browser shows information plus a link to edit info in a container div.
2. On clicking the link, js prevents normal link action, sends an ajax request to the server.
3. The server (ie now on CI), gets the html form via a view, and returns it to the browser ajax request.
4. The javascript collects the response, and replaces the HTML in the container div, with the form data. It also adds a click event to the submit/save button of the form.
5. When the user hits the save button, another js function (assigned to the submit button previously) collects the form data, and posts it via ajax back to the server for processing.
6. The server processes the posted form data using all the normal form validation in CI. It processes the data however you want it to and on success, returns the HTML, to repopulate the container div with the amended information.
-- now there are several ways to approach this next bit. ---
7a. The javascript function collects the returned HTML. Here you can display the information as is if you want. So if an error has occured from the processing of the form, the view from 6 includes an error message, plus the original information, or the form, whatever you want.
7b. The javascript tests the response (in my previous answer I suggested using substr to test the first five characters) and if error, just adds error message to the already displayed form. If no error, then display the response directly because it will be the original data.
7c. The javascript tests for a response, if error, gets the form again through another ajax call, if not, gets the data again through another ajax call

This all seems very complicated the first time you do it, but once you get it working, inline editing is really powerful. But you have to have your javascript, your server side processing, and your HTML all working perfectly.

There are lots on online tutorials too:
http://phppot.com/php/php-mysql-inline-e...uery-ajax/
http://w3lessons.info/2014/04/13/html5-i...uery-ajax/
http://www.smarttutorials.net/inline-edi...bootstrap/

You can google for lots more

I hope that helps.

Best wishes,

Paul.