Rails show flash message before controller action / loading info - ruby-on-rails

What I want to do is actually very simple but i don't know how to achieve it.
The user can enter information and click on "bulk create" and create multiple objects. when finished, the user sees a flash message saying "Saved successfully". But the saving can sometimes take a bit longer, so I also want to show a message saying "Saving..." so the user knows something happens.
It should go like this:
user enters information
user clicks on create button
flash saying "Saving data..." appears
Controller finished and new flash appears that says "Saved successfully" (or "couldn't save etc." when it failed)
I have 1, 2, and 4, but I don't know how to achieve 3 since there is no redirect or something like that... Can I trigger a flash via javascript maybe? Or do I have to do something completely different?

What i propose is creating a div element in your view and placing it where your want your alert to appear. When button is clicked make AJAX post request:
$(".button").click(function () {
$("#alert_div").innerHTML = "Saving";
$.ajax({
url: '/form_submit',
type: 'POST',
data: formData,
success: function(){
$("#alert_div").innerHTML = "Saved successfully";
},
error: function(){
$("#alert_div").innerHTML = "Something went wrong!";
}
});
});

Related

What do I do with low Scores in reCAPTCHA v3?

I have set up reCAPTCHA v3 on my ASP.NET MVC project. Everything is working fine and is passing back data properly.
So the code below depends on another dll I have, but basically, the response is returned in the form of an object that shows everything that the JSON request passes back, as documented by https://developers.google.com/recaptcha/docs/v3
It all works.
But now that I know the response was successful, and I have a score, what do I do? What happens if the score is .3 or below? Some people recommend having v2 also set up for secondary validation (i.e. the 'choose all the stop signs in this picture' or 'type the word you see'). Is that really the only 'good' option?
Obviously the code isn't perfect yet. I'll probably handle the solution in the AJAX call rather than the controller, but still. What should I do if the score is low?
I read this article
reCaptcha v3 handle score callback
and it helped a little bit, but I'm still struggling to understand. I don't necessarily need code (although it would never hurt) but just suggestions on what to do.
VIEW:
<script src="https://www.google.com/recaptcha/api.js?render=#Session["reCAPTCHA"]"></script>
grecaptcha.ready(function () {
grecaptcha.execute('#Session["reCAPTCHA"]', { action: 'homepage' }).then(function (token) {
$.ajax({
type: "POST",
url: "Home/Method",
data: JSON.stringify({token: token }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
console.log('Passed the token successfully');
},
failure: function (response) {
alert(response.d);
}
});
});
});
CONTROLLER:
[HttpPost]
public void ReCaptchaValidator(string token)
{
ReCaptcha reCaptcha = new ReCaptcha();
Models.ReCaptcha response = new Models.ReCaptcha();
response = reCaptcha.ValidateCaptcha(token);
//response returns JSON object including sucess and score
if (response.Success)
{
//WHAT DO I DO HERE????
}
}
Ended up getting the answer from another forum. Basically, the answer is "anything you want". There is no right or wrong when handing a successful response.
So what could be done, is if the response is successful and CAPTCHA doesn't throw a flag, do nothing. But if CAPTCHA is unhappy, you could display an alert or a banner that says 'could not process', or you could even add in CAPTCA version 2, which would make them do the picture test or the 'I am not a robot' checkbox, etc.

Rspec/capybara - simulate switch from Online to offline within a test (webkit driver)

