Why javascript/jquery code does not work on android devices?

On laravel 8.83 / jquery 3.6.0 app when user clicked on action button and ajax response returned new value is set
(groupedNewsUserActionsCount of response)
into div with id = "#total_actions_" + newsId + "_" + action + "_label" and to assign class 'news-user-reactions-item-voted' into block
I do it with a code :

    $.ajax({
        type: "POST",
        dataType: "json",
        url: "/news/react",
        data: {"_token": "{{ csrf_token() }}", "newsId": newsId, "action": action},
        success: function (response) {
            $("#total_actions_" + newsId + "_" + action + "_label").html(response.groupedNewsUserActionsCount === 0 ? '' : response.groupedNewsUserActionsCount)
            // Make _cancel action button visible and hide add action button
            $("#a_" + newsId + "_" + action + "_add_action").css('display', 'none')
            $("#a_" + newsId + "_" + action + "_cancel_action").css('display', 'block')
            // User voted this action : show icon image in light blue color
            $("#div_" + newsId + "_" + action + "_add_action_block").attr('class', 'news-user-reactions-item-voted')
        },
        error: function (error) {
            console.log(error)
        }
    });

Code (JavaScript):

That works ok on common browsers, but does not work properly(new value is not set and class is not changed) on android devices.
Do I use some invalid methods which are not valid for android devices ?
Which methods have I to use ?

I make test with Samsung Galaxy A 50 and when my page is opened in chrome browser I found option/checkbox
"Version for comp" - if to turn it on the the page is reopeened at first - and after that all functionality with new
value applied and class changed new class changed WORKS properly! What option is it and how I use it in my issue ?

 

Do you only have jquery on the front end or are you trying to use React (I saw React in your url) with it? If you have both then they might be fighting for control of the DOM and you'll end up with race conditions that will behave inconsistently.

Laravel is a server side MVC so I'm assuming your are just delivering html straight to the browser, not filtered through a js framework. Just checking because your code looks fine to me.

 

Also. Jquery is on 3.7.0 now. Maybe there is a bug in 3.6.0.

 

What mobile browsers did you try? Native or Chrome/FF?

 

This is a poster child for why I consider jQuery junk, particularly since it's taught you to slop ID's on everything for no good reason, slop style changes into your JavaScript where it has no business being done, and rely on a bunch of variables coming from Christmas only knows where.

Guessing wildly since JS without the markup it's using is gibberish, much less the volume of variables you're using coming from F*** knows where...

Let's assume your markup goes like this:

<form data-action-request-id="1">
	<h2>Describe this form</h2>
	<fieldset>
		<label>
			Something?<br>
			<input name="value">
		</label>
	</fieldset>
	<footer>
		<button class="add">Add</button>
		<button class="cancel" disabled type="button">Cancel</button>
	</footer>
</form>

Code (markup):

I would have this in the stylesheet:

form > footer > button[disabled] {
	display:none;
}

Code (markup):

And then using vanilla JS without any of that bloated ignorant incompetent jQuery BS getting in the damned way something along the lines of:

{

	const
	
		buildHandlers = (form) => {
		
			const
				label = form.querySelector("fieldset label:first-of-type"),
				input = label.nextElementSibling,
				add = form.querySelector("footer button.add"),
				cancel = form.querySelector("footer button.cancel");
				
			form.addEventListener("submit", (e) => {
				event.preventDefault();
				if (add.disabled) return;
				const x = Object.assign(new XMLHttpRequest(), {
					responseType : "json",
					onerror : (e) => throw new Error(
						`Unexpected XMLHttpRequest Error "${e.type}". ${e.loaded} of ${e.total} bytes transferred.`
					),
					onload : (e) => {
						switch (e.target.status) {
							case 200:
								parent.classList.add("completed");
								label.textContent = response.groupedNewsUserActionsCount;
								add.disabled = true;
								cancel.disabled = false;
								return;
							default:
								throw new Error(
									`Unhandled XMLHTTPRequest Status Code ${e.target.status}`
								);
						}
					}
				} );
				x.open("POST", "/news/react");
				x.send( {
					_token : csrf_token(),
					newsId : form.dataset.actionRequestId,
					action : "add",
					value  : input.value
				} );
			} );
			
			cancel.addEventListener("click", {
				if (cancel.disabled) return;
				cancel.disabled = true;
				add.disabled = false;
				/* do whatever your cancel actually does here */
			});
				
		}; // buildHandlers

	for (const form of document.querySelectorAll(
		"form[data-action-request-id]"
	) buildHandlers(form);
	
}

Code (markup):

Which would have more robust error handling to boot. Fun part is if you compare what jQuery was suckering you with to the submit handler, they're pretty much the same size.

But tell me again how necessary wuck-fittery like jQuery is/was.

the outer {} is for scope isolation, replacing what we used to use IIFE for. I create the buildhandlers as a storage facility so we don't have to getElementBy or some such inside the event handlers. Good rule of thumb is to treat event handlers like they were loops. Anything you can prepare outside the handler, do it.

XMLHttpRequest is not -- nor ever was -- some giant monster we "needed" jQuery's dumbass help with. This is even more true with being able to now hook onload, and event.target being the XMLHttpRequest object that fired the event.

Note how I'm using the disabled state for show/hide. Just because you hide it doesn't mean it's not disabled or can't be focused in all UA's. Disabling it is a better choice, and means not dicking around with CSS in the JavaScript which really has no business being done on something this simple.

Likewise I'm not a big fan of "log". If there's a significant networking error? THROW!

Mind you, this is a driveby post meant to give you an idea how it should be done. I make no guarantees that code actually works or is free of typos as again, I'm guessing WILDLY from a lack of information.

Bottom line though, jQuery isn't doing you any favors, and neither is throwing ID's at everything when you could just put the ID on the parent of all that, then select the children off that parent.

 

JavaScript/jQuery code may not work on Android devices due to compatibility issues or outdated browser versions. Mobile browsers on Android may have limited support for certain features, leading to potential functionality issues. It's crucial in web development to ensure code compatibility across various browsers and devices to provide a seamless user experience. Regularly updating and testing code on different platforms can help address such issues and enhance overall compatibility. For web development errors resolved, you can contact with https://onyxtec.co/.

 

I've never had issues with jquery working on phones. Android or Apple.