मैं यह नहीं समझ सकता कि मुझे AJAX/jQuery अनुरोध से परिणामों का दोगुना क्यों मिल रहा है।

यहाँ एक स्क्रीनशॉट है - दोगुने परिणाम का स्क्रीनशॉट

निरीक्षक से, मैं देख सकता हूं कि HTML में तालिका दो बार प्रदान की जा रही है, लेकिन जब मैं कंसोल को देखता हूं तो यह केवल एक अनुरोध और एक परिणाम दिखाता है। सिर्फ एक उदाहरण, दो नहीं तो ऐसा लगता है कि इसे दो बार नहीं बुलाया जा रहा है।

यहाँ अनुरोध के लिए कोड है:

function a_function_name(id) {          
    jQuery.ajax({
        type: 'post',
        url: my_ajax.ajax_url,      
        data: {
            action: 'myfunction',
            fid : id
        },      
    success: function (data) {
        jQuery('#jx-loading').hide();
    
        var $newTR = jQuery("<table id='mynewtable'>")
        var $newTD = jQuery("<td>",{id:'option',html:data, colspan:7}) 
        $newTR.append($newTD)

        jQuery('#options > tbody').append($newTR.insertAfter(jQuery('[data-id="' + id + '"]'))) 
    }
});

अनुरोध के रूप में एचटीएमएल:

<table id="options">
  <thead>
    <tr>
      <th>column1 </th>
      <th>column2 </th>
      <th>column3 </th>
      <th>column4 </th>

    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

नमूना data प्रतिक्रिया पेलोड -

<tr>
  <td>2</td>
  <td>Two</td>
  <td><select id='name' name='change' onchange='SelectChanged(this)'>
      <option value=person&nbsp;last name>person&nbsp;lastname</option>
      <option value=person&nbsp;lastname>person&nbsp;lastname</option>
    </select></td>
  <td><button id='btn1' class='button' onclick='dosomething(7, 46)'><i class='icon fas fa-globe'></i></button></td>
</tr>
<tr>
  <td>3</td>
  <td>Two</td>
  <td><select id='name' name='change' onchange='SelectChanged(this)'>
      <option value=person&nbsp;lastame>person&nbsp;lastame</option>
      <option value=person&nbsp;lastame>person&nbsp;lastame</option>
    </select>
  </td>
  <td><button id='btn1' class='button' onclick='dosomething(8, 46)'><i class='icon fas fa-globe'></i></button></td>
</tr>
<tr>
  <td>5</td>
  <td>Top</td>
  <td><select id='name' name='change' onchange='Changed(this)'>
      <option value=person&nbsp;lastame>person&nbsp;lastame</option>
      <option value=person&nbsp;lastame>person&nbsp;lastame</option>
    </select>
  </td>
  <td><button id='btn1' class='button btn' onclick='dosomething(10, 46)'><i class='icon fas fa-globe'></i></button></td>
</tr>

संपादित करें -

तो अन्य लोग मेरी सोच को देख सकते हैं जो अति जटिल होने की ओर ले जाती है:

मुझे लगा कि लाइन में कहीं न कहीं ऐसा ही रहा होगा। ताकि भविष्य में अन्य लोग मेरी विचार प्रक्रिया को समझ सकें जो यहां ले जाती है - और ऐसा करने से बचने के लिए, मैंने जिस मुद्दे से शुरुआत की थी, वह तालिका के एक कॉलम में सभी डेटा फंस गया था जिसे मैं जोड़ रहा था। मुझे अंततः सामग्री को अपनी तालिका में मिला, लेकिन सामग्री एक पंक्ति में प्रारूपित नहीं होगी। इसलिए मैंने सामग्री को एक पंक्ति में रखने के लिए पंक्ति var जोड़ा, जो तालिका के अंदर, संलग्न तत्व के अंदर बन गया। यह स्पष्ट रूप से जटिल से अधिक हो गया

0
user14955679 11 जिंदा 2021, 22:45
तो आप एक टेबल बनाते हैं और इसे टीआर कहते हैं और आप टेबल पर टीडी जोड़ते हैं? var $newTR = jQuery("<table id='options-table'>") <-- हुह??
 – 
epascarello
11 जिंदा 2021, 22:51
F12 देव टूल्स -> नेटवर्क टैब . का निरीक्षण करके आप यह सत्यापित कर सकते हैं कि AJAX कॉल कितनी बार हो रही है
 – 
devlin carnate
11 जिंदा 2021, 22:53
सही। मुख्य तालिका है और उसके नीचे मुख्य तालिका के अंदर तालिका है। यदि कोई बेहतर तरीका है तो मैं सभी के कान हूं और सीखने में प्रसन्न हूं
 – 
user14955679
11 जिंदा 2021, 22:53
मजेदार है कि #options एक <table> लगता है और newTR भी एक <table>... तो ऐसा लगता है कि आप insertAfter और append हैं <table> newTR... -- गलत तर्क और गलत नामकरण के मिश्रण के साथ यहां कुछ भी घटाना असंभव है। अपना HTML पोस्ट करें
 – 
Louys Patrice Bessette
11 जिंदा 2021, 22:54
1
अनुरोध के अनुसार data जोड़ा गया
 – 
user14955679
11 जिंदा 2021, 23:18

1 उत्तर

सबसे बढ़िया उत्तर

तो अजाक्स अनुरोध तालिका की संपूर्ण सामग्री (<tbody> सामग्री) को प्रतिस्थापित कर रहा है...

यह आपके द्वारा पोस्ट किए गए कोड से इसे आसान बनाता है।

// Assuming this would be received by Ajax
let data = `<tr>
  <td>2</td>
  <td>Two</td>
  <td><select id='name' name='change' onchange='SelectChanged(this)'>
      <option value=person&nbsp;last name>person&nbsp;lastname</option>
      <option value=person&nbsp;lastname>person&nbsp;lastname</option>
    </select></td>
  <td><button id='btn1' class='button' onclick='dosomething(7, 46)'><i class='icon fas fa-globe'></i></button></td>
</tr>
<tr>
  <td>3</td>
  <td>Two</td>
  <td><select id='name' name='change' onchange='SelectChanged(this)'>
      <option value=person&nbsp;lastame>person&nbsp;lastame</option>
      <option value=person&nbsp;lastame>person&nbsp;lastame</option>
    </select>
  </td>
  <td><button id='btn1' class='button' onclick='dosomething(8, 46)'><i class='icon fas fa-globe'></i></button></td>
</tr>
<tr>
  <td>5</td>
  <td>Top</td>
  <td><select id='name' name='change' onchange='Changed(this)'>
      <option value=person&nbsp;lastame>person&nbsp;lastame</option>
      <option value=person&nbsp;lastame>person&nbsp;lastame</option>
    </select>
  </td>
  <td><button id='btn1' class='button btn' onclick='dosomething(10, 46)'><i class='icon fas fa-globe'></i></button></td>
</tr>`

function a_function_name(id) {

  // I'm "simulating" the ajax response here.
  // So here is what should be in the "success" callback

  jQuery('#jx-loading').hide();
  $("#options tbody").html(data)

  // Yes... Just that!

}

a_function_name()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="options">
  <thead>
    <tr>
      <th>column1 </th>
      <th>column2 </th>
      <th>column3 </th>
      <th>column4 </th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

अतिरिक्त स्पष्टीकरण:

अब टेबल आपके कोड के साथ दो बार क्यों दिखाई दे रही थी?

ध्यान दें कि लाइन:

jQuery('#options > tbody').append($newTR.insertAfter(jQuery('[data-id="' + id + '"]')))

इस चयनकर्ता द्वारा लक्षित एक तत्व के बाद newTR डाला गया है: [data-id="' + id + '"] में $newTR.insertAfter(jQuery('[data-id="' + id + '"]'))

फिर इसे जोड़ा जाता है क्योंकि .insertAfter $newTR तत्व को निष्पादित करने के बाद लौटाता है... तो एक दूसरे "चरण" में यह आपके जैसा है: jQuery('#options > tbody').append($newTR)

0
Louys Patrice Bessette 12 जिंदा 2021, 00:12
विस्तृत उदाहरण के लिए धन्यवाद। मैं पुष्टि कर रहा हूं कि मुझे success function में जो कुछ है उसे हटा देना चाहिए और केवल `$("#options tbody").html(data)` से बदल देना चाहिए, सही है?
 – 
user14955679
11 जिंदा 2021, 23:43
हां.. मुझे नहीं पता कि आपने यहां कुछ तत्व बनाने की कोशिश क्यों की। आपने समस्या को और जटिल कर दिया है (लेकिन चिंता न करें, यह बहुतों के साथ होता है)
 – 
Louys Patrice Bessette
11 जिंदा 2021, 23:45
मुझे लगा कि लाइन में कहीं न कहीं ऐसा ही रहा होगा। ताकि भविष्य में अन्य लोग मेरी विचार प्रक्रिया को समझ सकें जो यहां ले जाती है - और ऐसा करने से बचने के लिए, मैंने जिस मुद्दे से शुरुआत की थी, वह सभी data तालिका के एक कॉलम में फंस गया था जिसे मैं जोड़ रहा था . मुझे अंततः सामग्री को अपनी तालिका में मिला, लेकिन सामग्री एक पंक्ति में प्रारूपित नहीं होगी। इसलिए मैंने सामग्री को एक पंक्ति में रखने के लिए पंक्ति var जोड़ा, जो तालिका के अंदर, संलग्न तत्व के अंदर बन गया। यह स्पष्ट रूप से जटिल से अधिक हो गया
 – 
user14955679
11 जिंदा 2021, 23:47
1
यह इंगित करने के लिए कि यह कितना आसान हो सकता था और अनावश्यक जटिलता की परतों को हटाने में मदद करने के लिए बहुत-बहुत धन्यवाद।
 – 
user14955679
11 जिंदा 2021, 23:48
मैंने आपके कोड के साथ दो बार दिखाई देने वाली तालिका के बारे में कुछ स्पष्टीकरण जोड़े हैं। उम्मीद है कि यह मदद करता है।
 – 
Louys Patrice Bessette
12 जिंदा 2021, 00:12