I wish to prevent form submission on pressing enter in django. I have searched over internet, and found jquery/javascript based solution. I have tried to use the below js snippet but it is not working. Can anyone help me out here? I am using Django==2.2 version.
<script>
document.getElementById('name').addEventListener('keypress', function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
</script>
Related
I'm new to EmberJS/Handlebars and I have a login form that I'd like the user to be able to submit via the enter key. What's the proper way to capture that event and submit my form?
Currently I know 2 ways:
Follow HTML standard.
Use <form> {{input type='submit' action='submitForm'}} </form>.
Remember to use event.preventDefault() in submitForm, or it will redirect to form's action property (or refresh current page if you didn't set any).
Use keydown/keyup event in every form elements that you want to trigger enter (well, this is really a bad idea, but it works):
Template.hbs
{{input type='textbox' key-up='submitForm'}}
Controller.js
export default Ember.Controller.extend({
actions: {
submitForm(value, event) {
if (event.keyCode === 13) {
// Do something here
}
}
}
});
Answering my own question. Here's what I did:
I found a handlebars attribute insert-newline='[functionCall]' that filters the enter key.
I am making a responsive theme for opencart. When in iPhone view I can click on the cart and the contents drop down and show what is in the cart. The problem I am having is that I can't get the cart to close again so it stays open and in the way.
I managed to get it to work by changing 'mouseleave' to 'click' but it only works once, I then have to refresh the page to get it to work again. I'm sure this is very simple for someone.
Here is the code;
/* Ajax Cart */
$('#cart > .heading a').live('click', function() {
$('#cart').addClass('active');
$('#cart').load('index.php?route=module/cart #cart > *');
$('#cart').live('mouseleave', function() {
$(this).removeClass('active');
});
});
Any ideas?
Thanks in advance.
I put something along the lines of this code above your pasted code in common.js to fix this issue.
$('html').on('touchend.tap', function(){
if ($('#cart').hasClass('active')){
$('#cart').removeClass('active')
}
});
$('div#cart').on('touchend.tap', function(e){
e.stopPropagation();
});
This allows the links to function within the minicart
I'm using ember(+data) and have built a simple signup form, but I'm having trouble getting the form (and ember-data transaction) to work properly after a server-side validation error.
I'm following https://github.com/dgeb/ember_data_example as a guide for how to use transactions, and it mostly works for the Happy Path, but after a server-side validation error, I can't get ember-data to resubmit the API request when I click Submit.
I did some digging around, and I think I'm missing some step related to resetting the transaction after the model becomes invalid or something like that...
Github and App
You can try the app and reproduce the problem at http://emb.herokuapp.com/
You can also examine the full source code at https://github.com/justinfaulkner/ember-data-resubmit
Repro
You can trigger a fake server-side error by completing the form in my app using an e-mail address at #example.com. The Rails API will respond 422 and an errors object keyed to the username/email field.
The field should be highlighted in red with an error -- edit the email address to something that should be valid, and click Submit again. With developer tools open in chrome, I don't see ember-data sending an http request with the click (but a console.log in the controller indicates that the click is indeed being received).
What should happen
After modifying the field with the error, ember-data (I think) changes the model's from invalid to uncommitted so that it gets submitted the next time commit is called. When I click Submit, ember-data should send the HTTP request to my api, and ember should transition to the "Congrats!" page.
Instead, however, the form just sits there. No http request. No transition to "Congrats!".
Here's a screenshot after I clicked Submit a few (18) times after having updated the inputs:
Snippets
Here are some snippets of my ember app:
IndexRoute
My route, which uses startEditing like ember_data_example does:
App.IndexRoute = Ember.Route.extend({
model: function() {
return null;
},
setupController: function(controller) {
controller.startEditing();
},
deactivate: function() {
this.controllerFor('index').stopEditing();
}
});
IndexController
My IndexController is modeled after ember_data_example's ContactsNewController
App.IndexController = Ember.ObjectController.extend({
startEditing: function() {
this.transaction = this.get('store').transaction();
this.set('content', this.transaction.createRecord(App.User));
},
submit: function(user){
console.log("submitting!");
this.transaction.commit();
this.transaction = null;
},
_transitionOnSuccess: function(stuff) {
if (this.get('content.id') && this.get('content.id').length > 0) {
console.log("_transitionOnSuccess");
this.transitionToRoute('success');
}
}.observes('content.id'),
stopEditing: function() {
if (this.transaction) {
this.transaction.rollback();
this.transaction = null;
}
}
});
User
Here's my model. I'm using ember-validations.
App.User = DS.Model.extend(Ember.Validations.Mixin);
App.User.reopen({
username: DS.attr('string'),
password: DS.attr('string'),
profile: DS.belongsTo('App.Profile'),
validations: {
username: {
presence: true
},
password: {
presence: true,
length: { minimum: 6 }
}
}
});
index.hbs
And here's the form from my handlebars template. I'm using ember-easyForm.
{{#formFor controller}}
<div class="row">
<div class="large-12 columns">
{{input username placeholder="Email address"}}
</div>
</div>
<div class="row">
<div class="large-12 columns">
{{input password placeholder="Password"}}
</div>
</div>
{{submit "Sign Up" class="button"}}
{{/formFor}}
In case the library authors see this post, I have made a couple local modifications to the app's copy of ember-easyForm and ember-validations in this commit: https://github.com/justinfaulkner/dockyard-example/commit/f618b0e4fb72314d56bb3a9d95e1325925ba6ad0 . I don't think my changes are causing my problem, though.
becameInvalid and rollback?
I did run across a similar-looking question here: Ember Data and dirty records but when I added a User.becameInvalid to rollback the transaction, this caused the form to empty when trying to re-submit (and still no success having ember-data resubmit the http request).
Thanks!
I'm sure I'm following ember_data_example poorly (or failing to extend it to my use-case) or am making some simple mistake somewhere...
Thanks in advance.
Edit Apr 5
So far, I can find at least two main problems:
this.transaction = null; Do I need this? What should I do instead?
I tried removing this.transaction = null; and ember-data tries to actually commit now (but still won't submit the ajax request). Now, when I type in the invalid field, I can see ember-data try to update the record back to uncommitted/created... but it does it in a different transaction.
I pushed up a no-null branch to the repo that has some console.logs in ember-data that prints out what the transaction ID is... here's a snapshot of my console:
recordBecameDirty is called when I type in the field. Ember-data updates the record to be ready to be committable again. But, it's doing it in some other transaction (458)
But my submit button is tied to the original transaction (316), and there's no records ready to commit in that transaction.... hmm....
This is a known issue with ember data.
See: https://github.com/emberjs/data/pull/539
The simple change in Ember Data in that commit
https://github.com/Cyril-sf/data/commit/fe9c63beb02e9f16051e59a9f7c0a918152a0231
should solve your problem.
I've made a simple website for my daughter.
It is in Dutch and for every page there is a English version as well.
Dutch URL: nl/index.html
English URL: eng/index.html
What I would like to do is give the visitor the option to set one language as preference. So if they come to this site the next time they will automatically linked to the preferable page.
I know this can be done with a cookie and saw the explanation on this forum ( How to remember the currently clicked url? javascript?PHP? ).
I've tried to make this work but apparently I am doing something wrong?
Can somebody guide me through step by step? That would be great!
Kind regards,
Jurgen
If you are familiar with jQuery you can use the cookies plug-in to persist the user's language choice and redirect him to the appropriate page every time he comes back to your site. Bellow is a sample code that uses two buttons to set the language:
First you declare the jQuery scripts (I use to store them in a Script folder, hence the following):
<script type="text/javascript" src="../Script/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../Script/jquery.cookie.js"></script>
Then you define the page ready event like this:
$(function () {
var url = 'your_url';
var english_page = 'eng/index.html';
var dutch_page = 'nl/index.html';
if ($.cookie('default_page') != null) {
if (window.location.href != url + '/' + $.cookie('default_page')) {
window.location.href = url + '/' + $.cookie('default_page');
}
}
$('#set_english_butt').click(function () {
$.cookie('default_page', english_page, { expires: 999 });
alert('English was set as the default language');
});
$('#set_dutch_butt').click(function () {
$.cookie('default_page', dutch_page, { expires: 999 });
alert('Dutch was set as the default language');
});
});
Which is hooked to some html buttons in you page:
<div>
<span>Select your language:</span>
<button id="set_english_butt">English</button>
<button id="set_dutch_butt">Dutch</button>
</div>
I've struggled with this for hours... new to creating graph actions... why doesn't our approved graph action work? We expect that when a user clicks the "Click Here!" button that it will show that they've scheduled a blood donation on their timeline. We have a form button coded precisely as outlined in the FB tutorial, and it's on a page tab we've added to a page, but nothing happens when you click the "Click Here!" button.
The page tab in question -> http://www.facebook.com/cityofhope.donateblood/app_323470837712150
Here's the code:
<script type="text/javascript">
function postSchedule()
{
FB.api(
'/me/cohblooddonor:schedule',
'post',
{ blood_donation: 'http://www.cityofhope.org/giving/Documents/blood-donor.html' },
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('You've shared with your friends! Action ID: ' + response.id);
}
});
}
</script>
And the button:
<form>
<input type="button" value="Click here!" onclick="postSchedule()" />
</form>
Any help is appreciated! I've been going at this for hours. Is it an authentication issue? thanks in advance!
You've got a syntax error due to mismatched quotes on line 58 of your source: 'You've ...'
You could escape the literal apostrophe with a backslash, or change "You've" to "You have".
You also have a few other errors on the page. Check these out using the Javascript console on a modern browser.