堆棧內存溢出
  簡體   English   中英

在 AJAX 調用后單擊更改變量

[英]Change variables on click after AJAX call

 原文  2019-12-30 16:30:17  1   1    javascript/ php/ jquery/ html/ ajax

問題描述

我無法找到我面臨的這個問題的答案或解決方案。 所以我制作了一個腳本（php & jquery），允許用戶在我的網站上宣傳他們的“列表”。 所以當他們登陸一個頁面時，他們可以選擇他們想要推廣的列表，然后當他們選擇它時，jquery 調用 AJAX（在選擇更改時），然后調用 php 頁面並獲取所選列表的計划。 由於我使用的是 PayPal Standard，因此我只能通過一個輸入傳遞變量（我將所有變量存儲在一個自定義輸入中，然后在 php 頁面上將它們作為數組讀取）。 一切正常，當列表更改時，我的列表 ID 會更改，當他們在輸入中更改時，天數也會更改，但不起作用的是復選框。

所以在數據庫中，我在列表表（特色、頂部搜索、側邊欄）下有三列，默認情況下它們的值為 0。所以在頁面上我禁用了所有已經通過從數據庫中獲取值的計划，然后如果值為 0 表示計划可用於推廣，如果值為 1，則表示已推廣，禁用推廣。 現在，當為某個計划選中復選框時，它會將復選框值更改為 1，然后計划是更新列表，例如，如果用戶選擇側邊欄，它會將列從 0 更新為 1。但是無論我做什么， var featured 、 var topsearch和var sidebar在我的 AJAX 調用中點擊后不會改變。 它更新復選框輸入值，但不會反映在我的 AJAX 調用中。

jQuery：

$('.select-placement').hide();
  $('.s-b').hide();
  $('#count-duration').text('0');

  $("#pick_listing, #no-text, #customCheck1, #customCheck2, #customCheck3").change(function() {
    var selectedValue = $('#pick_listing').val();
    $.ajax({
    url: '../paypal/promote/promote.php',
    type: 'POST',
    data: {selectedValue: selectedValue},
    success: function(data) {
    $('.select-placement').show();
    $(".select-results").html(data);
    $('.s-b').show();

    let ajax_duration = parseFloat($('#no-text').val() || '0');
    if (ajax_duration == 1) {
    $('#count-duration').text(ajax_duration + " day");
    } else {
    $('#count-duration').text(ajax_duration + " days");
    }

   // Changes checkbox value if its checked -- NOT WORKING
   if ($('#customCheck1').is(':checked')) {
      $("#customCheck1").val("1");
   } else { 
      $("#customCheck1").val("0");
   }

   if ($('#customCheck2').is(':checked')) {
      $("#customCheck2").val("1");
   } else { 
      $("#customCheck2").val("0");
   }

   if ($('#customCheck3').is(':checked')) {
      $("#customCheck3").val("1");
   } else { 
      $("#customCheck3").val("0");
   }

    var duration_value = $('#no-text').val();
    var listing = $('#pick_listing').val();
    var featured = $('#customCheck1').val(); // It should update when the checkbox is checked
    var topsearch = $('#customCheck2').val(); // It should update when the checkbox is checked
    var sidebar = $('#customCheck3').val(); // It should update when the checkbox is checked

    // This is the custom PayPal input in which I store all the collected variables 
   // All variables changes on change function instead of checkbox 
    $('input[name=custom]').val("<?php echo $current_token; ?>," + listing + "," + duration_value + "," + featured + "," + topsearch + "," + sidebar);

    $('#tots').text("0");
    $('#tots2').text("0");
    $('#icon1').css('color','#ccc');
    $('#icon2').css('color','#ccc');
    $('#icon3').css('color','#ccc');
    }
    });
});

推廣.php文件：

$placement_token = $_POST['selectedValue']; // Getting the value from AJAX

