Mobile: unimHTMLFrame script "document.getElementById(IdStr).value=qty;" Does Not Update (Desktop works Fine), Function Fires

[andyhill]

I have a javascript function that works fine on Desktop (Edge, Edge/m) but does not update in Mobile (Safari), function fires, no errors thrown.

Please advise - thanks

[Sherzod]

Hello Andy, 

Would you mind sharing a piece of your HTML code or a sample project?

[andyhill]

Sure, but first I need my Forum Quota increased as I cannot attach anything anymore.

OR

If you email me direct

I can attach the sample code in the reply.

[Sherzod]

Hello Andy, 

9 hours ago, andyhill said:

I need my Forum Quota increased as I cannot attach anything anymore.

Could you please remove the old unnecessary attachments? This will free up space for uploading new ones.

[andyhill]

That was fun (removing previous posts), Simple Example now attached showing HyBrid testcase working correctly in Desktop, Desktop Emulation - but failing in Safari (Mobile).

I need a Sencha work-around (not Jquery [I want to minimise hacker access]) - Thanks Sherzod

 

[Sherzod]

7 hours ago, andyhill said:

but failing in Safari (Mobile).

Hello Andy,

What if you try wrapping it with Ext.defer?

function UpdateQty(IdStr, qty) {
    Ext.defer(function() {
        var el = document.getElementById(IdStr);
        if (el) el.value = qty;
    }, 200); // delay to ensure DOM is ready
}

Let us know if that makes any difference!

[andyhill]

Same problem, Does Not Work In Mobile Safari.

Can we not use "document.getElementById" but go about it in another way ?

[irigsoft]

25 minutes ago, andyhill said:

Same problem, Does Not Work In Mobile Safari.

Can we not use "document.getElementById" but go about it in another way ?

https://stackoverflow.com/questions/10756648/getelementbyid-returns-null-or-undefined-in-safari

"document.getElementById() will not work in safari. Instead you need to use document.all... Therefore, JQuery comes into picture where it is supported by all browsers. This can be the major difference between Javascript and JQuery where to be used."

https://developer.mozilla.org/en-US/docs/Web/API/Document/all

https://stackoverflow.com/questions/2408424/document-all-vs-document-getelementbyid

"I vote for keeping document.all! Looks like all browsers technically support it in 2023 and what's the harm with keeping it in place? It's so clean: document.all.fooBar vs. document.getElementById('fooBar')"

 

https://www.sololearn.com/en/Discuss/1829794/when-runned-on-safari-getelementbyid-can-t-work

"by using <script> tag, it worked well. Thank you very much!!"

 

https://webdeveloper.com/community/208903-issues-with-using-getelementbyid-and-safari/

"Names can be repeated, and that makes arrays (name[0], name[1], etc) but IDs cannot. The function getElementById() will get only the first one it finds, while getElementsByName() will get an array of everything with the specified name."

[irigsoft]

Maybe solution is that:

https://stackoverflow.com/questions/2408424/document-all-vs-document-getelementbyid

if(document.getElementById){  //DOM
    element = document.getElementById(id);
} else if (document.all) {  //IE
    element = document.all[id];
} else if (document.layers){  //Netscape < 6
    element = document.layers[id];
}

[andyhill]

Thanks for the pointers however .all and .layers FAIL on iPhone, however document.getElementsByTagName works but only shows TagName (DIV / INPUT / SCRIPT etc.).

Question, how do I get the TagName "INPUT" element name (id="qty001") and update it accordingly (hundreds of Tags, many INPUT tags, need "qty001" to update) ? 

I have narrowed it down to 4 INPUT tag's with document.getElementsByTagName("INPUT") but need "qty001" along with update code.

I see on the web "by using <script> tag, it worked well" but no code example ?

[andyhill]

After much testing (script now at the end of the body):-

Valid:
Valid: 1
Valid: 2
Valid: 3
etc.

All good, BUT "el.value = qty;" updates DOM variable as can be seen by repeating the call above but never updates the screen display (<input is text, qry is text) in the Safari browser (does so in Edge Desktop Emulation /m) ?

