堆棧內存溢出
  簡體   English   中英

向AJAX添加onclick函數

[英]Adding a onclick function to AJAX

 原文  2017-06-01 00:58:54  1   1    javascript/ jquery/ ajax

問題描述

所以我有5個Tab鍵和5個Tab容器。 每個容器都附加到一個AJAX，它將經度和緯度發送到我的php文件，在處理完之后，容器將顯示結果。 我沒有運氣將我的AJAX整合到一個功能中。 但是，有人可以幫我添加一個onclick函數給AJAX調用，所以它只在用戶點擊相應的標簽按鈕時執行嗎？

也

在第一個AJAX函數中獲取用戶位置后，我可以再次將這些變量用於另一個AJAX，而無需再次請求位置嗎？

這是我的網站： https ： //www.aarontomlinson.com

這是所需的代碼

AJAX功能 

$(document).ready(function(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showShopsSponsored);
    } else { 
        $('#ShopsSponsored').html('Geolocation is not supported by this browser.');

    }
});

function showShopsSponsored(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
     $(".spinner").show();
    $.ajax({
        type:'POST',
        url:'ShopsSponsored.php',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
               $("#ShopsSponsored").html(msg);
            }else{
                $("#ShopsSponsored").html('Not Available');
            }
             $(".spinner").hide();
        }
    });

}   



$(document).ready(function(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showShopsDistance);
    } else { 
        $('#ShopsDistance').html('Geolocation is not supported by this browser.');

    }
});

function showShopsDistance(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
     $(".spinner").show();
    $.ajax({
        type:'POST',
        url:'ShopsDistance.php',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
               $("#ShopsDistance").html(msg);
            }else{
                $("#ShopsDistance").html('Not Available');
            }
                 $(".spinner").hide();
        }
    });

}

用於TAB容器的HTML 

  <!-- TAB BUTTONS  -->
  <ul id="tabs" class="menu-left">
      <li><button2><a  id="tab1" ><div style="width:100vw;white-space:nowrap;overflow: hidden;">Suggested</div></a></button2></li>
    <li><button2><a id="tab2">Distance</a></button2></li>
    <li><button2><a id="tab3">Rating</a></button2></li>
    <li><button2><a id="tab4">OPEN</a></button2></li>
    <li><button2><a id="tab5">Delivery Price</a></button2></li>
  </ul>


<!-- TAB CONTAINERS  -->
<div class="tabcontainer" id="tab1C">
    <div style="position: relative;" id="ShopsSponsored">
        <div class="spinner">
          <div class="rect1"></div>
          <div class="rect2"></div>
          <div class="rect3"></div>
          <div class="rect4"></div>
          <div class="rect5"></div>
        </div>
    </div>
</div>

<div class="tabcontainer" id="tab2C">
    <div style="position: relative;" id="ShopsDistance">    
            <div class="spinner">
              <div class="rect1"></div>
              <div class="rect2"></div>
              <div class="rect3"></div>
              <div class="rect4"></div>
              <div class="rect5"></div>
        </div>
    </div>
</div>


// TAB CONTAINER SCRIPT
$(document).ready(function() {    

$('#tabs li a:not(:first)').addClass('inactive');
$('.tabcontainer').hide();
$('.tabcontainer:first').show();

$('#tabs li a').click(function(){
    var t = $(this).attr('id');
  if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

    $('.tabcontainer').hide();
    $('#'+ t + 'C').fadeIn('fast');
 }
});

});

**********我的目標*****************

我希望此功能加載頁面並將結果發送到容器，就像它一樣。 

$(document).ready(function(){
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showShopsSponsored);
} else { 
    $('#ShopsSponsored').html('Geolocation is not supported by this browser.');

}

}）; 

function showShopsSponsored(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
     $(".spinner").show();
    $.ajax({
        type:'POST',
        url:'ShopsSponsored.php',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
               $("#ShopsSponsored").html(msg);
            }else{
                $("#ShopsSponsored").html('Not Available');
            }
             $(".spinner").hide();
        }
    });

}

現在，我想在單擊TAB時加載此函數

功能 

function showShopsDistance(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
     $(".spinner").show();
    $.ajax({
        type:'POST',
        url:'ShopsDistance.php',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
               $("#ShopsDistance").html(msg);
            }else{
                $("#ShopsDistance").html('Not Available');
            }
                 $(".spinner").hide();
        }
    });

}

