this is my ajax script which i used in codeigniter to send form data without page refresh
now i want to know how can i submit form in cakephp 2x using ajax.. i dont want to use cakephp helper or other difficult methods which i find difficult ... please do some changes in this script or if is possible to send data through changes of this script little bit because i find this easy ...
$('#submit').click(function() {
form = $("#form").serialize();
$.ajax({
type: "POST",
url: "<?php echo site_url('categoryController/addCategory'); ?>",
data: form,
success: function(data){
$(".success").fadeIn(500).delay(2000).fadeOut(500);
$("#form")[0].reset();
}
});
event.preventDefault();
return false;
});
here i have posted my answer ... i did it on my own and it works.. hope it helps others
Can't get ajax to work in CakePHP
Related
I am stuck in this like I have never before.
My situation : I am making a shopping cart. When user click "Add" button, it posts the form and in the server side i.e inside if(IsPost){....}, corresponding item gets added to the the the cart table in my database.
Everything is fine, except it reloads the page and scrolls back to top. With a little research, I got to know that may be Ajax could help. Then I created a new .cshtml page add-to-cart.cshtnl. Now my current page doesn't reload but it opens add-to-cart.cshtml which is not how I wanted. Now I even tried to learn AJAX and try doing things looking at examples. Nothing helps. Please help!
Here is what my code looks like : P.S I am using razor in webmatrix.
<form method="post" id="productForm" action="~/add-to-cart.cshtml">
<input ............"Input Something.............../>
<button type="submit" id="add-button" >ADD</button>
</form>
At my add-to-cart.cshtml, I don't have anything on the UI. It just processes data.I don't want that page to ever load. It looks something like this:
ifIsPost(){
............ADD item to the cart table of database..............
}
Now I am convinced, AJAX is my solution but how????
Please don't give me incomplete answers. I have already wasted 3 days in it :/
Try this
$('#productForm').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data : $(this).serialize(),
success : function(response) {
//write your code here
},
error : fucntion(response) {
//write your code here
}
});
});
Put this script into <script> tag.
Note: Don't forgot to include jquery in your page.
Here is the complete working solution :
$(function () {
$('#productForm').submit(function (ev) {
var frm = $(this);
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
//Do What Ever You Wanna Do
}
});
ev.preventDefault();
});
});
Is it possible to simply run the knp paginator with ajax? Is it possible at all and what is the best way to do it ?
Greetings Michael
Not sure if this is best solution, but I did it this way:
$(function(){ $('#dish-select-component-canvas').on('click', "ul.pagination a" , function(e){
$.ajax({
type: "GET",
url: $(this).attr('href'),
})
.done(function( msg ) {
$('#dish-select-component-items').html(msg);
});
e.preventDefault();
});
});
#dish-select-component-canvas is container for page. When somebody click on this canvas on link in ul.pagination (pagination is class used by knpPaginator by default as wrapper for pagination), I take href attribute of that link, and send it with ajax GET request.
Result of that request goes to appropriate div (here to #dish-select-component-items). Of course you must remember to add e.preventDefault() to prevent browser from reloading the page.
Hi I know this has been asked a few times but I have been through every answer and tried them all with no luck.
I am trying to use Ajax in a Wordpress front end page, I have security in the page to ensure the user is logged in before they can view this page too.
No matter what code i enter my ajax call always returns 0.
function ajaxfoodlookup()
{
echo "ajax fired";
die();
}
add_action('wp_ajax_nopriv_ajaxfoodlookup','ajaxfoodlookup');
add_action('wp_ajax_ajaxfoodlookup','ajaxfoodlookup');
This is what I have in my functions.php (i have also tried exit(); and die($results) where $results = 'ajax fired'; nothing seems to work.
This is what I have in the page to call the ajax;
jQuery.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
data: { action:'ajaxfoodlookup'},
success: function (data) { alert(data);}
});
The only thing that I have different to the other questions/answers on here is that I am using a bought Theme which does have some code added, is that theme able to hijack my ajax calls? I thought wordpress would execute the ajax call depending on the 'action' in the data supplied?
Please help its driving me crazy?
Thanks
Official WordPress recommendation is to use the ajaxurl variable instead of hard coded one. Insert this before your JS code and change the url of your jQuery.ajax to use ajaxurl.
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
You can also use wp_localize_script to define the ajaxurl
I hope you can help,
I am relatively new to mootools
I have been using http://zendold.lojcomm.com.br/fvalidator/ to validate some webforms and I wanted to try and use it with an Ajax form. It is an oldish website using Mootools 1.2.5.
http://jsfiddle.net/jessicajet/gTqV8/ is the form I am trying to use it with. (The fValidator script is not added here)
This is what I am using to submit the form
formtostop.addEvent("submit", function(e) {
e.stop();
new Request({
url: this.get("action"),
method: "post",
data: this,
onRequest: function() {
document.id("result").set("html", "sending...");
},
onComplete: function() {
document.id("result").set({html: '<div class="response"><p>Thank you for completing our contact form, we will get back to you as soon as possible</p></div>', style: 'background:red'});
}
}).send();
});
When I hit submit the validation and the ajax form fires, which is to be expected.
Can I get the submit button to look for the validation script before the e.stop(); new Request({ or am I trying to do something not possible?
I will appreciate any advice that can be offered.
http://zendold.lojcomm.com.br/fvalidator/js/fValidator-full.js, take a look at the _onSubmit function. You should extend this class (http://mootools.net/docs/core/Class/Class) and modify the _onSubmit function to do a request if the isValid statement is true.
So I have a normal form with 1 textarea and two hidden inputs, which I would like to post via AJAX to a CI controller I have that inserts the information into the database.
The problem I'm having is that a) the page action is still called and the output of the controller is displayed and b) because the initial AJAX request is still processed plus the extra loading of the action target the information gets inserted twice.
This is my javascript code:
$(document).ready(function() {
$("#submit-comment").click(function(){
var post_id = <?=$p->id?>;
var user_id = <?=$user->id?>;
var content = $("textarea#content").val();
if(content == '') {
alert('Not filled in content');
return false;
}
$.ajax({
type: "POST",
url: "<?=site_url('controller/comment')?>",
data: "post_id="+post_id+"&user_id="+user_id+"&content="+content,
success: function(msg){
alert(msg);
}
});
});
});
I have tried doing
...click(function(e)... ... e.preventDefault
with no luck.
What am I doing wrong? :P
Thanks
Ps. All the information is processed properly and accessed, it's just the preventing the form which is screwing it up..
Just realised I was using a input type="submit", rather than input type="button".
Doh!