Somehow we need to refresh <input> after changing it's value without a full page refresh ?

[andyhill]

Please advise - Thanks

[andyhill]

Further Testing

CoPilot says "Refreshing the DOM on iOS can be tricky due to Safari's unique handling of dynamic content."

Please help 

[irigsoft]

7 hours ago, andyhill said:

Further Testing

    html:= html +
           '    <script> '+
           '      function UpdateQty(IdStr, qty) { '+
           '        Ext.defer(function() { '+
           '          var el = document.getElementById(IdStr); '+
           '          if (el) { '+
           '            alert("Valid: "+el.value); '+
           '            el.value = qty; '+ // *** EVERYTHING ENDS HERE (no futher execution flow) ***
           '            alert("Valid1: "+el.value); '+
           '            RefreshTag(IdStr); '+
           '            alert("Valid2: "+el.value); '+
           '          } else { '+
           '            alert("Fail"); '+
           '          } '+
           '        }, 200); '+
           '      } '+
           '    </script> ';

    html:= html +
           '    <script> '+
           '      function RefreshTag(IdStr2) { '+
           '        var el2 = document.getElementById(IdStr2); '+
           '        if (el2) { '+
           '          alert("Valid: "+el2.value); '+
           '          el2.style.display = "none"; '+
           '          el2.offsetHeight; // Trigger reflow '+
           '          el2.style.display = "block"; '+
           '        } else { '+
           '          alert("Fail"); '+
           '        } '+
           '      } '+
           '    </script> ';

CoPilot says "Refreshing the DOM on iOS can be tricky due to Safari's unique handling of dynamic content."

Please help 

HI, what happens when You set some value with

document.getElementById(IdStr2).innerText = 'Hello World';

 

and try :

1. "I take it you have fixed it now? Working fine for me. If not, try wrapping your JS in the window.onload function or <script> tags"

 

2. to quote value of IdStr2:

IdStr2 = "123";

el = document.getElementById(IdStr2)

 

maybe this will point to other posibilities : 

https://www.sitepoint.com/community/t/getelementbyid-remove-not-working-in-iphone-5/236329

https://gsap.com/community/forums/topic/6398-page-not-updating-correctly-in-safari-and-ios/ 

[andyhill]

I tried your suggestion but no go ☹️

Thank you for your considerations

[irigsoft]

27 minutes ago, andyhill said:

I tried your suggestion but no go ☹️

Thank you for your considerations

https://www.daniweb.com/programming/web-development/threads/490402/document-getelementbyid-doesn-t-work-on-apple-mac-pro

 

"Forget about the last two versions, I can already see that your problem in the first version is that you're not using quotes around your Id name. You absolutely must use single or double quotes around your id name or it will break your code. It should look like this:

Copy to Clipboard

            document.getElementById("tahun")

"

 

This shouldn't have worked on either. It's a Mozilla faulty omission for allowing the add of arbirary style property names (and values) as strings [!!!]
document.getElementById("list_bogor_2014_2015").style = "display:none";

 

try and this: el = document.getElementById(String (IDStr2));

or el = document.getElementById("IDStr2");

or el = document.getElementById('IDStr2');

 

https://stackoverflow.com/questions/58274736/how-do-i-fix-this-code-regarding-getelementbyid-javascript?noredirect=1&lq=1

"This is invalid in a lot of ways. You need to close your for loops and your selectors have to be strings, a.e. document.getElementById("message") not document.getElementById(message)"

"The id of getElementbyId must be in quotes"

[irigsoft]

look at this to: "Common Reasons Why Elements Cannot Be Found"

https://dev.to/sharmaprash/why-does-jquery-or-a-dom-method-like-getelementbyid-fail-to-find-an-element-2a7b

[irigsoft]

https://apple.stackexchange.com/questions/340459/getelementbyid-not-working-with-applescript

Also you can escape quotes :

do JavaScript "document.getElementById(\"two\").checked = true;"

