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.
Related
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
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">
#...
Have a flask project where I'd like to replace a standard file upload form with something a little bit nicer:
<form action="" method=post enctype=multipart/form-data>
<input type=file name=file>
<input type=submit value=Upload>
</form>
Have been looking into using jasny's bootstrap upload widget, but, after loading the correct .js and .css files and incorporating the following HTML
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" />
</span>
Remove
</div>
</div>
I'm not sure how to set up the event to actually upload the file in question. I'm guessing that I hook a different button up to a submit event, but I'm not certain what to do here.
It looks like that plugin works by binding events to existing DOM objects. Did you call
$('.fileupload').fileupload()
after the DOM was ready? If you called it before the element was added to the DOM, it wouldn't find any element to bind events to.
I am working on a problem that a client has come across, the javascript that they are using is causing a /* and /*]]>*/ to show up on the Login Tooltip. I have been looking for the cause and I am baffled by it. All I know is that it is being generated somehow by the JavaScript at This Page.
The plugin is using this template which doesn't have any of those characters in it:
<script type="text/template" id="api-login-btn-template">
<div id="api-signin">
<label for="api-signin-login">Login : </label><input type="text" id="api-signin-login" name="email" value="" title="e-mail address"/>
<label for="api-signin-pass">Password : </label><input type="password" id="api-signin-pass" name="password" value="" title="password"/>
<div class="sign-in-errors"></div>
<br/>
<button class="sign-in-btn"><span>Sign In</span> <span class="blue">▶</span></button>
</div>
<div id="api-signout" style="display:none">
<p>My Favorite Programs <span class="ltblue_link">▶</span></p>
<p>Application: <a id="api-app-status" href="https://secure.apistudyabroad.com/forms"></a></p>
<button class="sign-out-btn"><span>Sign Out</span></button>
</div>
</script>
The javascript file responsible for this feature is here. I believe the pop up starts at Line 400 with $('.pane-container').each(function() {
This is how your template looks like on generated page (view source in Firefox):
<script type="text/template" id="find-a-program-template">
/*<![CDATA[*/<div style="padding:20px;"><h2>
...
...
...<div class="clear"></div></div>/*]]>*/
</script>
Seems like PHP / WordPress adds that CDATA part to the template during page rendering, but jQuery plugin doesn't know how to ignore it and writes it down instead.
Btw, you also have a bunch of server side <?php the_time('m') ?> calls on the page, but that's probably unrelated.
I am writing a small webapp in Play!, and trying to use UniformJS (http://uniformjs.com/) to make my form elements look good. One page of the app lets users upload a file:
#{ form #Application.upload(), id:'uploadform', enctype:'multipart/form-data'}
<input type="file" id="uploadFile" name="uploadFile"/>
<input type="submit" id="surveyChooseFileButton" class="button" value="Upload" />
#{/form}
The controller looks like this:
public static void upload(#Required File uploadFile, #Required String surveyName) {
...
}
This is all just like one of the Play! examples (http://www.playframework.org/documentation/1.0/5things#a5.Straightforwardfileuploadmanagementa), and that all works fine. The problem is when I apply Uniform to my file input:
$(function(){ $("input:file").uniform(); });
Now the controller receives a null File object! Is there any way around this?
UPDATE:
Removing the id's doesn't do it (although that seemed very plausible!). View-source on the offending element reveals:
<div id="uniform-uploadFile" class="uploader"> <!-- A new div -->
<!-- My input element turns invisible -->
<input id="uploadFile" type="file" name="uploadFile" size="19" style="opacity: 0;">
<!-- Uniform adds these -->
<span class="filename" style="-moz-user-select: none;">No file selected</span>
<span class="action" style="-moz-user-select: none;">Select</span>
</div>
Still no idea what's going on, but this is the end result.
I build your page using play-1.2.3 and uniform-2446d99, and in ff 3.6.20 it seems to work fine here. What version of play! are you using?