Как добавить мои данные ajax на карты bootstrap4

Это моя часть файла html (ejs), и у меня есть несколько форм карточек (например, ID = myContent1, myContent2, myContetn3 ...), они получают данные ajax при переключении i class = icon .... когда функция (переключатель) активирована, получено сопоставление данных ajax с номером myContent (например, получен идентификатор данных ajax 1 с myContent1 и 2 для myContent2 ... и т. д.).

Что я хочу сделать, так это то, что данные ajax должны загружаться при выполнении моего html файла и автоматически сопоставляться с моими карточными формами (на основе идентификатора карточки №)

нужна ваша помощь.

   <div class="col-sm-6">
        <div class="card">
          <div class="card-header" id="cardHeader3" style="visibility: hidden;">unSaved</div>
          <div class="card-body">
            <i class="icon-plus icons font-2xl" id="icon3" style="font-size: 5rem !important;margin-left: 46%;cursor:pointer;" onclick="toggler('myContent_3');"></i>
            <div id="myContent_3" class="card-title" style="display: none;">
              <form action="" method="post">
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">sequence</span>
                    </div>
                    <input type="text" id="notiSeq_3" name="notiSeq" class="form-control" value="">
                    <div class="input-group-append">
                    <span class="input-group-text">
                      <i class="fa fa-sort-numeric-asc"></i>
                    </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">title</span>
                    </div>
                    <input type="text" id="title_3" name="title" class="form-control" value="">
                    <div class="input-group-append">
                    <span class="input-group-text">
                      <i class="fa fa-tumblr"></i>
                    </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">Link</span>
                    </div>
                    <input type="text" id="link_3" name="link" class="form-control" value="">
                    <div class="input-group-append">
                    <span class="input-group-text">
                      <i class="fa fa-hand-o-left"></i>
                    </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">exposureTime</span>
                    </div>
                    <input type="text" id="notiTime_3" name="notiTime" class="form-control" value="" readonly style="background-color:#FFFFFF">
                    <div class="input-group-append">
                    <span class="input-group-text">
                      <i class="cui-calendar"></i>
                    </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">Urgency</span>
                    </div>
                    <select class="form-control" id="viewYn_3" defaultValue="N">
                      <option value="N">N</option>
                      <option value="Y">Y</option>
                    </select>
                    <div class="input-group-append">
                    <span class="input-group-text">
                      <i class="icon-eye icons"></i>
                    </span>
                    </div>
                  </div>
                </div>
                <div class="form-group form-actions">
                  <button type="button" class="btn btn-primary" onclick ="save('3')">Save</button>
                  <button type="button" class="btn btn-secondary" onclick="del('3')">Delete</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

И это моя часть js файла. в настоящее время он работает, когда формы карточек переключаются.

function toggler(divId) {
   var tempId = divId.slice(-1);
   var x = document.getElementById("icon" + tempId);
   var y = document.getElementById("cardHeader" + tempId);

  $.ajax({
    url: GW_URL+'/myRestAPI/get/'+tempId,
    type:'get',
    contentType: "application/json",
    dataType : "json",
    cache: false,
    success : function(data){
        $("#notiSeq_" + tempId).val(data.exposureNo);
        $("#title_" + tempId).val(data.title);
        $("#link_" + tempId).val(data.link);
        $("#notiTime_" + tempId).val(data.exposureTime + " - " + data.exposureTime2);
        $("#viewYn_" + tempId).val(data.urgency);

    },
    error : function(jqXHR, textStatus, errorThrown){
        console.log(jqXHR.responseText);
    }
});

Можете объяснить, что не работает?

imBlue 13.09.2018 18:19
1
1
339
0

Другие вопросы по теме