I'm trying to render a js alert directly after a user clicks on a submit.
Here's what I have and what I've tried:
That's my erb file.
<form action="/welcome/subscribe">
<div>
<div id="bottomm">
<input id="bottom" type="text" name="email" placeholder="Adresse mail" />
</div>
<div>
<input type="submit" value="Ok"/>
</div>
</div>
</form>
Here's the subscribe method in my controller:
def subscribe
#test = Test.new
#test.email = params['email']
#test.save
binding.pry
render js: "alert('test)";
end
But I get this error:
Security warning: an embedded <script> tag on another site requested protected JavaScript. If you know what you're doing, go ahead and disable forgery protection on this action to permit cross-origin JavaScript embedding.
Any idea? :/
edit:
By adding theses 2 lines I can now avoid the warning:
protect_from_forgery with: :exception
skip_before_action :verify_authenticity_token
But now it's redirecting me on a blank page with just written on it:
alert('test')
You are missing data-remote attribute in your form, just add it:
<form action="/welcome/subscribe" date-remote="true">
<div>
<div id="bottomm">
<input id="bottom" type="text" name="email" placeholder="Adresse mail" />
</div>
<div>
<input type="submit" value="Ok"/>
</div>
</div>
</form>
Update
Btw, from the given error, you may add protect_from_forgery to your application controller:
class ApplicationController < ActionController::Base
# Prevent CSRF attacks by raising an exception.
protect_from_forgery with: :exception
# Other code
end
For more detail, please read this documentation
You need to specify that your form will be submitted asynchronously (IE without a full page refresh). When using form_for to generate your form, you would include :remote => true. Since you are typing out your full form you need to do this:
<form action="/welcome/subscribe" date-remote="true">
#...
Related
I have a standard jQuery-Mobile multipage HTML file that I need to access from my Sinatra application with the ERB templates. I don't see how to access a bookmark or anchor within the file.
My code is simple:
get '/login' do
erb :'admin.html#login_page'
end
But, what I get is:
No such file or directory # rb_sysopen - .../views/admin.html#login_page.erb:
The file that I am trying to access is
admin.html.erb
with bookmark of login_page.
The portion of the HTML template I am trying to access is as follows, though other pages are included.
<div data-theme="b" data-role="page" id="login_page">
<%= partial :'main-header.html', locals: {page: 'Management Console Login'} %>
<div class="ui-content">
<a href="#login" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left">Admin
Login</a>
<div data-role="popup" data-history="false" id="login" class="ui-content" style="min-width:250px;">
<form action='/login_process' method='post' data-ajax='false'>
<div data-role="controlgroup">
<h3>Administrative Login</h3>
<label for="logon" class="ui-hidden-accessible">Logon:</label>
<input type="text" name="user" id="logon" placeholder="Logon">
<label for="password" class="ui-hidden-accessible">Password:</label>
<input type="password" name="password" id="password" placeholder="Password">
<input type="submit" id="loginButton" data-transition="flip" value="Login">
</div>
</form>
</div>
</div>
<%= partial :'frontend/footer.html' %>
<script type='application/javascript' src='assets/login_modal.js'></script>
</div>
I'd simply render it but I need the Ruby translator. Any idea how to make this work or of a better way to do it? Thanks...
Got it basically working with a twist, but still had problems with other code so I am not using it. I converted the anchor to a local variable and then referenced that it the HTML JavaScript to go to that anchor.
In Sinatra:
erb :'admin.html', :locals => {:anchor => "#login_page"}
In the page:
let body = $("body");
let anchor = <%= "\'#{anchor}\'" %>;
body.on("pagecontainerbeforeshow", function (event, ui) {
body.pagecontainer("change", anchor);
});
This worked. The issue I had was that I had to make dynamic changes on one page, based on beforeshow, that I could not get to work.
But, I did solve the question.
I have the following form submit code
<div class="top-links">
<ul>
<li>Sign In
<div class="top-link-section">
<form id="top-login" role="form" action="">
<div class="input-group" id="top-login-username">
<input type="text" class="form-control" name="username" placeholder="Username" required>
</div>
<div class="input-group" id="top-login-password">
<input type="password" class="form-control" name="password" placeholder="Password" required>
</div>
<div class="input-group" id="top-login-remember">
<label><input type="checkbox" value="yes" name="remember_me"> Remember me</label>
</div>
<button class="btn btn-danger btn-block" type="submit">Sign In</button>
</form>
</div>
</li>
</ul>
</div>
If the user does not click on any anchor link in the page before sign in, then the form login works fine.
Working fine
http://example.com/index.php
However, if the page url become something like (with anchor # behind the url address)
http://example.com/index.php#
as I got some links that is of
Events
If user click Events to see some popup before they login, the login form will not work, How do I handle such scenario to ensure login still proceed even with # at the url address.
--
Assume after login always goes back to
example.com/index.php but I prefer if it can be example.com without the index.php
If below code puts # at the end of the page then you can make it to return false to do nothing when user clicks on this click and just open the popup.
Events
You can use pure JS or jQuery to achive the same. So modify the HTML of those elements like this,
Events <!-- for plain JS -->
Events <!-- for plain jQuery -->
At JS side you need to add following:
<script>
function eventClickBtn() {
// Your logic to open popupbox
return false;
}
// For jQuery
$('.eventClickBtn').click(function(e){
e.preventDefault();
});
</script>
By using event.preventDefault(); default action of the event will
not be triggered, same goes for plain JS. If you return false it won't fire up the hyperlink mentioned in href
this bites me too, like many others I have a simple ng-form (:
cleared for bravity) in a partial:
<form ng-submit="functionName()">
<input type="text" class="postField" ng-model="model.text" required ng-maxlength=200 />
<button class="postBT" ng-click="functionName()" ng-class="BToverclass" ng-mouseover="BToverclass = 'overShadow'" ng-mouseleave="BToverclass=''">Post</button>
</div>
</form>
for some reason every form submit, we get 2 posts to the controller, with all the data doubled. I checked and the specific controller doesn't appear in the html, but only in the route. Any idea what I'm missing?
Thanks!
You have both an ng-click() calling functionName() and a call to it from ng-submit. Each results in a call to your function. You only want the submit one.
FYI, you also have a </div> with no opening <div> for it to close.
Here's working code:
<form ng-submit="functionName()">
<input type="text" class="postField" ng-model="model.text" required ng-maxlength=200 />
<button class="postBT" ng-class="BToverclass" ng-mouseover="BToverclass = 'overShadow'" ng-mouseleave="BToverclass=''">Post</button>
</form>
I'm using jquery mobile 1.0 alpha 4.1 to build a login form.
The login form submits just fine the first time when I load it from:
http://m.myapp.local/
the form action is the following:
<form action="http://m.myapp.local/default/login" method="post">
this works fine the first login attempt, but when the login fails, we return to the following URL (this is jquery mobile doing this):
http://m.myapp.local/#default/login
Now when I try to login again / submit the form again nothing happens and I can debug to find the error. It says:
Javascript console: Uncaught TypeError: Cannot call method '_trigger' of undefined
When I debug even further, I see that jquery mobile is trying to submit to the following url:
http://m.myapp.local/default/logindefault/login
instead of
http://m.myapp.local/default/login
of course, that url does not exist which causes the error. Question is, how can I prevent jq mobile from behaving this way?
Full form:
<div data-role="content" data-theme="c">
<form action="http://m.myapp.local/default/login" method="post">
<div data-role="fieldcontain" class="center">
<input placeholder="Shop Name" id="login_sitename" type="text" value="" name="sitename" />
<input placeholder="Email" id="login_username" type="text" value="" name="username" />
<input placeholder="Password" id="login_password" type="password" name="password" />
</div>
<button type="submit" data-theme="b">Log in</button>
</form>
</div>
a strange thing I've noticed is that when I remove the hash tag from the url and submit the form again, it all works, so it definitely has something to do with that.
BUT, when I remove the hash tag, it also stops using transitions, the back button is gone as well and the jquery mobile "loading" dialog is also gone...
seems like it's a jquery bug. When using alpha 2, it works...
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
You might try diabling AJAX for form posting. I had the same issues on my site:
http://jquerymobile.com/demos/1.0a4.1/#docs/api/globalconfig.html
http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-sample.html
You can try this in the submission link:
data-ajax="false"
Try using a "%23" (without the quotes) in place of the # symbol. So if the URL reads
http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-sample.html
replace it as
http://jquerymobile.com/demos/1.0a4.1/%23docs/forms/forms-sample.html
Hope this helps!
I have a "password_reset_status" JSP that is linked to by an e-mail that my web-app sends in response to a password reset request. The JSP is capable of displaying 1 of 3 things:
A form to enter a new password if the reset code in the link matches the one in the database
A message stating that the reset code is incorrect
A message stating that an error has occurred (no reset code for user, code expired, database connection problems, etc)
All of the code works, except the submission of the form. I have jQuery validation on the form that prevents submission until the input is valid. That works as its supposed to. However, when the input is valid (I know its valid because I have customized it to display checks and x's next to the valid and invalid fields, and the field attributes indicate they're valid), it doesn't execute its "action" attribute if its any javascript other than "alert()" (not even an alert with a string)!
I have a similar system for the other forms in my web app (the only differences are the fields that are to be validated, and the ajax function called to send the data) and they all behave as they should. However, they are all on a regular html page. Do you think the problem could be caused by the fact that this is a JSP?
Here's the code for the body of the JSP:
<!--The action normally contains an AJAX function that populates the text of "createNewPasswordStatusMessage", but the alert was put there for debugging purposes (it won't even launch the alert! -->
<body>
<c:catch var="e">
<c:choose>
<c:when test="${sessionScope.passwordResetStatus == applicationScope.passwordResetStates.passwordResetCodeCorrect}">
<div id="content">
<h1 id="title"><!--Title of my web app--></h1>
<form id="createNewPasswordForm" action="javascript:alert(\"What is going on?\")" method="post">
<div class="formRows"> <label class="nameLabels" for="newPassword">New password:</label> <input class="formFields" type="password" name="newPassword"/> </div>
<div class="formRows"> <label class="nameLabels" for="confirmNewPassword">Confirm:</label> <input class="formFields" type="password" name="confirmNewPassword"/> </div>
<div class="formRows"> <input type="hidden" name="ID" value="${sessionScope.ID}"/></div>
<div class="formRows"> <input type="hidden" name="firstName" value="${sessionScope.firstName}"/></div>
<div class="formRows"> <input type="hidden" name="action" value="createNewPassword"/> </div>
<div class="formRows"> <input id="newPasswordFormSubmitButton" type="submit" value="Submit new password"/> </div>
</form>
<p id="createNewPasswordStatusMessage"></p>
</div>
</c:when>
<c:when test="${sessionScope.passwordResetStatus == applicationScope.passwordResetStates.passwordResetCodeIncorrect}">
<!-- Message stating that password is incorrect. Omitted for brevity. -->
</c:when>
<c:when test="${sessionScope.passwordResetStatus == applicationScope.passwordResetStates.passwordResetCodeExpired}">
<!-- Message stating that reset code has expired or that an error may have occurred. Omitted for brevity. -->
</c:when>
</c:choose>
</c:catch>
<c:if test="${e!=null}">The caught exception is:
<div id="content">
<h1 id="title"><!--Title of my web app--></h1>
<p id="statusMessage">"<c:out value="${e}" /></p>
</div>
</c:if>
</body>
I didn't want to inundate people with the head of the document, which contains the javascript (after the bug is worked out it will be put in to a seperate javascript file). The validation javascript works while a simple alert doesn't, so I think it may be something with the JSP code of the form. Can anyone point me in the right direction?
Edit
So to summarize:
action="(some url)" WORKS
action="alert()" WORKS (displays IP
of server)
action="(any other javascript)" DOES
NOT WORK
Try adding your handler using
$('#createNewPasswordForm').submit(callback)