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

The bottom portion of my page vanishes without a

Choosing based on conditions within a function

Creating a custom variable assignment in Bootstrap within the custom.scss file

Detecting the clicked tab in Ajax Control Toolkit TabContainer - is it possible to determine which tab was selected?

Tips for positioning bootstrap dropdowns side by side in a row

What steps are needed to have AJAX retrieve data from the controller within an MVC framework?

Vue3: Pinia store data not being received

Express displays HTML code as plain text

Using $stateParams injection for unit testing Angular applications with Karma

Is there a way to pre-load images from component B within component A using Vue?

Material Design Angular2 Toolbar

What steps do I need to take to implement AJAX form authentication?

The issue of Angular 2.3.1 custom validator promise not resolving

Why isn't my ajax call working after using window.close?

` `Spinning graphics and written content``

Inheriting the viewBox attribute with SvgIcon

Recognizing the click event on the checkbox within a <TableRow/> in ReactJS with MaterialUI

Utilizing class-validator for conditional validation failure

Utilizing Loopback Callbacks within a Looping Structure

Attempting to trigger a second modal confirmation from within a modal confirmation