Normally, when I'd do an ajax call to a page with jQuery's $.post(), I'd post to a specific page (i.e. ajax.php) with something like:
var submissionId = 1;
$.post('/ajax/ajax.php', {
submissionId: submissionId
}, function(data) {
alert(data);
});
and inside ajax/ajax.php, I'd manipulate the data how I'd want with $_POST['submissionId']. What is the equivalent to this in CakePHP if I'm posting to a controller?
Do I still use $_POST['submissionId'] or $this->data?
If using $this->data, do I need to create a <form> to wrap the event handler in?
you should create form with cake helper (hide it with css or jquery if you don't want it to be there) and use jquery form plugin
you can submit the form with jquery with submit()
so in the controller you can use $this->data
Related
How can i use the CCaptcha not using models (rules) and ActiveForms?
Just create and check. e.g. through AJAX
I recommend using Yii models for forms even if you're making modal ajax forms.
You simply need to bind the onsubmit method to make ajax call with the form data instead of reloading the whole page.
I can show you this example of Ajax form on this page:
http://www.eldeposit.com/agencia/1552/oi-real-estate
Uses Yii and has captcha.
In this case it is not a modal but it is a Ajax form with captcha.
jQuery('#contactar_submit_btn').click(function(){
var submit_label = jQuery('#contactar_submit_btn').attr('value');
jQuery('#contactar').ajaxSubmit(
{'dataType': 'json', 'success': function(data) {
jQuery('#contactar_submit_btn').attr('disabled', false);
jQuery('#contactar_submit_btn').attr('value', submit_label);
var timestamp = Number(new Date());
var csrc = jQuery('#contactarCCaptcha').attr('src');
jQuery('.captcha_image').attr('src',csrc+'?t='+timestamp);
if (data.error.length > 0)
alert(data.error);
else {
jQuery('#contactar_target').html(data.success);
jQuery('#contactar').resetForm();
jQuery('#contactar_target').show();
}
},
'beforeSubmit': function() {
jQuery('#contactar_target').hide();
jQuery('#contactar_submit_btn').attr('value','enviando..');
jQuery('#contactar_submit_btn').attr('disabled', true);
}});
});
The "trick" in making the captcha work properly is to make a refresh on the image with a random parameter in the original url. This is required because if we keep the same image but send the ajax request, the captcha will not match if user clicks submit multiple times.
Another way around would that I often use is to:
1. Create full Yii form inside a controller that I load by ajax and show in a modal with a ID
2. When clicking submit, you make ajax call to the same controller and totally replace modal ID content with ajax response
Hope it helps you someway!
At now in view I have a ajax button and pass data like this
echo CHtml::ajaxButton(...,'js:$("#a").sortable("serialize")',..)
but how to pass this data with a form if i want to use form model?
jQuery is native to Yii, so for a start, use that.
Then just do something like (untested):
$('form').submit( function() {
$.post('/url/', $(this).serialize());
});
I have a table where one field is titled a secure password. In this field, there is an input button that calls an AJAX function. The AJAX function on return updates the password in the secured password field. This updates the DOM value for that field.
On this same page I have another function which uses Javascript to parse all the elements in the table into an array. The problem is the Javascript function is writing what was originally in the secure password field rather than what the AJAX function has updated it to.
It seems as though Javascript does not pull the current DOM value but the DOM value when the page was loaded. Is this the default nature of Javascript and if so how can I get around this so I can get the current values for all fields in the table, not just the page load values.
This script is written in PHP/Javascript, thanks in advance for the assistance.
Your Javascript function that parse all elements in the table into an array uses
the document.ready function or is loaded only once when the Page is loaded.
In Vanilla JS
document.addEventListener('DOMContentLoaded', (event) => {
//Where you wrote your function
})
Jquery
$(document).ready(function() {
// where you have your function if you are using Jquery
});
And AJAX calls do not reload the page. That means your Javascript function does not get executed so it does not update the array with the new data from the calls.
You need your Javascript as a callback function to the success or complete property of the AJAX call.
jQuery.ajax({
type: 'POST',
url: ajaxurl,
success: function() {
parsingFunction();
},
error: function() {
alert(errorThrown);
}
});
Did you try using a hidden input field for storing the data instead of updating the text input? Or may be you can try using the data-xxx attributes
bests,
I want to submit a form without using submit button how can i do that?
Using jQuery you can do this. Check this
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
Use javascript. Something like
document.forms["myform"].submit();
or
document.myform.submit();
You need to set the name (1. example) or id (2. example) attribute for your form to make this work.
Through javascript you can call form.submit()
Use jquery's form methods to serialize the form variables and send via ajax.
http://api.jquery.com/category/forms/
You can add some javascript logic to ANY submit methods by passing a function to the form's submit event handler.
Eg.
$('#my_form').submit(function(){
alert('Handler for .submit() called.');
return false;
});
Returning false blocks the form from being submitted by all other methods (including the "traditional" submit button). You'd put your ajax code before the return statement.
or add bind the submit function to ANY dom element (image,button,etc.)
Eg.
$('#my_cool_image').click(function() {
$('#my_form').submit();
});
See more at http://api.jquery.com/submit/
Good Luck
I want to post the Form but don't want to use the Submit method. If I use JQuery, how to handle the Form input controls?
You can use the jQuery AJAX .post function functions. An example (untested, but should be working):
<script>
function postit(obj) {
var data = $(obj).serialize();
$.post($(obj).attr("action"), data, function() {
//Put callback functionality here, to be run when the form is submitted.
});
}
</script>
<form action="posthandler.php" onsubmit="postit(this); return false;">
<input type="text" name="field">
<input type="submit">
</form>
Also, read about serialize
(Of course you need to include the jQuery library in your code before using this code).
Just create a function that is triggered by whatever event you want, for example: (found this code in another question)
function example() {
// get all the inputs into an array.
var $inputs = $('#myForm :input');
// not sure if you wanted this, but I thought I'd add it.
// get an associative array of just the values.
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
}
After that you can do whatever you want with the input values. You might want to consider using more advanced processing though, there are plenty of plugins that can provide this kind of functionality.
I am not sure if I understood the question correctly.
If you don't want to use submit(), you can do the same thing via jQuery.post() using Ajax. The main difference is you have to construct the key value data from the input fields yourself rather than the browser doing it automatically and you won't get a page refresh.
Either Post function or Load function will work.
#PRK are you trying to post the Form when the page loads or when a user hit a button?
load(url, parameters, callback)
eg:
$("#loadItHere").load("some.php", {somedata: 1});