Only one ajax script works while I have two

Question

I got two loadmore scripts that each are called by different buttons. But the second button loads the content that should be loaded by the first button, while the first button works fine.

This is how my html setup is (only the relevant code without the php inside etcetera)

<div class="row" id="loadprojects">
    <div class="col-md-2 col-md-offset-5" id="loadmoreprojects">
        <a href="javascript:;"><button class="btn btn-info">Bekijk meer projecten</button></a>
    </div>
</div>

<div class="row" id="loadnews">
    <div class="col-md-2 col-md-offset-5" id="loadmore">
        <a href="javascript:;"><button class="btn btn-info">Bekijk meer websites</button></a>
    </div>
</div>

In the footer these scripts are loaded:

<script src="assets/js/loadmore.js"></script>
<script src="assets/js/loadmore_projects.js"></script>

And these are my two scripts:

(loadmore.js)

/*
Meer websites laden
*/
var limit = 3;

$('#loadmore').click(function() {
    limit += 3;

    ajax();

});

var posts = document.getElementById('loadnews');

function ajax() {
    $.ajax({
    url: 'includes/loadmore.php',
    type: "POST",
    data: {limit: limit},
    success: function(data){
        loadnews.innerHTML = data;
    },
    error: function(jqXHR, exception) {
              if (jqXHR.status === 0) {
                   alert('Not connect.\n Verify Network.');
               } else if (jqXHR.status == 404) {
                   alert('Requested page not found. [404]');
               } else if (jqXHR.status == 500) {
                   alert('Internal Server Error [500].');
               } else if (exception === 'parsererror') {
                   alert('Requested JSON parse failed.');
               } else if (exception === 'timeout') {
                   alert('Time out error.');
               } else if (exception === 'abort') {
                   alert('Ajax request aborted.');
               } else {
                   alert('Uncaught Error.\n' + jqXHR.responseText);
               }
           }
    }); 
}

ajax();

(loadmore_projects.js)

/*
Meer projecten laden
*/
var limit = 4;

$('#loadmoreprojects').click(function() {
    limit += 4;

    ajax();

});

var posts1 = document.getElementById('loadprojects');

function ajax() {
    $.ajax({
    url: 'includes/loadmore_projects.php',
    type: "POST",
    data: {limit: limit},
    success: function(data){
        loadprojects.innerHTML = data;
    },
    error: function(jqXHR, exception) {
              if (jqXHR.status === 0) {
                   alert('Not connect.\n Verify Network.');
               } else if (jqXHR.status == 404) {
                   alert('Requested page not found. [404]');
               } else if (jqXHR.status == 500) {
                   alert('Internal Server Error [500].');
               } else if (exception === 'parsererror') {
                   alert('Requested JSON parse failed.');
               } else if (exception === 'timeout') {
                   alert('Time out error.');
               } else if (exception === 'abort') {
                   alert('Ajax request aborted.');
               } else {
                   alert('Uncaught Error.\n' + jqXHR.responseText);
               }
           }
    }); 
}

ajax();

I checked all names, why is it that when I click on the second button, the first script is initiated? And not the correct one that has the same id in it as the button.

Answer 1

Explanation.

To avoid variables overriding we can use immidiatly invoke function declaration like this:

(function(){}(
..code goes there
));

Because all functions have their own visibility scope, variable from other function will not see this variables and will not override them. Also you can improve your code adding 'use strict' mode to make your code behavior more clear. Just write smth like this:

(function(){}(
'use strict';

..code goes there
));

Try yto always wrap your code with functions to avoid using global variables.

Try use such variant:

(function(){
/*
Meer websites laden
*/
var limit = 3;

$('#loadmore').click(function() {
    limit += 3;

    ajax();

});

var posts = document.getElementById('loadnews');

function ajax() {
    $.ajax({
    url: 'includes/loadmore.php',
    type: "POST",
    data: {limit: limit},
    success: function(data){
        loadnews.innerHTML = data;
    },
    error: function(jqXHR, exception) {
              if (jqXHR.status === 0) {
                   alert('Not connect.\n Verify Network.');
               } else if (jqXHR.status == 404) {
                   alert('Requested page not found. [404]');
               } else if (jqXHR.status == 500) {
                   alert('Internal Server Error [500].');
               } else if (exception === 'parsererror') {
                   alert('Requested JSON parse failed.');
               } else if (exception === 'timeout') {
                   alert('Time out error.');
               } else if (exception === 'abort') {
                   alert('Ajax request aborted.');
               } else {
                   alert('Uncaught Error.\n' + jqXHR.responseText);
               }
           }
    }); 
}

ajax();
}());

(function(){
/*
Meer projecten laden
*/
var limit = 4;

$('#loadmoreprojects').click(function() {
    limit += 4;

    ajax();

});

var posts1 = document.getElementById('loadprojects');

function ajax() {
    $.ajax({
    url: 'includes/loadmore_projects.php',
    type: "POST",
    data: {limit: limit},
    success: function(data){
        loadprojects.innerHTML = data;
    },
    error: function(jqXHR, exception) {
              if (jqXHR.status === 0) {
                   alert('Not connect.\n Verify Network.');
               } else if (jqXHR.status == 404) {
                   alert('Requested page not found. [404]');
               } else if (jqXHR.status == 500) {
                   alert('Internal Server Error [500].');
               } else if (exception === 'parsererror') {
                   alert('Requested JSON parse failed.');
               } else if (exception === 'timeout') {
                   alert('Time out error.');
               } else if (exception === 'abort') {
                   alert('Ajax request aborted.');
               } else {
                   alert('Uncaught Error.\n' + jqXHR.responseText);
               }
           }
    }); 
}

ajax();
}());

Answer 2

You are defining two functions with same name ajax(), change one of them.