1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'JavaScript' started by mstdmstd, Aug 30, 2023.

  1. #1
    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 :

            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) {
    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 ?
    mstdmstd, Aug 30, 2023 IP
  2. phoenixtropicals

    phoenixtropicals AdsP2p.net Peer To Peer Web Advertising Premium Member

    Likes Received:
    Best Answers:
    Trophy Points:
    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.
    phoenixtropicals, Aug 30, 2023 IP
  3. phoenixtropicals

    phoenixtropicals AdsP2p.net Peer To Peer Web Advertising Premium Member

    Likes Received:
    Best Answers:
    Trophy Points:
    Also. Jquery is on 3.7.0 now. Maybe there is a bug in 3.6.0.
    phoenixtropicals, Aug 30, 2023 IP
  4. MrOndre

    MrOndre Greenhorn

    Likes Received:
    Best Answers:
    Trophy Points:
    What mobile browsers did you try? Native or Chrome/FF?
    MrOndre, Sep 10, 2023 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Likes Received:
    Best Answers:
    Trophy Points:
    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>
    			<input name="value">
    		<button class="add">Add</button>
    		<button class="cancel" disabled type="button">Cancel</button>
    Code (markup):
    I would have this in the stylesheet:
    form > footer > button[disabled] {
    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:
    		buildHandlers = (form) => {
    				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) => {
    				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:
    								label.textContent = response.groupedNewsUserActionsCount;
    								add.disabled = true;
    								cancel.disabled = false;
    								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(
    	) 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.
    deathshadow, Sep 24, 2023 IP