यहां छवि विवरण दर्ज करेंजब मैं एक बटन पर क्लिक करता हूं तो मैं एक मोडल खोलना चाहता हूं और उस मोडल में मैं कुछ डेटा दिखाना चाहता हूं जो मुझे सर्वर से मिल रहा है। मैं JSON का उपयोग कर रहा हूं एक नकली सर्वर के रूप में सर्वर और एक सीएसएस ढांचे के रूप में सीएसएस को अमल में लाना। मैं केवल आंशिक रूप से मोडल को खोलने और अपने डेटा का हिस्सा प्रदर्शित करने में सक्षम हूं। मुझे कंसोल में कोई त्रुटि नहीं दिख रही है। यह मेरे Github रेपो का लिंक है: https://github.com/Ivan3628/IT-logger-js

एचटीएमएल

<ul>
        <li>
          <a
            href="#tech-list-modal"
            class="btn-floating green modal-trigger tech-collection"
            ><i class="material-icons">person</i></a
          >
          <!--Tech list modal-->
          <div id="tech-list-modal" class="modal">
            <div class="modal-content">
              <h4>Technician List</h4>
              <ul class="collection" id="tech-workers"></ul>
            </div>
          </div>
        </li>
</ul>

App.js

const showTechList = () => {
  axios
    .get("http://localhost:5000/techs")
    .then(response => ui.showList(response.data))
    .catch(err => console.log(err));
};

document
  .querySelector(".tech-collection")
  .addEventListener("click", showTechList);

Ui.js

class UI {
  constructor() {
    this.techList = document.querySelector("#tech-workers");
  }
 showList(techs) {
    let output = "";

    techs.forEach(tech => {
      output += `
      <li class="collection-item">
      <div>
       ${tech.firstName} ${tech.lastName}
       <a href="#!" class="secondary-content delete-tech" data-id="${tech.id}">
          <i class="material-icons grey-text">delete</i>
        </a>
      </div>
    </li>`;
    });
    this.techList.innerHTML = output;
  }
}

export const ui = new UI();

डीबी.जेसन

{
"techs": [
    {
      "firstName": "Jennifer",
      "lastName": "Williams",
      "id": 1
    },
    {
      "firstName": "John",
      "lastName": "Doe",
      "id": 2
    },
    {
      "firstName": "Sam",
      "lastName": "Smith",
      "id": 3
    }
  ]
}
3
Ivan 21 फरवरी 2020, 20:02
1
"मैं केवल आंशिक रूप से मोडल खोलने और अपने डेटा का हिस्सा प्रदर्शित करने में सक्षम हूं" आप कौन सा भाग देख सकते हैं? क्या आप इसका स्क्रीनशॉट या कंसोल.लॉग() पोस्ट कर सकते हैं?
 – 
Cadu De Castro Alves
21 फरवरी 2020, 20:07
कृपया स्क्रीनशॉट जोड़ें
 – 
Rkv88 - Kanyan
21 फरवरी 2020, 20:50
अरे, यहां अधिक जानकारी की सख्त जरूरत है।
 – 
Sean Doherty
21 फरवरी 2020, 21:10
जब मैं एक बटन पर क्लिक करता हूं तो मैं एक मोडल खोलने में सक्षम हूं, लेकिन मैं केवल एक आइटम को देखने में सक्षम हूं और मेरे पास JSON सर्वर पर उनमें से तीन हैं। साथ ही वह आइटम हेडर के ऊपर दिखाई देता है और यह bellow होना चाहिए। मैंने एक पोस्ट किया मेरे जीथब रेपो से लिंक करें यदि आप चाहें तो पूरे ऐप को डाउनलोड कर सकते हैं और इसे अपने लिए देख सकते हैं, मैं छोटे रिज़ॉल्यूशन के साथ एक स्क्रीनशॉट पोस्ट करने का प्रयास करूंगा जैसा कि वे यहां अनुरोध करते हैं।
 – 
Ivan
22 फरवरी 2020, 12:43
आप प्रतिक्रिया में क्या प्राप्त कर रहे हैं। डेटा? क्या यह सिर्फ "तकनीक" की एक सरणी है, या संपत्ति "तकनीक" वाली वस्तु है, जिसमें एक सरणी है? यदि बाद वाला मामला है, तो मुझे लगता है कि आपको response.data.techs पर पुनरावृति करनी चाहिए, न कि response.data पर।
 – 
i.brod
22 फरवरी 2020, 15:36

2 जवाब

मैंने इसे हल किया। मुझे लगता है कि यह शायद भौतिक सीएसएस के साथ मुद्दा था। सामग्री प्रदर्शित करने के लिए सूची का उपयोग करने के बजाय मैंने अभी पंक्ति का उपयोग किया और सूचीबद्ध आइटम के बजाय मैंने डेटा के माध्यम से लूप करने के लिए col s12 का उपयोग किया।

एचटीएमएल

  <!--Technician list-->
          <div id="tech-list-modal" class="modal">
            <div class="modal-content">
              <h4>Technician list</h4>
              <div class="row" id="tech-workers"></div>
            </div>
          </div>

Ui.js

showList(techs) {
    let output = "";

    techs.forEach(tech => {
      output += `
     <div class="col s12">
      ${tech.firstName} ${tech.lastName}
       <a href="#!" class="secondary-content delete-tech" data-id="${tech.id}">
          <i class="material-icons grey-text">delete</i>
        </a>
        <div class="divider"></div>
      </div>

   `;
    });
    this.techList.innerHTML = output;
  }
0
Ivan 26 फरवरी 2020, 13:38

बस स्पष्ट होने के लिए, ul>li को materializcss में एक मोडल के अंदर रखने में कोई समस्या नहीं है। प्रदर्शित करने के लिए एक कोडपेन:

https://codepen.io/doughballs/pen/RwPpLZY

हम मोडल के अंदर एक खाली उल से शुरू करते हैं:

<!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <ul class="collection" id="tech-workers">
        <!-- no content! -->
      </ul>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">x</a>
    </div>
  </div>

गतिशील सामग्री उत्पन्न करने के लिए मैंने एक चयन का उपयोग किया है। यह कुछ भी हो सकता है - एक डेटाबेस कॉल, स्थानीय भंडारण, पृष्ठ सामग्री - कुछ भी। लेकिन इस डेमो के लिए चयन का उपयोग करना आसान है:

    <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Add 1 item</option>
      <option value="2">Add 2 items</option>
      <option value="3">Add 3 items
    </select>

फिर, जब चयन बदल जाता है, तो मैं मूल्य उठाता हूं और इसे उल में एक नया संग्रह-आइटम जोड़ने के लिए लूप के रूप में उपयोग करता हूं, इसे पहले साफ़ करता हूं ताकि हमारे पास हर बार एक नया मोडल हो।

$('select').on('change',function(){

    var selected = Number( $('select').find(":selected").val() );

    $('#tech-workers').empty();

      for(var i=1; i <= selected; i++ ) {
        $('#tech-workers').append(`<li class="collection-item">I am item number ${i}</li>`);
      }

    $('.modal').modal('open');

  });
0
Sean Doherty 26 फरवरी 2020, 14:34