AJAX multiple page loads with 1 click

JavaScript
1

Is there a reason that you can see why when I click on a link in the my top menu I am getting multiple page loads?

My a hrefs all include this: class="actionlink"

<script type="text/javascript">

    var urlVariable;
    var formURL;

    $(".actionlink").click(function () {
       
        urlVariable = $(this).attr("href");
        $(".main").load(urlVariable);

        return false;
    });

    $("form").on("submit", function (event) {
       event.preventDefault();
       var formData = $(this).serialize();
       formURL = $(this).attr("action");
        
       $.ajax({
           type: "POST",
           url: formURL,
           data: formData,
           success: function (r) { $(".main").html(r); },
           error: function (r) { },
           async: true

        });

    });



</script>

Thank you

2

Without the full page, I cannot offer a better answer than “It works for me.”

2 Likes
3

Thank you for telling me it works for you. I wanted to double check that code before I look deeper into the issue.

I read that it is depreciated. Is it widely in use?

4

#1: In coding terms, the word is ‘deprecated’, not ‘depreciated’. Close words, though, and one that… rarely if ever gets used outside of coding, to my knowledge.
#2: “it is deprecated”… what is “it”? The load() method? It’s not deprecated, but there was a different method in jQuery 1.x/2.x called .load(), which acted like .click() in that it was an event binder to the load event. That form of .load() has been replaced by the one you’re using now in jQuery 3.x. (You… are using jQuery 3.X, right?)

1 Like
5

Yes I know, sorry for the fingers thinking depreciation which is a word that I say about 100 times a month!

Thank you for explanation #2.

6

So here’s the short of it…
This is code that I had paid a professional coder in 2014. Once the project was finished I had other things going on and didn’t test it. By the time I wanted to use it the coder had moved on and I couldn’t reach him. Now I am revisiting. I had extensive menus and text on the target page, etc - so I completely stripped it down to the bare min. and I am getting the same error. I click on Page 1 link in menu, it logs once in the database. If I click it again, it usually logs 2 hits and the 3rd click I sometimes get between 10-20 hits to the database.

AjaxJavaScript.asp page:

<script type="text/javascript">

    var urlVariable;
    var formURL;

    $(".actionlink").click(function () {
       
        urlVariable = $(this).attr("href");
        $(".main").load(urlVariable);

        return false;
    });

    $("form").on("submit", function (event) {
       event.preventDefault();
       var formData = $(this).serialize();
       formURL = $(this).attr("action");
        
       $.ajax({
           type: "POST",
           url: formURL,
           data: formData,
           success: function (r) { $(".main").html(r); },
           error: function (r) { },
           async: true

        });

    });



</script>

Index.asp page:

<html>

<head>

<script src="https://website.com/Scripts/jquery-1.11.1.min.js"></script>

    <style>
        .main {
        width:auto;
        margin:auto;
        }
    </style>
</head>

<body>
   
    <div class="header">
         <!-- #INCLUDE FILE="updatemenu.asp" -->
    </div>

    <div class="main">
        <!-- #INCLUDE FILE="summary.asp" -->
    </div>
 <!-- #include file ="AJAXJavaScript.asp" -->   

</body>

</html>

updatemenu.asp page

<a class='actionlink' href="content/example.asp">Page 1</a>

content.asp page

<!DOCTYPE html>

<!-- #include FILE ="../AJAXJavaScript.asp" -->

<html>

<head>
<script src="https://website.com/Scripts/jquery-1.11.1.min.js"></script>
</head>
<body>

<%'this puts entry into database
pagetitle="Page 1"%>

<!-- #include virtual ="/include.asp" -->
<!-- #include virtual ="/DBconn.asp" -->

<p align=center>Page 1</p>

</body>

</html>

Summary.asp

<html>
<body>

This is the summary page.

</body>
</html>
7

okay, hooooold up.

Step 1 when debugging Javascript: Forget about your ASP/PHP pages. Take a look at the HTML source in your browser. Because that’s the only thing that Javascript sees.

Remember when I said this?

big red klaxons start going off…

1 Like
8

I did try 2x the other day, no results so went back to verision 1x.

Just tried this version and same result.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Is that the correct version to use?

1 Like
9

Does this mean that if I can figure out how to get this code to work, it won’t work in version 3.0 but will still work in version 1.11.1?

This is from w3schools.com

image

10

You need to change that link @javascript7, it links to some religious site. Should be w3schools (plural) not w3school.

11

Done!

PS… and thanks for taking the time for the explanation. But honestly, it’s above my pay grade! I appreciate the things that you have helped me on in the past. Thanks!

12

That’s because you’re looking at the Event form of .load(), which, as was stated, existed only in version 1.x/2.x of jQuery. The AJAX form of .load() exists in 3.X (and if you look in W3schools’ jQuery AJAX section, is listed there as normal.)

Opposite. Because the Ajax form of .load() didn’t exist until 3.0, invoking it in 1.X will cause the code as written to fail.

Okay, lets get a bit more archaic with our approach here. “It don’t work” levels of debugging time.

    $(".actionlink").click(function () {
       
        urlVariable = $(this).attr("href");
        $(".main").load(urlVariable);
        console.log("I Loaded "+urlVariable);
        return false;
    });

and check your console to see if it’s firing your event more than once.

13

Yes, it’s still firing events more than once.

Thanks for your help.

14

So the function’s correct, something’s gone wrong in the binding of the events.

Go look at your html output, and verify that the $(".actionlink").click only exists once in your code.

15

I am using this is the href. class='actionlink' It fires about 20 times in the console with 1 click

16

So something has bound this event 20 times over. You’ve got a loop somewhere that’s loading your script multiple times.

17

Here’s what I mocked up for you to look at. You can see in the console that if you click the link multiple times how it fires or “loops”.

http://testingcode360.com/sitepoint/

Thanks for looking at it.

18

The code you have provided does not execute multiple times per click.

19

This is 4 clicks on that link:

image

20

Oh okay, now i see the loop.

Why is content.asp loading the javascript?