edit-in-place jquery - javascript

I use edit-in-place plugin: http://arashkarimzadeh.com/jquery/7-editable-jquery-plugin.html
I't works Great!
I just need something to check if the new text is empty. If it is we have to go back and show some error alert.
The code:
$('.name').editable({
submit:'Gem',
cancel:'Fortryd',
onSubmit: function(content){
$.post('/admin/ajax/products/edit_category/',{ category_name:$(this).text(),category_id: this.parent().attr('id') })
}
});
Can someone please help me! :-/

check the content.current property in the onSubmit function before posting.
(there's also a content.previous property that can be used to check for changes)
Example:
$(document).ready(function() {
$("#div1").editable({
type : 'textarea',
submit : 'OK',
cancel : 'Cancel',
onSubmit : function(content) {
alert(content.current+':'+content.previous);
}
});
});

Change your onSubmit:
onSubmit: function(content){
if ($(this).val()=='') {
alert("can't be blank");
} else {
$.post('/admin/ajax/products/edit_category/',{ category_name:$(this).text(),category_id: this.parent().attr('id') });
}
}

I found a Solution:
function end(content){
if (content.current == '') {
$(this).text(content.previous);
}else{
$.post('/admin/ajax/products/edit_category/',{ category_name:$(this).text(),category_id: this.parent().attr('id')});
}
}
Its works, and goes to show the previous data

Related

How to pass data- value to jquery function

I have this HTML line with combination of TWIG code:
delete
The line is a part of cycle, so in final result it can be multiple with different value of data-redirect attribute.
I need to pass the value of data-redirect to jquery function, but only a specific value when I click the hyper text link.
$(document).ready(function() {
$('.aaa').on( "click", function(e) {
e.preventDefault();
$.confirm({
title: 'Smazat termín',
message: 'Opravdu chcete smazat tento termín?',
labelOk: 'Smazat',
labelCancel: 'Storno',
onOk: function() {
window.location.assign($(this).attr("data-redirect"));
}
});
});
});
The function works fine except of the line, where I need to redirect to different URL. I need to pass to the window.location.assign() function the specific value from data-redirect attribute.
Actually $(this).attr("data-redirect") does not pass the value from the attribute.
Thank you for help.
Try using. I hope this one helps.
$(this).data('redirect');
I believe is this is an issue. Sorry I just had to.
What I mean is
...
onOk: function() {
window.location.assign($(this).attr("data-redirect"));
^----- may not be referring to what you think it is.
}
...
A quick solution would be to change to to an arrow function like so
onOk: () => { window.location.assign($(this).attr("data-redirect")); }
If you need better support coverage you could assign the variable this as a work around like so
$(document).ready(function() {
$('.aaa').on( "click", function(e) {
var self = this; // <--- here
e.preventDefault();
$.confirm({
title: 'Smazat termín',
message: 'Opravdu chcete smazat tento termín?',
labelOk: 'Smazat',
labelCancel: 'Storno',
onOk: function() {
window.location
.assign($(self)
.attr("data-redirect")); // <--- and here
}
});
});
});

ajaxForm plugin keeps redirecting to action page ignoring the return false;

I have a simple form that gets submitted when a user clicks open in the file browse window once they have completed selecting an image.
My HTML looks like something below.
<form id="imgForm" action="action.php" method="post" enctype="multipart/form-data">
<div class="fileUpload btn btn-lg btn-primary">
<span>Choose File</span>
<input id="imageToBeUploaded" type="file" class="upload" name="image"/>
</div>
</form>
JavaScript
$("body").on('submit', '#imgForm', function(){
$(this).ajaxForm({target:'#uploadStatus'});
console.log("submitting...");
return false;
});
/* Uploading Profile BackGround Image */
$('body').on('change','#imageToBeUploaded', function() {
//submit the form
$("#imgForm").submit();
});
My issue is that the form gets submitted but redirects to the action.php page with response. I was hoping to stop the redirect from happening while getting back a response on the current page instead. return false; doesn't seem to be working as per documentations at http://malsup.com/jquery/form/#ajaxSubmit
Any help would be greatly appreciated!
Please note that I have to support IE8/9 which means formData is out of the question!
Thank you.
Try implementing this code:
window.location.href it's a property that will tell you the current URL location of the browser. Changing the value of the property will redirect the page.
$("body").on('submit', '#imgForm', function(){
var a;
var b;
window.location.href = "../currenturl.htm?parameter1="+a+"&parameter2="+b;
or
window.location.href = "../currenturl.htm";
//where your browser need to stay(current) url should be mentioned here.
});
Just try this JavaScript/jQuery code and manage with your server script.
$(document).ready(function (e) {
/* Uploading Profile BackGround Image */
$('#imageToBeUploaded').on('change', function() {
//submit the form
$("#imgForm").submit();
alert('Form submitted');
});
$('#imgForm').ajaxForm({
target:'#uploadStatus',
beforeSubmit:function(){
alert('File uploading...');
},
success:function(){
alert('File uploaded');
},
});
});
Good Luck ['}
The page you've referenced is about $(this).ajaxSubmit(options); and not $(this).ajaxForm(options);. Have you tried $(this).ajaxSubmit(options);? The two are not synonymous. You seem to be mixing up their implementations.
Per the documentation, here is how to use ajaxSubmit():
$(document).ready(function() {
$('#imgForm').on('submit', function(){
$(this).ajaxSubmit({target:'#uploadStatus'});
console.log("submitting...");
return false;
});
$('#imageToBeUploaded').on('change', function() {
//trigger submit event
$("#imgForm").submit();
});
});
And ajaxForm():
$(document).ready(function() {
$('#imgForm').ajaxForm({target:'#uploadStatus'});
$('#imageToBeUploaded').on('change', function() {
//trigger submit event
$("#imgForm").submit();
});
});
You don't want to use delegated events unless you really have to. If the form is loaded after the DOM ready event, then by no means use delegated events.
from: Prevent page reload and redirect on form submit ajax/jquery
$("body").on('submit', '#imgForm', function(event){
$(this).ajaxForm({target:'#uploadStatus'});
console.log("submitting...");
event.preventDefault();
return false;
});
/* Uploading Profile BackGround Image */
$('body').on('change','#imageToBeUploaded', function(event) {
//submit the form
$("#imgForm").submit();
});
$(document).ready(function (e) {
/* Uploading Profile BackGround Image */
$('#imageToBeUploaded').on('change', function() {
//submit the form
$("#imgForm").submit();
alert('Form submitted');
});
$('#imgForm').ajaxForm({
target:'#uploadStatus',
beforeSubmit:function(){
alert('File uploading...');
},
success:function(){
alert('File uploaded');
},
});
});
You can try this:
use $(this).closest("#imgForm").submit();
instead of: $("#imgForm").submit();
$('#imageToBeUploaded').on('change', function() {
//submit the form
$(this).closest("#imgForm").submit();
$("#imgForm").submit();
});
$('form#imgForm').on('submit',function(e){
e.preventDefault();
$(this).ajaxSubmit({
url: 'upload',
uploadProgress: function (event, position, total, percentComplete){
//display status
$(".progress-bar").width(percentComplete + '%');
$('.progress-bar').html(percentComplete+'%');
},
success: function(response){
alert('Success');
},
error: function(response, status, e){
alert('Oops something went.');
},
resetForm: true
});
});
You need this in your script tag <https://code.google.com/p/struts2-jquery/source/browse/trunk/struts2-jquery-plugin/src/main/resources/template/js/plugins/jquery.form.min.js?r=1645>
Try this
$(document).ready(function() {
$("#imgForm").ajaxForm({
target:'#uploadStatus'
});
});
$('body').on('change','#imageToBeUploaded', function() {
//submit the form
$("#imgForm").submit();
});
You should use event.preventDefault(); instead of return false with jQuery
$("body").on('submit', '#imgForm', function(event){
event.preventDefault();
$(this).ajaxForm({target:'#uploadStatus'});
console.log("submitting...");
return false;
});
Alot of people might not agree with me but returning false is usually saying something failed, while your ajax submit might actually have worked just fine, so it could bring mixed results to your original caller. In this case it does't matter but I will only return false if something actually failed or went wrong or when a boolean is requested. If empty result I would return null, rather then false. Just convictions I suppose..
not sure why you have 2 js functions but you could combine both functions as :
$(document).ready(function() {
/* Uploading Profile BackGround Image */
$('body').on('change','#imageToBeUploaded', function() {
//submit the form
$('#imgForm').ajaxForm({target:'#uploadStatus'});
console.log("submitting...");
});
});

JavaScript multipage form onbeforeunload issue

I am putting together a quiz system using the multipage form jQuery script and I would like to be able to warn the user if tries to close the page. I managed to do this just fine using the code below:
$(document).ready(function($) {
window.onbeforeunload = function(){
return 'Sure you want to close the page?';
};
});
My problem is that when I try to submit the form and post the results I get the warning asking me if I want to navigate away from this page. This is the code:
$('#quizForm').formwizard({
validationEnabled: true,
focusFirstInput : true,
formOptions: {
beforeSubmit: window.onbeforeunload = null,
resetForm: true
}
});
What am I doing wrong?
LE: I created this fiddle maybe someone can help me out, I am running out of ideas.
http://jsfiddle.net/awLYY/5/
first, you don't need to wait for the DOM to be ready in order to attach an onbeforeunload handler.
second, since the onbeforeunload is a function, you can choose wither to return a string or return nothing in case you're submitting some data to the server
var isFormBeingSubmitted = false;
window.onbeforeunload = function() {
if( isFormBeingSubmitted ) {
return;
}
return 'Sure you want to close the page?';
};
// now before you submit your form, just enable the isFormBeingSubmitted
$('#quizForm').formwizard({
validationEnabled: true,
focusFirstInput : true,
formOptions: {
beforeSubmit: function() {
isFormBeingSubmitted = true;
return true;
},
resetForm: true
}
});
To answer my own question, all I had to do was to add to the formwizard options:
formPluginEnabled: true
Now everything is working fine. Thanks

jQuery function in javascript loop

I got some DIV's I'm editing with 'jeditable' which works perfectly!
Now I want to give my users an alert to ask them if they really want to edit this post.
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.jeditable.js"></script>
<script type="text/javascript">
$(document).ready(function jeditable() {
$("div[title='Article']").click (function() {
var Edit;
Edit = confirm("Editing article?");
if (Edit == true) {
$('.edit').editable('x2.php', {
cancel : 'Cancel',
submit : 'OK',
onblur: 'ignore',
});
} else {
alert("Canceling edit..");
}
});
});
</script>
1)When the alert pops and I cancel it, nothing happens (intended).
2)When I click "OK" in the alert nothing happens as well.
3)When I clicked "OK" once, the function in my 'if' works no matter if I check "OK" or "Cancel" in a second click in the alert.
I would like to only make my text editable after the user clicks "OK" once.
(Later on I want to make an image clickable instead of the text itself, but because that throws same error I try to solve this way first)
Please help me.
Thanks in advance
Problem still alive!
I changed to not make the article itself clickable fo the "confirm" but some img instead. That way it works perfectly, even with another element so trigger the confirm to make '.edit' editable. Workaround found, but still would be interested in a solution for the other way :)
I looked at the jeditable library , therefore here is what I would do to achieve your requirement
$(document).ready(function()
$("div[title='Article']").click (function() {
if (confirm("Editing article?")) {
$('.edit').editable('x2.php', {
cancel : 'Cancel',
submit : 'OK',
onblur: 'ignore',
});
}
});
});
It looks like you are missing a "}" after the end of the else clause. If you look at the error console in the browser I think you will have an error indicating this.
if (Edit == true) {
$(document).ready(function () {
$('.edit').editable('x2.php', {
cancel : 'Cancel',
submit : 'OK',
onblur: 'ignore',
});
});
} else {
alert("Canceling edit..");
}
} // <-- add this in
});
$(document).ready(function jeditable() {
$("div[title='Article']").click (function() {
var Edit;
Edit = confirm("Editing article?");
if (Edit == true) {
$('.edit').editable('x2.php', {
cancel : 'Cancel',
submit : 'OK',
onblur: 'ignore',
});
} else {
alert("Canceling edit..");
}
}); //<<< this was closing out the function BEFORE the else.
});
You dont need "$(document).ready(function" after if
$(document).ready(function jeditable() {
$("div[title='Article']").click (function() {
var Edit;
Edit = confirm("Editing article?");
if (Edit == true) {
$('.edit').editable('x2.php', {
cancel : 'Cancel',
submit : 'OK',
onblur: 'ignore',
});
} else {
alert("Canceling edit..");
}
});
});