// Call the promote options
$listing_placement = mysqli_query($conn, "SELECT featured, topsearch, sidebar FROM listing WHERE listing_token='$placement_token'"); ?>
<form id="custom-form" class="row row-placement">
<?php while($place_row = mysqli_fetch_row($listing_placement)) { 
    if ($place_row[0] == 1) { ?>
  <div class="col-sm-4 listing-disabled">
    <div class="select-ad disabled-ad">
      <div class="already-promoted">Already Promoted</div>
      <div class="ad-image">
        <div class="lp-select-top input-group margin-right-0 clearfix">
          <div class="custom-control custom-checkbox cst-check">
    <input type="checkbox" class="custom-control-input checks" id="customCheck1" data-price="10" value="1">
            <label class="custom-control-label" for="customCheck1"></label>
          </div>
        </div>
        <img src="https://classic.listingprowp.com/wp-content/themes/listingpro/assets/images/spotlight.png">
      </div>
      <div class="price-content">
        <h5>Featured</h5>
        <label for="customCheck1">$10 / day</label>
      </div>
    </div>
  </div>
<?php } else { ?> 
    <div class="col-sm-4">
    <div class="select-ad active-ad">
      <div class="ad-image">
        <div class="lp-select-top input-group margin-right-0 clearfix">
          <div class="custom-control custom-checkbox cst-check">
            <input type="checkbox" class="custom-control-input checks" id="customCheck1" data-price="10" value="0">
            <label class="custom-control-label" for="customCheck1"></label>
          </div>
        </div>
        <img src="https://classic.listingprowp.com/wp-content/themes/listingpro/assets/images/spotlight.png">
      </div>
      <div class="price-content">
        <h5>Featured</h5>
        <label for="customCheck1">$10 / day</label>
      </div>
    </div>
  </div>
<?php } if ($place_row[1] == 1) { ?>
<div class="col-sm-4 listing-disabled">
  <div class="select-ad disabled-ad">
    <div class="already-promoted">Already Promoted</div>
    <div class="ad-image">
      <div class="lp-select-top input-group margin-right-0 clearfix">
        <div class="custom-control custom-checkbox cst-check">
          <input type="checkbox" class="custom-control-input checks" id="customCheck2" data-price="50" value="1">
          <label class="custom-control-label" for="customCheck2"></label>
        </div>
      </div>
      <img src="https://classic.listingprowp.com/wp-content/themes/listingpro/assets/images/topofsearch.png">
    </div>
    <div class="price-content">
      <h5>Top of Search</h5>
      <label for="customCheck2">$50 / day</label>
    </div>
  </div>
</div>
<?php } else { ?>
<div class="col-sm-4">
  <div class="select-ad active-ad">
    <div class="ad-image">
      <div class="lp-select-top input-group margin-right-0 clearfix">
        <div class="custom-control custom-checkbox cst-check">
          <input type="checkbox" class="custom-control-input checks" id="customCheck2" data-price="50" value="0">
          <label class="custom-control-label" for="customCheck2"></label>
        </div>
      </div>
      <img src="https://classic.listingprowp.com/wp-content/themes/listingpro/assets/images/topofsearch.png">
    </div>
    <div class="price-content">
      <h5>Top of Search</h5>
      <label for="customCheck2">$50 / day</label>
    </div>
  </div>
</div>
<?php } if ($place_row[2] == 1) { ?>
<div class="col-sm-4 listing-disabled">
  <div class="select-ad disabled-ad">
    <div class="already-promoted">Already Promoted</div>
    <div class="ad-image">
      <div class="lp-select-top input-group margin-right-0 clearfix">
        <div class="custom-control custom-checkbox cst-check">
          <input type="checkbox" class="custom-control-input checks" id="customCheck3" data-price="20" value="1">
          <label class="custom-control-label" for="customCheck3"></label>
        </div>
      </div>
      <img src="https://classic.listingprowp.com/wp-content/themes/listingpro/assets/images/listingsidebar.png">
    </div>
    <div class="price-content">
      <h5>Sidebar</h5>
      <label for="customCheck3">$20 / day</label>
    </div>
  </div>
</div>
<?php } else { ?>
<div class="col-sm-4">
  <div class="select-ad active-ad">
    <div class="ad-image">
      <div class="lp-select-top input-group margin-right-0 clearfix">
        <div class="custom-control custom-checkbox cst-check">
          <input type="checkbox" class="custom-control-input checks" id="customCheck3" data-price="20" value="0">
          <label class="custom-control-label" for="customCheck3"></label>
        </div>
      </div>
      <img src="https://classic.listingprowp.com/wp-content/themes/listingpro/assets/images/listingsidebar.png">
    </div>
    <div class="price-content">
      <h5>Sidebar</h5>
      <label for="customCheck3">$20 / day</label>
    </div>
  </div>
</div>
<?php } } ?> 
</form>

