Jay@TastefulTitles.com Posted April 4, 2020 Share Posted April 4, 2020 When user enters something in search field, my onChange function opens a screen-size window that blurs everything showing, and a div containing the response in the middle of the screen. When I run it in DreamWeaver CS5 on my MacBook, it works fine. When I run it in Safari, the new divs flash on the screen, then disappear. Running in the Safari debugger, I can step through the code that toggles the display of the new div, and it appears as it should. As soon as I step out of the toggle function, returning to the calling onChange command, it disappears without a trace. The relevant code is below. The function called by the entry field (function catFilter) ends with the call to function toggle(name), and everything seems fine through there. As I said, in DreamWeaver it doesn't disappear, making me think the problem may not be in my code. Can anyone suggest a method to find out why it disappears? #shade { text-align:center; width:100%; height:100%; position:fixed; z-index:60; <-- ensures shade div is above everything but menu --> top:0; left:0; background:rgba(200,200,200,.8); <-- light gray; 80% opaque --> display:none; <-- this is the default until a value is entered in the search field --> } <div id="shade" onClick="filterClick(event)" class="w3-container"> <div class="w3-content w3-card-4 w3-white" style="width:340px; margin:auto; margin-top:6vh" > <header class="w3-content tt-header"> <h5 id="catHead" >Browse our catalog </h5> </header> <div id="catalog" class="w3-content" style="max-height:60vh; padding-bottom:6px; overflow-Y:scroll"> <!-- CATALOG ENTRIES ARE ADDED HERE BY JAVASCRIPT--> </div> </div> </div> <form> <input class="w3-input" onChange="catFilter(this.value)" type="text" placeholder="Search: Composer & Title" style="width:320px; text-align:center; display:inline-block"> </form> function toggle(name) { var x = document.getElementById(name); var s = getComputedStyle(x); if(s.display=="block") {x.style.display = "none"} else {x.style.display="block"} } Link to comment Share on other sites More sharing options...
Jay@TastefulTitles.com Posted April 5, 2020 Author Share Posted April 5, 2020 The same is true in Chrome. I now see that the window is being redrawn (reloaded?), but I still have no idea why. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 6, 2020 Share Posted April 6, 2020 (edited) Running in Dreamweaver never produce the result you expect, that's why you should get it to run through an browser outside of dreamweaver. You probably are getting getComputedStyle() of all possible multiple styles applied BUT! You are not using getPropertyValue("display") to get actual property display value https://www.w3schools.com/jsref/jsref_getcomputedstyle.asp Did you not get a error in developers console regarding this? Accessed by (F12) on pc anyway. Edited April 6, 2020 by dsonesuk Link to comment Share on other sites More sharing options...
Jay@TastefulTitles.com Posted April 6, 2020 Author Share Posted April 6, 2020 No, this generates no errors. It simply reloads (or at least redraws) the page on leaving the function. I'm not understanding your point about getComputedStyle(). It returns the value used in drawing the display, which is what is required. The toggle() function has worked perfectly since changing to getComputedStyle(). It is after leaving that function, with the divs properly drawn, that I'm getting the redraw. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2020 Share Posted April 7, 2020 OK! This sounds very much like your form is quickly submitting to itself, if a user presses enter within a input it is treated as a submission of a form. It seems very strange to see onChange event for a text input? Usually I would use one of the keypress events, onchange usually triggers after the element loses focus after value changes like checkbox, radio and select form elements, so this maybe the problem using onchange on text input. Link to comment Share on other sites More sharing options...
Jay@TastefulTitles.com Posted April 7, 2020 Author Share Posted April 7, 2020 I switched getPropertyValue() for getComputedStyle(), which seems to have been forcing the redraw. It works just as well, but gives the same results—it still flashes, then redraws. FWIW, I can display div shade (and its catalog div) using a dropdown menu item to call the same toggle function, and there is no problem. The toggle function is also used to display the menu, and to close it after drawing shade. If it would help to see what I've described, you may do so at TastefulTitles.com/NewIndex.html. To see how it's supposed to work, show the full catalog using the dropdown menu in the UL corner. (To hide the catalog, click anywhere outside it.) To see the problem, scroll down to the search field and enter "Mozart" or "Mahler", or another name you saw in the full catalog. If I eliminate the onchange(catFilter()) call, and replace it with onchange(toggle("shade")), the problem still exists. If I put an alert() after that, the alert gets shown before the div is drawn. After the alert is dismissed, the shade div is drawn, and then immediately erased as the screen redraws. Link to comment Share on other sites More sharing options...
Jay@TastefulTitles.com Posted April 7, 2020 Author Share Posted April 7, 2020 (edited) After several hours of trying one thing and another, I finally hit on something that worked, and it seems to be in line with what you just posted: I removed the <form></form> tags enclosing the search field. I don't know whether any of my other changes had any effect, but now it is working exactly as intended. Thanks for your suggestions! Edited April 7, 2020 by Jay@TastefulTitles.com Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now