Using jQuery to submit data via POST method without having the page reload

Question

Using jQuery to submit data via POST method without having the page reload

I have a link in the footer that, when clicked, jumps to the header with a # in the address bar. Is there a way to prevent this and stay in the footer?

Here is the code snippet:

<a href="#" class="clickIn" id="1" attrIn="Like"><span style="color: #33A13D"><i class="fa fa-hand-o-up"></i></span></a>

$(document).on('click', '.clickIn', function(){
    var $this = $(this);
    var liCount = $('#liCount');
    if($(this).attr('attrIn')=='Like'){
        $.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
            $this.html('done');
            $this.attr('attrIn','');
        });
    }
});

Thank you.

javascript jquery css ajax

Answer 1

Answer №1

Utilize event.preventDefault() method:

$(document).on('click', '.clickIn', function(e){
    e.preventDefault();
    var $element = $(this);
    var listCount = $('#liCount');
    if($(this).attr('attrIn')=='Like'){
        $.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
        $element.html('done');
        $element.attr('attrIn','');
    });
    }
});

This function prevents the default action of the browser on a specific element. For more information, refer to: http://api.jquery.com/event.preventDefault/

Answer 2

Utilize event.preventDefault() method:

$(document).on('click', '.clickIn', function(e){
    e.preventDefault();
    var $element = $(this);
    var listCount = $('#liCount');
    if($(this).attr('attrIn')=='Like'){
        $.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
        $element.html('done');
        $element.attr('attrIn','');
    });
    }
});

This function prevents the default action of the browser on a specific element. For more information, refer to: http://api.jquery.com/event.preventDefault/

Answer 3

Answer №2

To make your handler more effective, you need to include e.preventDefault() and e.stopPropagation() in it:

$(document).on('click', '.clickIn', function(e){
    e.preventDefault();
    e.stopPropagation();
    var $this = $(this);
    var liCount = $('#liCount');
    if($(this).attr('attrIn')=='Like'){
        $.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
        $this.html('done');
        $this.attr('attrIn','');
    });
    }
});

By adding these lines of code, you will prevent the default action of your link (going to a "#" link) and stop the click event from bubbling up.

Answer 4

To make your handler more effective, you need to include e.preventDefault() and e.stopPropagation() in it:

$(document).on('click', '.clickIn', function(e){
    e.preventDefault();
    e.stopPropagation();
    var $this = $(this);
    var liCount = $('#liCount');
    if($(this).attr('attrIn')=='Like'){
        $.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
        $this.html('done');
        $this.attr('attrIn','');
    });
    }
});

By adding these lines of code, you will prevent the default action of your link (going to a "#" link) and stop the click event from bubbling up.

Answer 5

Answer №3

To stop the default behavior of an event that has been triggered, you can use the preventDefault method of the event object like so:

$(document).on('click', '.clickIn', function(event){
    var $this = $(this);
    var liCount = $('#liCount');

    // Include this line to prevent default behavior:
    event.preventDefault();

    if($(this).attr('attrIn')=='Like'){
        $.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
            $this.html('done');
            $this.attr('attrIn','');
        });
    }
});

Answer 6

To stop the default behavior of an event that has been triggered, you can use the preventDefault method of the event object like so:

$(document).on('click', '.clickIn', function(event){
    var $this = $(this);
    var liCount = $('#liCount');

    // Include this line to prevent default behavior:
    event.preventDefault();

    if($(this).attr('attrIn')=='Like'){
        $.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
            $this.html('done');
            $this.attr('attrIn','');
        });
    }
});

Answer 7

Answer №4

Triggering click event

event.preventDefault();

Answer 8

Triggering click event

event.preventDefault();

Using jQuery to submit data via POST method without having the page reload

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Remove the color gradient for the column headers in the Google Visualization table

`Unable to activate label function in HTML`

How do I retrieve the id of an event using a class descriptor within a JQuery Dialog constructor in Javascript?

Swap out ASP.NET AJAX with jQuery for making ASHX requests

Centering "Label - Value" without tables in web design

Tips on creating a unique d3js tree design

How jQuery Autocomplete handles lowercase conversions in queries

`Modified regions determined by cursor location`

Manipulating visibility of an input tag using JQuery

Attempting to convert a Raw image file and upload it onto the server

During the initial render in next-auth, the useSuspenseQuery function is triggered to fetch data without a defined token, resulting in an

Ensuring DIV Fills without Compromising Aspect Ratio

Tips for creating a unique design for a form that includes a non-binary mask, inspired by bitmasks

Error: The configuration object provided for initializing Webpack does not adhere to the correct API schema in Next.js. This results in a ValidationError due to the invalid configuration

Understanding the mechanism of callback function in NodeJS within the context of routes and controllers

Next JS Event Listener Failing to Detect Scroll Events

Creating Typescript types based on the values of other props: A guide

Unable to locate the JavaScript/jQuery key

"404 Error: Page Not Found on the Requested

The node experiences a crash when the redis-server goes offline