我真的很困惑，因為var duration_value和var selectedValue在每次更改時都會更新，但 checkboxese 不會。 我已經讀到我應該使用document on change而不是僅僅change功能，但我嘗試過，但沒有幫助。 我知道發布的問題很混亂，但我無法在 jsfiddle 中復制它，抱歉。 我只需要解決可能是什么原因持有復選框來更改其在 CHANGE 上的值。

問候

1 個解決方案

解決方案1
 1 已采納  2019-12-30 16:42:31

復選框在 html 和 Javascript/JQuery 中的處理方式不同。 值不是你想在這里改變的。 您想根據復選框屬性設置變量的值。

根據您的反饋，我更新了代碼，其中選擇更改使 ajax 調用基於選定的值啟動表單。 然后在更改表單中的任何輸入時，這些值被讀回以格式化隱藏字段的字符串。

 $('.select-placement').hide();
  $('.s-b').hide();
  $('#count-duration').text('0');

  $("#pick_listing").change(function() {
    var selectedValue = $('#pick_listing').val();
    $.ajax({
       url: '../paypal/promote/promote.php',
       type: 'POST',
       data: {selectedValue: selectedValue},
       success: function(data) {
          $('.select-placement').show();
          $(".select-results").html(data);
          $('.s-b').show();  

          $('#tots').text("0");
          $('#tots2').text("0");
          $('#icon1').css('color','#ccc');
          $('#icon2').css('color','#ccc');
          $('#icon3').css('color','#ccc');
       }        
    });
  });

  $("#no-text, #customCheck1, #customCheck2, #customCheck3").change(function() {
      let ajax_duration = parseFloat($('#no-text').val() || '0');
      if (ajax_duration == 1) {
         $('#count-duration').text(ajax_duration + " day");
      } else {
         $('#count-duration').text(ajax_duration + " days");
      }

      var duration_value = $('#no-text').val();
      var listing = $('#pick_listing').val();
      var featured = ($('#customCheck1').prop('checked')) ? "1" : "0";
      var topsearch = ($('#customCheck2').prop('checked')) ? "1" : "0";
      var sidebar = ($('#customCheck3').prop('checked')) ? "1" : "0";

      // This is the custom PayPal input in which I store all the collected variables 
      // All variables changes on change function instead of checkbox 
      $('input[name=custom]').val("<?php echo $current_token; ?>," + listing + "," + duration_value + "," + featured + "," + topsearch + "," + sidebar);


  });

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用ajax在單擊處理程序之后調用單擊處理程序 如何從ajax調用更改php變量？ 在ajax調用后訪問post變量 在ajax調用后更新javascript變量 Ajax調用后，點擊事件不起作用 單擊按鈕后未完成Ajax調用 ajax調用后jQuery重新綁定click事件 jQuery觸發Ajax調用后的點擊 Modalbox-Ajax調用后.click事件不起作用 ajax調用后點擊使用不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM