تفريغ المحتوى بعد الارسال الى قاعدة البيانات javascript

بتاريخ منذ ساعة مضت قال Hamada Ahmed:

بعد الارسال يتم ازالة الفورم كليا مع viewimg

عذرا , قد ورد خطأ في الكود هنا بالضبط : 

$('#messages_form_groups').insertBefore(newEmptyImg);

فالمفروض أن يقوم هذا بـ تضمين العنصر الجديد قبل العنصر بالمعرف messages_form_groups , و هو ما نحتاجه و صوابه : 

$(newEmptyImg).insertBefore('#messages_form_groups');

قم باستبدال الخطأ بصوابه و أخبرني بالنتيجة 

لا يؤدي تغيير خاصية src إلى "إلغاء تحميل" مورد الصورة - بل سيزيل فقط ارتباطها بعنصر <img /> هذا . أي أن التغييرات لن تظهر مباشرة , بل ستظهر في حالة إعادة تحميل عنصر الصورة مجددا .  

لأن إعادة التحميل ليس شيئًا يمكنك تحقيقه بالصور ، و في الغالب أنك لا تريد حقًا "تفريغه". بل تحاول إخفاءه أو إزالته أو ربما إعادة تحميله ، ولكن عليك الاحتفاظ به لأسباب معينة . 

و لذلك سيتبقى حل أن تقوم بحذف الصورة كليا ثم إعادة تضمين صورة جديدة بعد عرضها و إرسال طلب الأجاكس . 

و لذلك سيكون الكود الخاص بالعملية كاملة مشابها للتالي : 

<!--  لنتأكد من تعريف الصورة -->
<img class="img-thumbnail" id="viewimg" style="display:none;">
<form id="messages_form_groups" enctype="multipart/form-data" class="form_msgs">
   <label for="file" title="صورة"> 
     
     <img src="images/photo_upload.png" /> 
   </label>
  
   <input name="picname" id="putname" type="hidden">
   <textarea class="textarea_msgs_groups" name="message" id="message" maxlength="350" placeholder="اكتب رسالة ....">
</textarea>
   
  <div class="myButton" title="ارسال">
      <input type="submit" name="submit_profile" value="">
   </div>
     
   <script>
      $("#messages_form_groups")
         .on('submit', function(e) {
            e.preventDefault();
            $.ajax({
               type: 'POST',
               url: 'send_pages/send_messages_form_groups.php',
               data: new FormData(this),
               dataType: 'json',
               contentType: false,
               cache: false,
               processData: false,
               success: function(response) {
                  if (response.status == 1) {
                     $('#messages_form_groups')[0].reset();
                     
                     // إزالة العنصر كاملا
                     $('#viewimg').remove();  
                      
                     // صورة جديدة فارغة
                     var newEmptyImg = '<img class="img-thumbnail" id="viewimg" style="display:none;">'; 
                     
                     // وضعها مكان السابقة
                     $('#messages_form_groups').insertBefore(newEmptyImg);
                  }
               }
            });
         });
      });
   </script>

بتاريخ منذ ساعة مضت قال Adnane Kadri:

لا يؤدي تغيير خاصية src إلى "إلغاء تحميل" مورد الصورة - بل سيزيل فقط ارتباطها بعنصر <img /> هذا . أي أن التغييرات لن تظهر مباشرة , بل ستظهر في حالة إعادة تحميل عنصر الصورة مجددا .  

لأن إعادة التحميل ليس شيئًا يمكنك تحقيقه بالصور ، و في الغالب أنك لا تريد حقًا "تفريغه". بل تحاول إخفاءه أو إزالته أو ربما إعادة تحميله ، ولكن عليك الاحتفاظ به لأسباب معينة . 

و لذلك سيتبقى حل أن تقوم بحذف الصورة كليا ثم إعادة تضمين صورة جديدة بعد عرضها و إرسال طلب الأجاكس . 

و لذلك سيكون الكود الخاص بالعملية كاملة مشابها للتالي : 

<!--  لنتأكد من تعريف الصورة -->
<img class="img-thumbnail" id="viewimg" style="display:none;">
<form id="messages_form_groups" enctype="multipart/form-data" class="form_msgs">
   <label for="file" title="صورة"> 
     
     <img src="images/photo_upload.png" /> 
   </label>
  
   <input name="picname" id="putname" type="hidden">
   <textarea class="textarea_msgs_groups" name="message" id="message" maxlength="350" placeholder="اكتب رسالة ....">
</textarea>
   
  <div class="myButton" title="ارسال">
      <input type="submit" name="submit_profile" value="">
   </div>
     
   <script>
      $("#messages_form_groups")
         .on('submit', function(e) {
            e.preventDefault();
            $.ajax({
               type: 'POST',
               url: 'send_pages/send_messages_form_groups.php',
               data: new FormData(this),
               dataType: 'json',
               contentType: false,
               cache: false,
               processData: false,
               success: function(response) {
                  if (response.status == 1) {
                     $('#messages_form_groups')[0].reset();
                     
                     // إزالة العنصر كاملا
                     $('#viewimg').remove();  
                      
                     // صورة جديدة فارغة
                     var newEmptyImg = '<img class="img-thumbnail" id="viewimg" style="display:none;">'; 
                     
                     // وضعها مكان السابقة
                     $('#messages_form_groups').insertBefore(newEmptyImg);
                  }
               }
            });
         });
      });
   </script>

 

بعد الارسال يتم ازالة الفورم كليا مع viewimg

بتاريخ 9 ساعات قال Adnane Kadri:

عذرا , قد ورد خطأ في الكود هنا بالضبط : 

$('#messages_form_groups').insertBefore(newEmptyImg);

فالمفروض أن يقوم هذا بـ تضمين العنصر الجديد قبل العنصر بالمعرف messages_form_groups , و هو ما نحتاجه و صوابه : 

$(newEmptyImg).insertBefore('#messages_form_groups');

قم باستبدال الخطأ بصوابه و أخبرني بالنتيجة 

شكرا حبيبي الغالي يعمل بنجاح