• 0

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

السلام عليكم

في البرنامج التالي يتم ارسال رسالة لقاعدة البيانات ربما تحتوي معها صورة ويتم عرض الصورة قبل رفعها

<img class="img-thumbnail" id="viewimg" style="display:none;">

بعد الارسال يتم تفريغ حقل النص

$('#messages_form_groups')[0].reset();

المشكلة ان الصورة المعروضة تظل عالقة ولا تختفي الا بعد اعادة تحميل الصفحة

كيف يمكن ازالة عرضالصورة بعد الارسال كما حدث للنص فى منطقة textarea

<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();
}
}
});
});
});
</script>

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1
بتاريخ منذ ساعة مضت قال Hamada Ahmed:

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

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

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

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

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

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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

لا يؤدي تغيير خاصية 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>

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ منذ ساعة مضت قال 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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 9 ساعات قال Adnane Kadri:

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


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

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


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

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

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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن