Ways to activate touch events in pjax library?

As I work on developing a website, I am utilizing the Pjax library, which is a port of jquery pjax. However, I have encountered an issue where touch events are not being processed. My implementation of Pjax looks like this:

var pjax = new Pjax({ selectors: ["head title", "body"] })

In addition to that, I have incorporated some animations into the site as well:

document.addEventListener('pjax:send', function(){
  var $main = document.querySelector('main')
  $main.style.opacity = 0
})

document.addEventListener('pjax:complete', function(){
  var $main = document.querySelector('main')
  $main.style.visibility = 'hidden'
  $main.style.opacity = 0
  setTimeout(function(){
    document.querySelector('main').style.visibility = 'visible'
    document.querySelector('main').style.opacity = 1
    attach_menu_control()
  }, 10)
})

It's crucial for me to ensure that everything works smoothly on mobile devices. You can visit the site at www.saulesinterjerai.lt (although it can be buggy).

Answer №1

After some trial and error, I managed to find a solution by simulating click events for touch events:

if (checkTouchDevice()) {
  var allLinks = document.querySelectorAll('a[href]')
  var event = new Event('click');

  for (var i = 0 ; i < allLinks.length ; ++i) {
    allLinks[i].addEventListener("touchend", function() {
      allLinks[i].dispatchEvent(event)
    });
  }
}

function checkTouchDevice() {
  return 'ontouchstart' in window        // works on most browsers 
      || navigator.maxTouchPoints;       // works on IE10/11 and Surface
}

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

Utilize jQuery's addClass Method when Submitting a Form Using Ajax

When the form is submitted, I would like to add a class and display a loading animation before executing the AJAX request. However, when setting async to false in the AJAX call, the AJAX request will be executed first before displaying the loading animatio ...

Tips for creating a consistent format based on test cases

var years = Math.floor(seconds / (3600*24*365)) seconds -= years*3600*24*365 var days = Math.floor(seconds / (3600*24)) seconds -= days*3600*24 var hrs = Math.floor(seconds / 3600) seconds -= hrs*3600 var minutes = Math.floor(seconds / 60) ...

React.js Filter Component

I'm currently trying to create a filter for my "localtypes", but I'm encountering an issue where the console in my browser is displaying an empty array. My goal is to access the localtypes properties of the API that I am working with. I attempte ...

The DELETE function in express.js with MySQL integration is encountering a problem where it is unable to

As I work on setting up my website, the backend utilizes express.js to send queries to a MySQL Database. However, when attempting to delete rows, no action seems to take place. function establishConnection() { return mysql.createConnection({ multipl ...

What is the best way to send these values to a JavaScript function and show them one by one on an HTML webpage?

There are 100 values stored in the database. https://i.stack.imgur.com/584Op.jpg I need to retrieve these values from the database using PHP and pass them to JavaScript using Ajax. PHP CODE: for($i=0;$i<=9;$i++) { $random = (10 * $i) + rand(1,10); ...

Steps for implementing target='_blank' on a <Link> tag with more than just an <a> element inside

I'm facing an issue where I need to open a new browser tab and redirect to a specific URL when a button is clicked. The problem arises when using an element other than an anchor tag inside the Next's <Link> element, as it seems to ignore th ...

What is preventing ColladaLoader.js in Three.js from loading my file?

Recently, I decided to experiment with three.js and wanted to load a .dae file called Raptor.dae that I obtained from Ark Survival Evolved. Despite having some web development knowledge, I encountered an issue when trying to display this particular file in ...

What is causing jQuery to report an "invalid assignment on the left-hand side"?

function updateAuditor(aud) { jQuery("#auditing").val() = aud; jQuery("#auditTrailForm").submit(); } What causes the error when I attempt to assign 'aud' to the value of #auditing? ...

Guide to ensuring jQuery Ajax requests are fully processed with WatiN

Currently, I am in the process of developing WatiN tests to evaluate an Ajax web application. However, I have encountered a timing issue with Ajax requests. My main objective is to ensure that WatiN waits for the Ajax request to be completed before valida ...

Retrieving data from a JSON object using JavaScript

{ "questions_id":[ "7", "9", "2" ], "select_param_type":[ "is greater than", "is less than", "is less than" ], "select_param_value":[ "2", "4", "2" ], "radio_type":[ "and", ...

Incorporating the chosen value from a dropdown box as a variable in PHP

Seeking assistance with using the value selected in a drop-down box as a PHP variable in my functions.php file. I attempted to utilize jquery-ajax for this purpose. $(document).ready(function(){ $("#pa_color").change(function(){ var result= $(this).val( ...

JS Function created to supply elements to React component is failing to return correctly

Trying to validate a dataset by checking for specific prefixes or suffixes in a string, and then breaking the string into <span> elements. The current function correctly identifies the relevant morphemes in the data set, but fails to return the split ...

What causes the unexpected behavior of str.replace() when the replacement string contains a regex pattern?

let a = `<script crossOrigin="anonymous" src="//example.com/index.js"></script>` let regex = new RegExp( `<script(.*?) src="` + '//example.com/index.js' + `"></script>`, 'g') let replacementString = ...

Can we connect to an external PHP script using Ajax?

I'm attempting to utilize Ajax to call an external PHP script in the following manner: $(function() { $.ajax({'url': 'http://stokes.chop.edu/web/zscore/result.php', 'type': 'POST', & ...

Changing the ng-include and ng-controller dynamically in your AngularJS project

I'm working on a section of my webpage that features multiple tabs, each requiring a partial and controller to function properly. My goal is to dynamically switch the ng-include and ng-controller based on the currently selected tab. One challenge I&a ...

utilizing jQuery to deliver a $.post request to a .aspx file

Recently, I started following a jQuery tutorial on the phpAcademy channel hosted on thenewboston. In this tutorial, they demonstrate how to create an email validation form using ASP.net instead of PHP. However, despite following all the steps in the tutor ...

Can you explain the purpose of the .json() function in Angular2?

Can you explain the purpose of the .json() function within http requests in Angular2? Here is an example code snippet: this.http.get('http://localhost:8080/getName') .subscribe(res => this.names = res.json()); Is it correct to assume that t ...

React is throwing an error that says, "You cannot use the import statement outside a

My journey with learning React has just begun. I followed the steps outlined in the starting guide at https://react.dev/learn/add-react-to-an-existing-project, but unfortunately, I encountered an error: "Cannot use import statement outside a module." Here ...

Reactjs Rendering problem with retrieving data from the backend in a popover

Take a look at the test environment where this problem is occurring https://codesandbox.io/s/nice-cache-kl12v My website design is being done with antd. Right now, I'm facing an issue where I need to display notifications to the user, which are acces ...

CSS positioning with absolute value + determine the number of elements positioned above

Is it feasible to adjust the position of an absolutely positioned element based on the height of the element above it? The objective is to align elements with the class "pgafu-post-categories" one line above an H2 heading, even when the lengths v ...