POST via ajax only if validation check returns true

I'm checking my form with RSV validator. Want to get work following: Let's say user opened page for the first time. After filling all text input boxes, when user clicks #submit_btn FOR THE FIRST TIME, the form submit function fires RSV (validator), validator checks if there is any error. If all right, posts data via ajax, else RSV shows error messages array with the help of alert(). THIS PROCEDURE ONLY FOR THE FIRST TIME
BTW: RSV - validator. If no error occured during validation process the myoncomplete() function returns 1.. If something went wrong it alerts. Got from here
I can't get it work. Please help me to fix logic/code mistakes. Thx in advance
My JS
var int=null;
var counter=0;
function myOnComplete() {
return 1;
}
$(document).ready(function () {
$("#add_form").RSV({
onCompleteHandler: myOnComplete,
rules: [
"required,name,Page name required",
"required,title,Page title required.",
]
});
$("#add_form").submit(function (e) {
e.preventDefault();
dataString = $("#add_form").serialize();
$.ajax({
type: "POST",
url: "processor/dbadd.php",
data: dataString,
dataType: "json",
success: function (result, status, xResponse) {
//do something if ajax call is success
int = setInterval(call, 3000);
var message = result.msg;
var err = result.err;
if (message != null) {
$.notifyBar({
cls: "success",
html: message
});
}
if (err != null) {
$.notifyBar({
cls: "error",
html: err
});
}
},
error: function (e) {
//ajax call failed
alert(e);
}
});
});
$("#submit_btn").click(function () {
if(counter===0){
if(myOnComplete()===1) $('#add_form').submit();
else return false;
}
else $('#add_form').submit();
counter++;
});
$('#autosave').click(function(){
if($(this).is(':checked')){
int = setInterval(call, 3000);
$('#submit_btn').attr({'value':'Save&Exit'});
}
else{
$('#submit_btn').attr({'value':'Save'});
clearInterval(int);
}
});
});
function call() {
$('#add_form').submit();
}
Looking through the RSV code it looks like whatever you attach RSV to has its submit rebound to validate the data using .RSV.validate()
As seen here:
$(this).bind('submit', {currForm: this, options: options}, $(this).RSV.validate);
});
Which means that if you use .submit() you are calling .RSV.validate also.
So once you validate the info try binding your submit to the standard submit function.
Edit: To help explain
When you use
$("#add_form").RSV({...});
The RSV javascript code is binding .RSV.validate() to the submit event of your add_form element. Meaning when you submit your add_form form .RSV.validate() is being called before the submit.
Try running the script code below with and without the .RSV() call
This script will log ALL handlers for ALL events on the add_form element. You notice that calling $element.RSV({...}) attaches a second event handler to the submit event of the add_form element. I am unsure of the best way to access this event handler to .unbind() it. Good luck :)
jQuery.each($('#add_form').data('events'), function(i, event){
jQuery.each(event, function(i, handler){
console.log(handler);
});
});
OK, to my understanding now you only want to validate the first set of data and if that validates correctly trust the user, i got this working on jsFiddle with an easy example, i guess you can make use of that
http://jsfiddle.net/WqnYa/9/
Basically what i do is that i catch the submit button click and not the forms submit function, maybe it can be done that way, too. I assign a class "needsvalidation" and when ever the first validation passes, i simply remove that class. And if that class is not present, the validation will not be initialized due to $(this).hasClass('needval')
If that's not what you're looking for then your question needs way more clarity :( hope this helps though!

Categories

Resources