Clever Geek Handbook

Adding onclick function to AJAX

So I have 5 Tab buttons and 5 Tab containers. Each container connects to AJAX, which sends longitude and latitude to my php file, and after processing it, the container will display the results. I have no luck bundling my AJAX into one function. However, can anyone help me add an onclick function to the AJAX call so that it only executes when the user clicks the corresponding tab button?

and

After getting the location of the users in the first AJAX function, can I use these variables again for another AJAX without asking for the address again?

Here is my website: https://www.aarontomlinson.com

Here is the required code

AJAX FUNCTIONS

$(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();
        }
    });

}

HTML FOR CONTAINERS TAB

  <!-- 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');
 }
});

});

********** MY GOAL *****************

I want this function to load into the page and send the results to the container as it does.

$(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();
        }
    });

}

Now I want this function load WHEN I press TAB

function

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

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

BONUS POINTS

Could this function also be written without asking for space? Instead of using location variables from the first function?

$(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();
        }
    });

}

THANK! THIS ONE SHOULD NOT BE WHAT I WISH TO STORE URGENTLY!

+3


source to share


1 answer


Some notes:

  • I would use a class active

    instead of a class inactive

    since you really only care about the active one.

  • You may find it helpful to use HTML5 data attributes for your containers. data-tab

    - 1-1 display for tabs and their containers. data-url

    is the URL that will be called in the AJAX request.

  • I believe you only need to get hold of geolocation. This way you can get latitude and longitude and store it somewhere like hidden element or localStorage . Then your AJAX calls use whatever is stored in localStorage.

Unconfirmed, but it would look something like this:

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);
    }
});
0


source






More articles:


All Articles