I have a Vue 3 app using Vue Router 4.
I have a button using the javascript HTMLElement.click() method to click on a hidden file input.
When I click it and the browser's file picker pops up, all the part of my URL after the hash gets cut out which changes my view.
I have no errors whatsoever so I really don't know what is causing this. Any idea ?
Related
I'm currently working on an old project, which has its "own way" of doing a single page application (does Ajax calls to an MVC application, gets the view, replaces the view client-side, appends styles and lots of other stuff!!), and although not ideal, currently I'm stuck with it!
I am trying to integrate an existing React application into this site, and what I'm doing is to use create-react-app and then build to create the bundles, and in the application, in the view begin returned from the server for a specific page, I'm putting script and link tags, pointing to my bundle files. It's worth noting that this server view is a partial ASP.NET MVC view, so my script and link tags are somehow part of the body.
I'm also using styled-components in my React application.
Now, here's the problem: when I first load the page I mentioned, my script is loaded, and I can see all my components being styled properly, but when I navigate in the existing custom SPA application, at some point, styles related to styled-components are messed up, and the only way to get them back is to reload the page.
I was inspecting the page, and I saw that styled-components is doing things with a custom link created in the head, and I see data-styled-components attribute being populated with custom class names as my components are loaded, but when the problem arises, in Chrome Developer Tools, I see that the link tag flashes as if it's changed, but it stays the same.
I have attached a GIF of the tag:
- It starts with the initial page load
- I navigate away and come back and I see more classes being appended
- I repeat the step, and I only see that it flashes
I know the post is already long, but any help is deeply appreciated. Is it possible that, with the current infrastructure, it has something to do with the fact that whenever I come back to the page, a script tag is sent from the server pointing to my React bundle?
Thanks to Max Stoiber for answering in this GitHub issue:
The reason for this behavior is exactly what I mentioned at the end of the question: every time the page is loaded, a script tag is sent from the server, containing the bundle, which in turn causes a new instance of styled-components to be created; this is not supported in styled-components, and that was the issue
I am using your Angular JS Input Dropdown control, and I've followed the code example you put on your demo page to implement the control on a page in my PHP Laravel based website. I have found a problem with the implementation, though, and I was unable to identify what triggered it or how to fix it, so I was hoping that one of you may be of some assistance.
The issue consists of the control not getting rendered into the page until I refresh the page, then it shows up and works perfectly fine, right until I leave the page and get back to it; forcing me to refresh the page every time I re-enter it to be able to use the control.
To elaborate further, the control does not get rendered, but the page acknowledges that there is supposed to be a control on the page, which is why it displays a white blank space at the position where the control is supposed to be. So, I am pretty sure that it's a rendering issue.
The website is using Voyager which has a navigation sidebar, and if the page is entered via the sidebar button, the issue occurs, while if it was entered directly through the url bar or refreshed, then it works fine.
Has this ever happened to anyone before, and if so, how should I go on about fixing it? If not, then what do you propose might be the issue?
Thanks for taking your time to read this issue, and have a wonderful day.
Link to Angular control repository: https://github.com/hannaholl/angular-input-dropdown
EDIT: This issue was self-fixed.
Solution: Manually bootstrap Angular JS.
This issue was self-fixed.
Solution: Manually bootstrap Angular JS.
This should be a fairly obvious thing to be able to do. I have a plugin that has a modal newsletter signup form. I am very happy with the plugin and it has a number of options for the way it launches (after x seconds, when user reaches bottom of screen etc) it also has a manual launch option which gives me these following codes.
My theme uses Visual Composer. I want to launch the popup manually when a site user clicks a button on the homepage. I thought this would be simple but apparently not. The options I have with the standard VC button is shown below; I have tried numerous options of adding classes to the button but I cannot add a shortcode or class to any of the fields to launch the modal. I know there is a javascript onClick function but I'm not very good with Javascript. There must be a simple way to click a button and open a modal, maybe I am overlooking something completely obvious.
OK after reading back my question I thought about adding a custom css class to the button field Extra Class Name and it works. I thought that the extra class name here was for styling the button itself and did not realise that this would also trigger the pop-up as well. Guess I should have checked that first.
I am building a tabbed angular form where each tab has different sections of the form that need to be filled out (similar to Magento and the product setup page).
I want to validate the form, and then focus attention to the first tab that had a validation error (and perhaps highlight that tab).
I am using ui-router-extra for the sticky states so that each tab is a separate child route... however I believe this might not be relevant as the routes are simply hidden, not removed from the DOM.
What methodologies should I be using to achieve such functionality?
Validation is going to be done through Angular as well as server side.
1 way is to have an object that has a list of all fields and the tab that they are contained in. When I get a validation error, I could look this field up and then do a $state.go to show that tab to the user. However, I am looking for a more dynamic way.
I am using ajax modal pop in my asp.net + C# application. My application must show this modal in two situations.
When every thing is ok and the file is read and the data is imported to the database.
When the server side code checks the values that need to be inserted to the database and if they are not correctly formatted, it shows a warning message and a button, so the user would have the option to still insert the erroneous data of the file to the database.
I am using this modal to stop the user from interacting with the controls while the import is being done and it works fine. But for the second scenario I see the modal and when the message and button appear on the screen the modal is still covering the page so the user cannot click on the button or do anything basically. How can I solve this problem?
I thought maybe making the message and button appear on the modal would be an option, but I don't know how to that either. Any suggestions?
/Mono
Heres a tutorial to help you get started wiht the modal itself.
http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/
This is actually a more difficult task then it first appears. Your probably going to want to use ajax, and contact a webmethod to see if there is any errors. Probably make times calls checking for complete, or errors.
File uploads want to do a post back, getting them to do this async is tricky. You may want to research async uploads(or a flash uploader) and see if there are any free uploaders out there. The regular html file uploader control is not asycn.
What you could do is let the page post back, then have javascript run on the page reload, and if it is complete or errors, show the popup.
-Show the modal overlay, while it uploads.
-postback, then run script after postback and on the client page reload show modal success or failed.
I suggest you to change to 3 modal dialogs
Uploading..
Everything went ok
Please fix the following data below:
You will always start with 1.
And then replace it with number 2 or 3, according with what happened at the upload.
If the file upload usually takes usually more than 30 seconds, you may want to consider using a flash upload to provide some feedback to the user at Uploading screen.