DIV में प्रपत्र सबमिट के माध्यम से jQuery लोड relaoding सामग्री div




html replace (2)

मुझे लगता है कि यह आपकी सहायता करेगा:

function submit()
{
 $.ajax({
      type:'POST',
      url: "your url to submit",
      data: ({param_1:somevar}),    
      dataType:"json",  
      beforeSend: function(){ //do something here }
          success: function(return){ //do something here }
 });
}

और किसी भी सबमिट बटन को मत डालें आप इसके साथ प्रस्तुत फ़ंक्शन को कॉल कर सकते हैं:

$('#button').click(function(){
        submit(somevalue);  
      });

मैं एक मैसेजिंग सिस्टम पर काम कर रहा हूं मैंने इनबॉक्स और संदेश देखने के भाग समाप्त कर दिए हैं I वे उपयोगकर्ता खाते पृष्ठ पर एक div में लोड किए जाते हैं और यह सभी पृष्ठ को रीफ्रेश करने के साथ काम करता है।

मैं इस लेख पर इस के लिए jquery आधारित है।

संदेश लिंक पाने के लिए संदेश लिंक को पृष्ठ को रीफ्रेश करने के साथ ही यहां कुछ मदद मिलती है, और प्रोफ़ाइल लिंक को वास्तव में रीफ्रेश करने के लिए और वास्तविक प्रोफ़ाइल पेज पर जाने के लिए एक फिल्टर कैसे जोड़ें। यह सब अच्छा है

मैं बाहरी संदेश को लोड करने के लिए संदेश भेजने वाला पक्ष ले गया जो एक मोडल (ट्विटर बूटस्ट्रैप) का उपयोग करता है। यह भी काम करता है, परन्तु अब मैंने कई सालों से बाहर काम करने की कोशिश की है, लिंक्स के साथ मैंने यही काम किया है, साथ ही फॉर्म जमा कर दिया है या फिर पूरे पृष्ठ को रीफ्रेश करने के लिए इसे सबमिट करना। दोबारा, मैं इनबॉक्स भाग पर बहुत ही समान jQuery का प्रयोग कर रहा हूं।

यहां इनबॉक्स कोड है:

<p id="waiting"><!-- ajax loading --></p>
<div class="messages"><!-- inbox --></div>

जावास्क्रिप्ट:

$.ajaxSetup({ cache: false});
$(document).ready(function(){
    // set up the click event
    $('a.loader').live('click', function() {
        var toLoad = '<? echo base_url(); ?>user/messaging/';
        $('.messages').fadeOut(100, loadContent);
        $('#load').remove();
        $('#waiting').append('<div id="load" style="height: 700px; background:url(<? echo base_url(); ?>files/recordCovers/index.html?<? echo rand(5,1555); ?>); background-size: cover;"><div class="circle"></div><div class="circle1"></div></div>');
        $('#load').fadeOut(1000);

        function loadContent() {
            $('.messages').load(toLoad, '', function(response, status, xhr) {
                if (status == 'error') {
                    var msg = "Sorry but there was an error: ";
                    $(".messages").html(msg + xhr.status + " " + xhr.statusText);
                }            
            }).fadeIn(4000, hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut(2000);
        }
        return false;
    });
});

<? // this makes the links open in the same div
// a:not(.profile) allows profile links to open in browser window
// we put class="profile" on profile links.?>
$(".messages").on("click", "a:not(.profile)", function (e) {
    $(".messages").load($(this).attr("href"));
    e.preventDefault();
});

यदि आप एक सामान्य रूप रखना चाहते हैं और केवल सबमिशन ईवेंट पर कब्जा करना चाहते हैं तो आप ऐसा कुछ कर सकते हैं:

http://jsfiddle.net/ufomammut66/uPvYx/2/

असल में उस फॉर्म को सबमिट करने पर हम तुरंत सबमिट करने के बजाय एक फ़ंक्शन चलाने के लिए जा रहे हैं। हम एक एजेक्स कॉल भेजते हैं (अपना फॉर्म डेटा जमा कर) और फिर return false । झूठे लौटाने से पृष्ठ को फ़ॉर्म जमा करने से रोक दिया जाएगा (इस बिंदु पर इसे फिर से सबमिट करना होगा क्योंकि हम इसे एजेक्स के साथ सबमिट किया है)। तो आप अपने सभी तर्क, अपने एजेक्स कॉल, कोई अतिरिक्त चेक / प्रोसेसिंग कर सकते हैं, तो सबमिशन को रोकने के लिए झूठी वापसी कर सकते हैं।

मैंने वहां थोड़ी अधिक जोड़ दिया, अगर आप कुछ त्रुटि पुनर्प्राप्ति या एजेक्स सबमिट के इस्तेमाल के आस-पास के हालात चाहते हैं यदि आप झूठे के बदले सही वापस आते हैं, तो पृष्ठ उस प्रपत्र के साथ जारी रहेगा और उस पृष्ठ पर रीडायरेक्ट करेगा। इसलिए यदि आपके पास एजेक्स सबमिशन को अक्षम करने के लिए एक मोड है तो आप यहां इसका उपयोग कर सकते हैं। मैंने अवधारणा के सबूत के रूप में एक बकवास की जांच की। आप इसे जांचने के लिए उस चेक के साथ खेल सकते हैं।





hyperlink