Display notification in catch block of Axios.
problem encountered is
Error Message not hiding after specified time using setTimeout.
There are two possible solutions. Because alert cannot work like this you coded.
Using React toastify
Making your custom alert
References:
Making own toaster like this: https://www.w3schools.com/howto/howto_js_snackbar.asp
Making alert like this: How can I auto hide alert box after it showing it?
Related
I am getting a HTML div from an API response and I want to send that response to the browser print command at a click of a button. Usually, window.print() works if you want to print the current page. But my current page has a different UI and the page I want to print is different. Any suggestion on how we can do this in React js?
Changing the current page and calling window.print() doesn't look like a feasible solution. The UI doesn't look that way. Any other solution appreciated. Thank you.
You might consider a package like https://www.npmjs.com/package/react-to-print
or check out this existing answer:
How to print React component on click of a button?
Can someone please explain how can I go about creating the following page and what techniques should I adopt:
The user should be able to click on a button which should result in a popup.
The popup should have a static page with instructions and button to click which takes the user to the next step in the same popup.
At the next step the functionality should run to take input from the user and save it to the server.
The user should see a confirmation finally and on clicking finish, the popup should hide.
From what I understand, I should try the following:
use javascript onclick and fadeIn function to create the popup.
continue changing the same div using onclick and AJAX to create stepwise kind of a format and carry out the functionality.
use XMLHTTPRequest to upload data acquired and finally use fadeOut to hide the popup.
The reason why I am thinking in these lines is because I have had very little exposure to web designing and hence would love to get some expert views on if this is the right approach and if not then what should be a better way to do it. Is there is some existing literature/method which talks about it?
Any help would be much appreciated.
For first step
Use javascript onclick function. But before this keep your static content ready and than use jQuery UI to appear it as good Dialog Box. For example see this
For second step
The user will never know that you have changed the dialog. Just you can load new dialog with new content in it. When you click button on first page, make that first dialog box is closed.
For third step
Instead of static content make the response set to dialog, here you may use Ajax/post call.
Las step
Its not compulsion to use XMLHTTPRequest. You can even submit form in jQuery post/ajax. Than you can reload the page with confirmation message send in response from server or you may use jQuery to make the confirmation message appear.
I am writing request specs ... I use Capybara... And I am in trouble with some modal windows.
What I actually want in my test is to fill in a form that pops up in a modal window.
The modal is created with Bootstrap from Twitter (http://twitter.github.com/bootstrap/javascript.html#modals)... and it's going through a set of transitions (but I don't know if this is relevant to what I'm about to say).
I have tried a few workarounds I found on the web, like:
A) switching between pages with page.driver.browser.window_handles
page.driver.browser.switch_to.window(page.driver.browser.window_handles.last)
B) using wait_until to make sure that the modal loads
def modal_wrapper_id
'#modal-edit'
end
def modal_visible
wait_until { find(modal_wrapper_id).visible? }
rescue Capybara::TimeoutError
flunk 'Expected modal to be visible.'
end
but none of those worked... so I thought to render the number of window handles at the moment when the modal window is active...
So I did this:
puts page.driver.browser.window_handles.length.should == 2
And I got this:
Failure/Error: page.driver.browser.window_handles.length.should == 2
expected: 2
got: 1 (using ==)
From what I understand, practically my modal window doesn't exist.
Any help on this one would be much appreciated.
Thank you.
I didn't use Capybara, but your problem has to do with the fact that Bootstrap's modal dialog is actually a pseudo-modal, in that it's actually just a div element and a transparent overlay behind it. A true modal dialog would be one created using window.confirm, for example, which can indeed be queried using your sample code. In your case you should give the modal div element an id, and use that as a handle to query it from Capybara and wait until its display is "block". Didn't test anything though.
Capybara by default uses :rack_test driver. Can you confirm you're using Selenium WebDriver or other driver where opening a modalbox is actually possible?
i am using struts framework along with jquery and there is button. On click of that button action to save data is called if data is valid else error in top div is shown. But the problem is that its not scrolling to show user error and i want it to scroll to show user the error message.
I know that it can be solved using href='#' but it is already being used to call the action.
Your question doesn't really make it clear whether this validation happens client-side or if you're talking 'bout a response from the server, and you haven't shown any code, so I'm not sure where exactly you need to put the following to fit your existing implementation, but anyway you can bring an element into view like this:
document.getElementById("idofyourdivhere").scrollIntoView(true);
The parameter true should align the element to the top of the scrolling area; if you pass false instead it should align with the bottom.
I don't know if there's a jQuery method to do the same thing, but of course you can select the div with jQuery (you might already be doing so to set the error message) and then call the non-jQuery function - the following uses jQuery to set the error message and unhide the div (obviously this assumes it was hidden initially) before bringing it into view the non-jQuery way:
var yourDiv = $("#idofyourdivhere");
yourDiv.html("Your error message here").show();
yourDiv[0].scrollIntoView(true);
I want to display an error message on my asp.net application. This message is a warning message, this is the way I did it:
CmdCalcInvoke.Attributes["onclick"] = "return confirm('Are you sure you want to calculate the certification? WARNING: If the quarter has not finished, all the partners status will change')";
The code above works fine. The CmdCalcInvoke is an htmlInputButton. This is the message that the message box displays;
Are you sure you want to calculate the certification? WARNING: If the quarter has not finished, all the partners status will change
What I want to do is to display this message, but wanted to highlight the WARNING word by making it bold, or displaying the word in red, can this be done???, can't remember seeing a message box with this characteristics, but I though i would ask in case
Any suggestions will be welcome
you can if you dont use the default alert boxes. Try using a javascript modal window which is just normal div markup that you can control the styling of. Look at blockui for jquery (there are loads of others)
You can try something like: http://weblogs.asp.net/johnkatsiotis/archive/2008/09/14/asp-net-messagebox-server-and-client.aspx
The modal dialog control I use is :
http://foohack.com/tests/vertical-align/dialog.html
http://foohack.com/2007/11/css-modal-dialog-that-works-right/
I find it works well across all browsers. I've hacked it round to work well with ASP .NET, and that was pretty easy.
It isn't possible to apply formatting to a standard dialogue box. However if you really want to format it you could flash up the message in HTML either next to the button or as a absolutely placed div, which you could format with CSS.
Else, use something like a LightBox based solution like Thickbox?