html:= html +
           '    <script> '+
           '      function RefreshTag(IdStr2) { '+
           '        var el2 = document.getElementById(\"IdStr2\"); '+
           '        if (el2) { '+
           '          alert("Valid: "+el2.value); '+
           '          el2.style.display = "none"; '+
           '          el2.offsetHeight; // Trigger reflow '+
           '          el2.style.display = "block"; '+
           '        } else { '+
           '          alert("Fail"); '+
           '        } '+
           '      } '+
           '    </script> ';

[andyhill]

I appreciate all of the comments (escaping failed as well) - thank you.

The issue is that after "el.value = qty" is executed the DOM is rewritten somehow by iOS and the <input> tag is no longer accessible:-

So the <input> tag is originally blank.

PlusButton sets <input> value to 1 (all correct) BUT the iOS canvas view still has <input> as blank, not so with Desktop Emulation /m.
PlusButton again increments the <input> value to 2 (all correct) BUT the iOS canvas view still has <input> as blank, not so with Desktop Emulation /m.

MinusButton decrements the <input> value back to 1 (all correct) BUT the iOS canvas view still has <input> as blank, not so with Desktop Emulation /m.

So, after changing the value (either way) iOS fails to paint the results of the <input> tag value.

document.getElementById(IdStr); was my original problem until we placed the script at the end of the <body> along with a defer, after that it worked as intended.

The current problem is when the <input> value is changed under iOS it fails to paint the changed value, yet works perfectly in Desktop Emulation /m.

???

[irigsoft]

8 hours ago, andyhill said:

I appreciate all of the comments (escaping failed as well) - thank you.

The issue is that after "el.value = qty" is executed the DOM is rewritten somehow by iOS and the <input> tag is no longer accessible:-

    html:= html +
           '    <script> '+
           '      function UpdateQty(IdStr, qty) { '+
           '        Ext.defer(function() { '+
           '          var el = document.getElementById(IdStr); '+ 
           '          if (el) { '+
           '            el.value = qty; '+
           '          } else { '+
           '            alert("Fail"); '+
           '          } '+
           '        }, 200); '+
           '      } '+
           '    </script> ';

So the <input> tag is originally blank.

PlusButton sets <input> value to 1 (all correct) BUT the iOS canvas view still has <input> as blank, not so with Desktop Emulation /m.
PlusButton again increments the <input> value to 2 (all correct) BUT the iOS canvas view still has <input> as blank, not so with Desktop Emulation /m.

MinusButton decrements the <input> value back to 1 (all correct) BUT the iOS canvas view still has <input> as blank, not so with Desktop Emulation /m.

So, after changing the value (either way) iOS fails to paint the results of the <input> tag value.

document.getElementById(IdStr); was my original problem until we placed the script at the end of the <body> along with a defer, after that it worked as intended.

The current problem is when the <input> value is changed under iOS it fails to paint the changed value, yet works perfectly in Desktop Emulation /m.

???

so , value is not refreshed:

1. did you try to clear cache or try to switch the browser to „desktop mode“? - https://community.openhab.org/t/no-ui-refreshs-on-ios-safari-browser/152259

 

2. "Just found the answer. Connect the iPhone to your Mac via USB cable, open the web inspector, then press ⌥⌘R. The keyboard shortcut also works for iOS safari."

"https://community.openhab.org/t/no-ui-refreshs-on-ios-safari-browser/152259

 

3. or something else, like this : "Finally, I found the issue. I had an image nearby (may be floating/layering over the text). Thus Safari didn't redraw the underlying text (or some quirk).

Anyway moved the image around and it works in safari too"

"i had the exact same problem, but what i found out is that my elements that were having this problem had in style position relative. if i change that it works just fine."

https://stackoverflow.com/questions/6537773/safari-doesnt-dynamically-refresh-html-content

 

4. look into this: "The error was from safari not adding "/" automatically to the end of my endpoints whereas google chrome did. So I proceeded to add it manually and it works fine"

https://stackoverflow.com/questions/68967581/safari-not-updating-my-usestate-boolean-value

 

5. https://github.com/sveltejs/svelte/issues/10841