I have a ruby on Rails 4 app.
A user loads a page (called deal_page) then he clicks on a button which loads a Rails UJS modal message.
If he is online WHEN he clicks the button, I show a message using javascript offline status recognition (inside the Rails UJS ajax event).
on('ajax:error',function(event,xhr, status, error){
var isOnLine = navigator.onLine;
event.preventDefault();
if (isOnLine) {
//do stuff }
else {
// for disconnected users WHEN triggering call to server, invite to reconnect
var msg;
msg = Messenger().post({
message: "You lost internet,You need to be connected"
});
}
});
I want to test in rspec/capybara (I use webkit driver) that the right content ("You need to be connected. Please connect and try again") is displayed in that case in my feature test.
context "As signed-in visitor who is OFFLINE line when he clicks on the area triggering the modal" do
it "displays the right message " do
visit deal_page_path(deal)
# HOW TO ASSERT THAT THE USER LOSES HIS INTERNET CONNECTION
# USER GOES OFFLINE
first("a#button").click
within('ul.messenger') do
expect(page).to have_content('You lost internet,You need to be connected')
end
end
end
The complexity is that I can't disconnect him from the beginning of the test as he needs to be connected to load the page visit deal_page_path(deal) but then I want to simulate that he loses the internet connection.
How to achieve this ?
Assuming you're just checking window.naviagtor.onLine to determine whether or not it is on/offline (not depending on any events or anything) and because you're using capybara-webkit (won't work in selenium since FF won't let you overwrite navigator, not sure about poltergeist) you can just overwrite window.navigator with the result you want to get. You'll also need to generate an error response for your ajax request, which you can do with puffing-billy
page.execute_script "window.navigator = { onLine: false }"

MVC Button Click performs action without redirecting

I have a table where users are allowed to "tick" or "cross" out a row. Ticking a row changes the status value to "Approved" and crossing it changes it to "Disapproved". I'm currently using the Edit scaffold to perform it. How do I do this without having the user being redirected to the view. I just want the user to click it and the page refreshes, with the status value being updated.
I'm not sure what code to post here either since I don't know how to write it. If any part of my program is required, please let me know. I'll include it here. Thank you :>
Add css classes to the 2 buttons "approve-btn" and "reject-btn".
Create javascript function to approve and reject and bind them to
the 2 classes
Create 2 backend functions
Make ajax calls from the JS functions to your backend functions passing the id of the row item
In the "success:" of the ajax call manage the change of the status to show "approved" or "rejected"
To make ajax call you can use the following example (although there are tons of example on google). Since you're modifying data you should use POST call and since it is a POST call, you should add a RequestVerificationToken to prevent CSRF attacks.
function Approve(id){
securityToken = $('[name=__RequestVerificationToken]').val();
$.ajax({
url: '/YourControllerName/Approve/' + itemId,
type: 'POST',
data: {
"__RequestVerificationToken": securityToken
},
success: function (data) {
if (data == 'success')
//use jQuery to show the approved message;
else
alert("something went wrong");
},
error: function (request, err) {
alert("something went wrong");
}
});
}
The Token should be created in the View adding this line:
#Html.AntiForgeryToken()

Confused about passing parameters from JavaScript Ajax call back to controller to render a form

Scenario: I click on some objects,table rows,etc on my page and I get their IDs for example I click on Providers list and get provider_id. And then I click on a button on the page:
Now I have a service that accepts those parameters and passes back to me a JSON which I want to show it in a Table form in my next page. So this button click is responsible for that.
So the page I am gonna show that Table in it is Pharmacy/Patients so I have a
PatientsController#index method.
Now in JS side I am doing an Ajax call like this:
// provider_id is global var and coming from the clicks on other parts of the page.
//so we have some value like 234 for it.
$('.personlistbtn').click(function(e) {
$.ajax({
type: 'GET',
data : { 'provider' : provider_id, 'therapeutic_class' : 'all' },
url: '/pharmacy/patients',
async: false,
success: function (data) {
// not sure what to write in here really.
},
error: function () {
// show some oops error
}
}
});
});
So that makes the call to /pharmacy/patients
Now I am confused how to handle it from there?
PatientsController: Maybe something like this?
def index
if request.xhr?
#my_json = MyNetHTTPFunction.getMeBackJSON(params)
end
end
MyNetHTTPFunction.getMeBackJSON(params) is just a method I have written that accepts the query params I am passing to it ( which hopefully are coming from Ajax call right? and queries the web-service and returns me back the JSON I need to use in my View.

Passing Data to master page and user control from view on button click

My scenario is that In MVC
my page(view) has both user control(partial view) and master page. i have button in my page(view). while clicking on the button
1) i need to load grid in user control ,
2) i have to take div which is in master page for displaying acknowledge message like "Successfull loaded".
i saw in some forum to do these two actions seperately but i need to trigger these two in single button click.
How can i do this?
You can use javascript for this.
$("#button-id").live('click', function()
{
$('#master-page-message-id').text('Your message');
//Send request to server
$.ajax({
url: #Url.Action(...),
error : function(...){
$('#master-page-message-id').text('Your failure message');
},
success: function(data){
$('#master-page-message-id').text('Your success message');
//update your greed if you get json response
greed.update(data);
//OR if you get simple html response
$("#greed-id").html(data);
}
});
});

Resources