I have the following code. how can I make it short so it work with click and enter so I dont have to duplicate it.
$(document).ready(function(){
$(document).keypress(function(e) {
if(e.which == 13) {
$('form#myform').submit();
}
});
$('#mybutton').click(function() {
$('form#myform').submit();
});
});
this would be a shorter one, it takes advantage of the event bubbling:
$(document).ready(function(){
$(this).on('keypress click', function(e) {
if(e.which == 13 || e.target.id==='mybutton')
$('form#myform').submit();
});
});
this is how it works: http://jsfiddle.net/e6L3W/
Try this:
(Although use of $(this) on document ready is not clear or might be its a typo and it supposed to be a input box.)
Hope this helps the cause and also read the link below: :)
Submitting a form on 'Enter' with jQuery?
code
$(document).ready(function(){
$('#search').keypress(function(event) { //<<== #search is input box id
if ( event.which == 13 ) {
$('#mybutton').trigger('click');
}
})
$('#mybutton').click(function() {
$('form#myform').submit();
});
});
OR
var myFunction = function() {
$('form#myform').submit();
}
$('#search').keypress(function(event) { //<<== #search is input box id
if ( event.which == 13 ) {
myFunction;
}
})
$('#mybutton').click(myFunction);
OR
You could try chaining like this:
This will bind #element to the events but might be you are looking to bind 2 separate elements with 2 separate event but same outcome.
$('#element').bind('keypress click', function(e) {
...
});
$(document).ready(function(){
$(this).bind('keypress click', function(e) {
if(e.type == 'click') {
if(e.target.id == 'mybutton') {
$('form#myform').submit();
}
} else if(e.type == 'keypress') {
if(e.which == 13) {
$('form#myform').submit();
}
}
});
});
Related
When a user clicks the edit icon the contents of a selectpicker are updated then refreshed. Then the selectpicker's value is updated, then refreshed again, but for some reason it is not updating with the selected value.
Everything works fine when I manually enter in the the same code in the console.
$('#IncWidgetId').val(864)// the value used when breaking in console
$('#IncWidgetId').selectpicker('refresh')
I have ensured that the selectpicker is updated with the new option values along with confirming the deferred is firing in the proper order.
As a double check, I also have separated the .selectpicker('refresh') to make sure it didn't try to fire before the option was selected due to async, but it is still not updating the selectpicker with the selected value.
$(document).on('click', '[id^=EditWidgetId-]', function () {
var id = $(this).attr('id').split('-')[1];
var mfg = $(this).data('mfg');
var widgetid = $(this).data('widgetid ');
var mfgSelect = $('input[name=mfg][value="' + mfg + '"]');
mfgSelect.prop('checked', true);
$.when(LoadWidgets(mfg)).then(function () {
console.log('then function');
$('#IncWidgetId').val(widgetid );
}).done(function () {
console.log('done function');
$('#IncWidgetId').selectpicker('refresh');
});
$('#modalWidgetNew').modal('show');
});
function LoadWidgets(mfg) {
var r = $.Deferred();
console.log('before ajax');
r.resolve($.ajax({
url: '/Widgets/FilterWidgetsDropdown',
type: 'GET',
cache: false,
data: { mfg: mfg },
success: function (partial) {
$('#IncWidgetDDArea').html(partial);
$('#IncWidgetId').selectpicker('refresh')
},
error: function (x, e) {
if (x.status == 0) {
alert('You are offline!!\n Please Check Your Network.');
} else if (x.status == 404) {
alert('Requested URL not found.');
} else if (x.status == 500) {
alert('Internel Server Error.');
} else if (e == 'parsererror') {
alert('Error.\nParsing JSON Request failed.');
} else if (e == 'timeout') {
alert('Request Time out.');
} else {
alert('Unknow Error.\n' + x.responseText);
}
}
})).done(function () {
console.log('after ajax');
return r.promise();
});
}
What am I missing?
There was such an issue in old versions of this plugin.
Try to destroy it and initialize again. Something like this:
$('#IncWidgetId').selectpicker('destroy');
$('#IncWidgetId').selectpicker();
I have this issue, maybe you guys can help me fix it.
Botton Delete:
<button type="button" class="del-trade">Delete</button>
Ajax code:
$(function(){
$("#modaledittrade").on("show.bs.modal", function (e) {
$('.del-trade').click(function(){
var id = $(e.relatedTarget).attr( "data-id" );
if( confirm( "Are you sure?") )
{
$.post( "actions.php?a=del-trade", { "id" : id },function(d){
if( d.type!="ok" )
{
alert( d.msg );
return;
}
$( "tr#" + id ).remove();
resetForms( e.currentTarget );
$( "#modaledittrade").modal('hide');
},"json");
}
});
});
});
The code is give me loop twice... I mean ask me for function confirm() twice.
Video demo: http://sc.sny.pt/sJH6
On what I see, I think reason is because you create multiple instance of onclick event:
first time you delete (when modal is shown) create onclick event and the
second time that create a second event.
This should work :
$(function(){
/*$("#modaledittrade").on("show.bs.modal", function (e) {
}); */
$('.del-trade').click(function(){
var id = $(e.relatedTarget).attr( "data-id" );
if( confirm( "Are you sure?") )
{
$.post( "actions.php?a=del-trade", { "id" : id },function(d){
if( d.type!="ok" )
{
alert( d.msg );
return;
}
$( "tr#" + id ).remove();
resetForms( e.currentTarget );
$( "#modaledittrade").modal('hide');
},"json");
}
});
});
You can pull the click event out, and this will still work as expected, using on:
$(document).on("click", '.del-trade', function(e){
var id = $(e.relatedTarget).attr( "data-id" ); // can still get ID same way
if( confirm( "Are you sure?") )
{
$.post( "actions.php?a=del-trade", { "id" : id },function(d){
if( d.type!="ok" )
{
alert( d.msg );
return;
}
$( "tr#" + id ).remove();
resetForms( e.currentTarget );
$( "#modaledittrade").modal('hide');
},"json");
}
});
EDIT: Or, when the modal is hidden, turn off the delete click action:
$("#modaledittrade").on("hide.bs.modal", function (e) {
$('.del-trade').off("click");
});
$("#modaledittrade").on("show.bs.modal", function (e) {
$('.del-trade').on("click", function(e) { .. });
});
I managed to make this code to submit a form, it works fine, but I can not implement a validator does not need it, but it shows no message just does not send the form is empty.
I searched but could not quite do it. Can anyone help me?
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#newsletter').submit(function(){
var dados = jQuery( this ).serialize();
jQuery.ajax({
type: "POST",
url: "newsletter_cadastrar.asp?f=1",
data: dados,
success: function( data )
{
$('#resultado-form-newsletter').html(data);
}
});
return false;
});
});
</script>
<input id="nomenewslbase" name="nomenewslbase" type="text">
<input id="emailnewslbase" name="emailnewslbase" type="email">
Thank you for your attention.
If you are looking for applying jquery validation rules then you can do it like:
<script type="text/javascript">
function ValidationRules() {
}
ValidationRules.prototype.initializeSaveValidators = function() {
jQuery.validator.addMethod("csProjectName",
function(value, element) {
if ($.trim($('#txtProjectName').val()) == "") {
if ($.trim($(element).val()) != '')
return true;
else
return false;
} else
return true;
}, "Project Name is required");
jQuery.validator.addMethod("csDescription",
function (value, element) {
if ($.trim($('#txtDescription').val()) == "") {
if ($.trim($(element).val()) != '')
return true;
else
return false;
}
else
return true;
}, "Description is required");
};
ValidationRules.prototype.enableSaveValidators = function () {
jQuery.validator.classRuleSettings.csProjectName = { csProjectName: true };
jQuery.validator.classRuleSettings.csDescription = { csDescription: true };
};
ValidationRules.prototype.disableSaveValidators = function () {
jQuery.validator.classRuleSettings.csProjectName = { csProjectName: false };
jQuery.validator.classRuleSettings.csDescription = { csDescription: false };
};
jQuery(document).ready(function () {
var validationRules = new ValidationRules();
validationRules.initializeSaveValidators();
validationRules.enableSaveValidators();
$("#btnsubmit").click(function () {
applyjQueryValidation();
return false;
});
});
function applyjQueryValidation() {
var isValid = $('#newsletter').valid();
//here you can manually check for some extra validations
if (isValid==true) {
alert("valid");
//here is you ajax call
}else{
alert("invalid");
}
}
</script>
Also, you need to include jquery.validate.js
Here is the JSfiddle working example.
I have the following js code:
function getSelectedPlace(form) {
var places = 1
$(form).find(":input").each(function () {
if ($(this).attr("name") === "Signed_Order_B64") {
$.ajax({
type: 'POST',
url: '/MyController/MyAction',
data: "id=" + places,
success: function (response) {
if (response.Result) {
ret = response.Message;
result = true;
$("input[type=hidden][name=email]").val(response.Email);
$("input[type=hidden][name=appendix]").val(response.Appendix);
} else {
// show fancybox
result = false;
}
},
error: function () {
result = false;
},
async: false
});
$(this).val(ret);
}
});
if (!result) {
$(submitButton).attr("value", btnText);
setStateFotBuyButton(false);
}
return result;
}
I have if statement in success block. I want show partial view in the fancybox in else block. How can I do this? Thanks
Not totally sure what you mean with "partial view" but you could do
} else {
$.fancybox(response,{
// fancybox options here
}); // fancybox
}
You could use the content switch which allows you to set the content of the fancybox to any html:
$.fancybox({
content: response
});
Did anyone who used jQuery Easy Confirmation plugin run into this issue - the button upon which the confirm box is bound loses its original click event after the first click? I had to change the plugin code to this to make it work. The difference here is between .bind and .click. Can anyone explain why? Pls. let me know if my question is not clear. Thx!
Original plugin code:
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
//this is the difference
$target.bind(type, this);
});
}
}
Changed (working) code:
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
//this is the difference
if(type == 'click')
$target.click(this);
else {
$target.bind(type, this);
}
});
}
}
Try using some alerts to see what's happening...
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
if(type == 'click')
alert('$target.click(' + this + ');');
//$target.click(this);
else {
alert('$target.bind(' + type + ', ' + this + ');');
//$target.bind(type, this);
}
});
}
}