標簽 

<button2><a id="tab2">Distance</a></button2>

獎金積分

這個功能也可以在沒有請求位置的情況下編寫 而是使用第一個函數的位置變量？ 

$(document).ready(function(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showShopsDistance);
    } else { 
        $('#ShopsDistance').html('Geolocation is not supported by this browser.');

    }
});

function showShopsDistance(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
     $(".spinner").show();
    $.ajax({
        type:'POST',
        url:'ShopsDistance.php',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
               $("#ShopsDistance").html(msg);
            }else{
                $("#ShopsDistance").html('Not Available');
            }
                 $(".spinner").hide();
        }
    });

}

謝謝！ 這一次不應該是我必須保持失敗！

1 個解決方案

解決方案1
 0 已采納  2017-06-01 15:05:15

一些評論：

  • 我會使用active類而不inactive類，因為你只關心inactive類。

  • 您可能會發現對容器使用HTML5數據屬性很有用。 data-tab是選項卡及其容器的1-1映射。 data-url是將在AJAX請求中調用的url。

  • 我相信你只需要獲得一次地理定位。 因此，您可以獲得緯度和經度，並將它們存儲在某個位置，例如隱藏元素或localStorage 。 然后讓你的AJAX調用使用localStorage中存儲的任何內容。

未經測試但看起來像這樣：

HTML 

<!-- TAB BUTTONS  -->
<ul id="tabs" class="menu-left">
    <li class="active"><button2><a href="#" data-tab="ShopsSponsored"><div style="width:100vw;white-space:nowrap;overflow: hidden;">Suggested</div></a></button2></li>
    <li><button2><a href="#" data-tab="ShopsDistance">Distance</a></button2></li>
    <!-- etc -->
</ul>

<!-- TAB CONTAINERS  -->
<div class="tabcontainer active" data-tab="ShopsSponsored" data-url="ShopsSponsored.php">
    <div style="position: relative;">
        <div class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
    </div>
</div>
<div class="tabcontainer" data-tab="ShopsDistance" data-url="ShopsDistance.php">
    <div style="position: relative;">    
        <div class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
    </div>
</div>
<!-- etc -->

CSS 

/* by default, tabs should be hidden */
.tabs li, .tabcontainer {
    display: none;
}
/* only active ones should be visible */
.tabs li.active, .tabcontainer.active {
    display: block;
}

JavaScript的 

$(function () {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            saveCoordinates(position.coords);
        });
    } else { 
        // probably good idea to have some default geolocation since all your AJAX calls seem to rely on a geolocation
        saveCoordinates({ latitude: 1, longitude: 2 });
    }

    $('#tabs li a').click(function (e) {
        e.preventDefault();
        var link = $(this), 
            tab = link.closest('li'), 
            tabContainer = $('.tabcontainer[data-tab="' + link.data('tab') + '"]'),
            spinner = tabContainer.find('.spinner');
        // activate tab
        tab.addClass('active').siblings().removeClass('active');
        // activate tab container
        tabContainer.addClass('active').siblings().removeClass('active');
        // make AJAX call
        spinner.show();
        $.ajax({
            type: 'POST',
            url: tabContainer.data('url'), 
            data: { 
                latitude: localStorage.getItem('latitude'), 
                longitude: localStorage.getItem('longitude') 
            }, 
            success: function (msg) {
                spinner.hide();
                if (msg) {
                    tabContainer.find('> div').html(msg);
                } else {
                    tabContainer.find('> div').html('Not Available');
                }
            }
        });
    });

    function saveCoordinates(coords) {
        localStorage.setItem('latitude', coords.latitude);
        localStorage.setItem('longitude', coords.longitude);
    }
});

暫無
暫無

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

相關問題 Onclick函數的添加和減去 添加onClick到javascript函數 將另一個函數添加到 onclick 使用setAttribute（）添加“ onclick”函數 Ajax函數不發送數據onclick 將變量傳遞給Ajax中的onclick函數 AJAX 中的 OnClick Function 無法識別 通過Javascript向onclick事件添加功能！ onclick函數，用於通過javascript添加金額 將 onclick function 添加到單選按鈕
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM