Switch pages with Jquery

Having an issue with this code - when I click on the next page, the page refreshes twice. Is it possible to stop this behavior? Apologies for my poor English.

Code


jQuery(document).ready(function() {</p>

<pre>$(".container").css("display", "none");

$(".container").fadeIn(1000);

$("a.pager").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    jQuery(".container").fadeOut(1000, redirectPage);       
});

function redirectPage() {
    window.location = linkLocation;
}});

Thank you very much

jquerycssloadrefreshswitchers

Answer №1

To prevent the click event from propagating, you should use the following code snippet (note that this is different from using .preventDefault()): 

$("a.pager").click(function(event){
  event.preventDefault();
  linkLocation = this.href;
  jQuery(".container").fadeOut(1000, redirectPage);
  return false; // stop propagation of the click event 
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Density Chart Using SVG

I am currently working on converting this chart into SVG Format. I have made some progress, but I still need to ensure that both sides match perfectly when it goes up and down. https://i.sstatic.net/jpkoo.png <div class='chart'> <s ...

htmlcsssvgcharts

Adjusting CSS to switch up the color scheme

Is there a way to allow users to change the background color of pull quotes by using the input type="color tag within a form element? Below is my current HTML structure: <form action="change.php" method="post"> name: <input type="text"> ...

javascriptphpjqueryhtmlcss

Limit the number of rows displayed with ngFor

I have an array in Angular and I am using *ngFor to display its items. I would like the items to be arranged in 2 rows with as many columns as possible. It's fine if only 6 items are displayed on the screen. .item { width: 150px; height: 300px; ...

htmlcssangular

Why does Javascript Tic-Tac-Toe delay notifying the user until the entire board is full?

There have been a lot of questions about Tic-Tac-Toe javascript, but my issue is unique. My code works fine, but it doesn't declare a winner or a tie game until the entire board is filled. I suspect that my if statements are causing problems and can&a ...

javascripthtmlcssdom

Apply a new class to all Radio buttons that were previously selected, as well as the currently

Struggling with a simple code here, trying to figure out how to add color (class) to the selected radio button and the previous ones. For example, if button No3 is selected, buttons 1, 2, and 3 should get a new color. Below is the basic code snippet: < ...

javascriptjqueryhtmlcss

The jQuery gallery is experiencing some functionality issues

Having an issue with the gallery on my website (currently on my computer, not yet uploaded to a server). Here is the script for the gallery (loaded from the server using PHP): $(document).ready(function() { $('.gallery').hide(); $(' ...

phpjavascriptjqueryhtml

Unable to shift the header menus upwards for proper alignment with the logo

Header with logo I'm trying to align the menu items like Home, etc with the logo, but it seems like the logo is taking up too much space above the menu headers and I'm not sure how to reduce it. I've already attempted using margin-left or r ...

htmlcss

Problem when linking jQuery animations together in a callback

It seems like a straightforward task, but I can't figure out what I'm missing. I want to create a DIV that fades out, changes some text, and then fades back in. Although it somewhat works, the text updates before the fade out and fade in effects ...

jquery

Unable to match the data and retrieve the value for $passwd

*issue:* I am facing a problem in retrieving data from the model which is causing me to be unable to match the old database data with the new one. As a result, I am not able to receive any success message or display any error. Can anyone assist me with thi ...

jqueryajaxcodeigniterbootstrap-modal

What is the best method for centering text input within an Angular Material toolbar?

Can anyone help me with aligning input elements with buttons on an Angular Material toolbar? Check out the code pen: http://codepen.io/curtwagner1984/pen/amgdXj Here is the HTML code: <md-toolbar class="md-hue-1" layout-align="start center" style="mi ...

htmlcssangularjsangular-material

Maintaining Proper Header Dimensions

Having some issues with aligning my fixed widget and floating navigation. The fixed widget is not respecting the height of the floating navigation and is appearing at the top when in its fixed position. I'm currently using "Q2W3 Fixed Widget" for the ...

csscss-float

Getting the css property scaleX with JQuery is as simple as executing the

I am struggling to print out the properties of a specific div element using jQuery. My goal is to have the different css properties displayed in an information panel on the screen. Currently, I am facing difficulties trying to show scaleX. Here is my curr ...

javascriptjqueryhtmlcss

Execute the Ajax queue and proceed further afterwards

Currently, I am utilizing JQuery AjaxQueue in my project to perform various tasks. However, I am facing an issue where I cannot determine how to proceed only after the entire queue has been processed. My goal is to inspect a table for deleted items and t ...

jqueryajaxqueue

In Mobile View, I want to swap out my current image for text to keep it hidden

I am attempting to include text that is only visible in Mobile View as a replacement for my logo. Below is the code I am using: CSS: @media only screen and (max-width:1024px) { header .logo { display: none; } header .logo a { display: non ...

htmlcssresponsive-design

Is it possible to attach a mouseup event to the document body using Angular?

I'm working with a jQuery snippet that hides an element when clicked outside of it: jQuery(document).mouseup(function (e) { var container = jQuery('.dropDown'); if (!container.is(e.target) // if the target of the cl ...

javascriptjqueryangularjs

Redeem your Paypal discount code at checkout

I'm in the process of creating a simple product checkout system for my website. I've implemented PayPal's default checkout system, which works well, but I also want to include a coupon code feature. Unfortunately, I couldn't find an opt ...

phpjquerypaypal

Fade in elements individually with the jQuery Waypoints plugin

I am currently using the waypoints jQuery plugin and it is functioning perfectly when fading in on scroll. However, I am facing an issue with making the blocks fade in individually one after the other. Here is the snippet of my jQuery code: $('.hbloc ...

javascriptjqueryjquery-pluginsjquery-waypoints

Comparison between global and local styling in VueJS

As I develop a project using .vue files, I find it beneficial to have the ability to write CSS (SASS), JS, and HTML all within the same file. For my global components written in SASS, I have created an assets/styles/app.scss file to house my grid, variabl ...

cssvue.jssassnuxt.js

Retrieve the offsetTop value of an accordion following its collapse

My goal is to determine the exact position of a clicked accordion title after it has been clicked. The issue I am facing is that the movement of Bootstrap's accordion collapse and my jQuery function are triggering almost simultaneously. As a result, ...

javascriptjqueryhtml

Elevate with Ease: Tailwind's Height Transition

I've been attempting to implement a transition effect using TailwindCSS, but I haven't found an updated version with the latest features. Here's the code snippet: <div id="fadeInElement" className={visible ? " w-2/3 px-5 t ...

javascriptcssreactjsjsxtailwind-css