I want to update the cart item without loading the page i.e with the help of ajax.
can anyone tell me in which file did i put this code.
jQuery(document).ready(function(){
jQuery('#shopping-cart-table')
.on(
'change',
'input[name$="[qty]"]',
function(){
var form = jQuery(jQuery(this).closest('form'));
// we'll extract the action and method attributes out of the form
// kick off an ajax request using the form's action and method,
// with the form data as payload
jQuery.ajax({
url: form.attr('action'),
method: form.attr('method'),
data: form.serializeArray()
});
}
);
});
The easy way is to put this code in a Javascript script tag into the checkout cart template: magento/app/design/frontend/base/default/template/checkout/cart.phtml
Be carefull, you have to set update_cart_action data to "update_qty", to be in update qty mode.
var formData = form.serializeArray();
formData.push({'update_cart_action' : 'update_qty'})
jQuery.ajax({
url: form.attr('action'),
method: form.attr('method'),
data: formData
});
Related
I am trying to submit an AJAX form with Laravel using the code shown below. After I submit the form, all the data is saved in the database as expected apart from the following field which is displayed as NULL in the database.
<textarea name="content" id="editor"></textarea>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(".btn-submit-add-video").each(function(){
$(this).on("click",function(e){
e.preventDefault();
let form = $(this).closest('form');
$.ajax({
type:'POST',
url: form.attr('action'),
data: form.serialize(),
success:function(data){
alert(data.successful);
}
});
})
});
</script>
public function addVideo(Request $request)
{
$addVideo = new cms_videos;
$addVideo->VideoStatus = $request->VideoStatus;
$addVideo->VideoTitle = $request->VideoTitle;
$addVideo->VideoStrapline = $request->VideoStrapline;
$addVideo->VideoURL = $request->VideoURL;
$addVideo->VideoDescription = $request->content;
$addVideo->VideoTags = $request->VideoTags;
$addVideo->MetaActName = $request->MetaActName;
$addVideo->MetaRegion = $request->MetaRegion;
$addVideo->MetaGenre = $request->MetaGenre;
$addVideo->MetaVenue = $request->MetaVenue;
$addVideo->VideoCoverPhoto = $request->VideoCoverPhoto;
$addVideo->save();
return response()->json(['successful'=>'Video successfully added']);
}
After doing some research I was told to add the following code to the top of the code shown above:
CKEDITOR.instances.SurveyBody.updateElement();
Now all the data is submitted to the database as expected. However when I now submit the form instead of an alert popping up saying "Successful" I am now redirected to the form action URL where it displays "Successful". How can I stop this redirection and display the alert on the page the form was submitted?
I'm not sure but I think the issue is here when you do e.preventDefault() because it works for the button click not for form submission. Try this out and hope it will help you.
Notice: you have to add upload_video class to your forms
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// If the button is type of submit you can remove this part of code
$(".btn-submit-add-video").each(function(){
$(this).on("click",function(e){
e.preventDefault();
let form = $(this).closest('form.upload_video');
form.submit();
})
});
//
$("form.upload_video").on('submit',function(e){
e.preventDefault();
let form = $(this),data=form.serialize();
//
let content=FCKeditorAPI.GetInstance('content').getData();
data['content']=content;
//
$.ajax({
type:'POST',
url: form.attr('action'),
data: data,
success:function(data){
alert(data.successful);
}
});
});
</script>
This part
let content=FCKeditorAPI.GetInstance('content').getData();
May not be true because I don't work with CKEDITOR right now and i can't test it but you can console.log() it before you send the ajax request and make sure the content exists in the variable as you expected.
I made an ajax request using post method in django..its wokring perfectly..the problem is its calling the complete html page rahter than a div..i want to call only a div..i tried but unable to find the exact solution..
<script>
$(document).ready(function(){
$('#Category').change(function(event){
event.preventDefault();
var e = document.getElementById("Category");
var value = e.options[e.selectedIndex].value;
$.ajax({
url: "/charts/",
type: "post",
dataType: "html",
data: value,
success: function(data) {
$('#div1').html(data);
}});
return false;
});
});
</script>
I want only div content with id #div1..i already tried find and replace method
What is the nature of the event ? Is it a button ? an Input ?
If it is an input as <input type="submit">, the default action is to reload the page like a form.
Did you check if your div id is really div1?
$("#div1").append("your html code"+data+" your html code")
Need help to resolve ajax call issue
In my view page ( working on codeigniter), there is a dropdown and a div
section. Based on dropdown value, data will get change in div section. I am
using ajax call ( to call method in controller) to upload data in div tag on
dropdown change event. Ajax call working fine on first change event of
dropdown but when i select value for second time in dropdown, ajax function
call is not working ( second select and so on).
My code is:
VIEW PAGE =>
$(document).ready(function() {
$("body").on('change','#assettype_id',function(e){ // "assettype_id" is
dropdown id
//e.preventDefault();
var categoryval = $('#assettype_id :selected').val();
$.ajax({
type: 'POST',
cache: false,
url: 'http://my_path/index.php/assetcontroller/assignpc/'+ categoryval, // Based on "categoryval" data will change in div tag
dataType: 'html',
success: function(data) {
$( "#result" ).load( "http://my_path/index.php/assetcontroller/assignpc/"+ categoryval); // "result" is div tag id
$( "#result" ).html(categoryval);
},
});
return false;
});
});
Why ajax call is not working in dropdown 'second time' change event?
You need to wrap the .on('change') event into a function, so it can be called anytime later.
That's because once you have added new html output through Ajax, this html doesn't yet know about your change event!
So the function my_change_event() needs to be re-called, once your Ajax output has been added to DOM with your $( "#result" ).load()
something like this:
$(document).ready(function() {
my_change_event();
});
function my_change_event(){
$( "#assettype_id" ).on( "change", function() {
$.ajax({
type: 'POST',
cache: false,
url: your_url,
success: function(data) {
// do something with data
// html output
my_change_event();
}
});
}
I have a regular POST form for my search function. I currently have the following route:
Route::post('/search', 'PostController#search');
I get the form data using jQuery/AJAX:
$('form').on('submit', function(event)
{
event.preventDefault();
var form = $(this);
$.ajax({
url: '/search',
type: 'post',
data: form.serialize(),
dataType: 'json',
success: function(data)
{
//
},
error: function(data)
{
//
}
});
});
However, when the results page is shown, it only shows /search in the URL without the user's query, like:
http://www.website.com/search
What I want is to do something like /search/{user query here}, like:
http://www.website.com/search/bob
Essentially, I want to be able to show the user's query within the URL.
How can I do this and how can I do this safely?
You have two options.
Use normal form and give action as "user/{user_name}" when submit without using jQuery.
For that add a route like that.
Route::get('/search/{user_name}', 'PostController#show');
When your ajax success redirect it to the page "user/{user_name}"
I have filters outside of jqGrid that should trigger a grid reload. This entry gave me some good insight into how to implement it, using the postData option: How to filter the jqGrid data NOT using the built in search/filter box
Unfortunately the code snippets are fragments, and I cannot figure out what the overall sequence of calls should be. Here's a condensed view of my current approach:
<script>
$(document).ready(function() {
$("#submit").click(function(e) {
e.preventDefault();
myGrid.trigger('reloadGrid');
});
});
var url="${servicesUrl}/projects";
var myGrid = $("#projectList").jqGrid({
url: url,
datatype: 'json',
mtype: 'GET',
// ...
});
</script>
How should I structure the code so that every click of the Submit button will trigger a grid reload? Once I have that sorted out, I'm sure I'll be able to add the posData part, my problem is mostly with the overall sequence of calls. I'm not sure which calls should be inside of the ready() function, and how to call 'reloadGrid' properly. Any help greatly appreciated.
This is what has worked for me: I set a callback on the beforeRequest event which updates the postData property before each request is made.
Note that you will want to put all your jqGrid init code inside the $(document).ready(function(){}); function, otherwise the your table element may not be in the DOM yet
var url="${servicesUrl}/projects";
$(document).ready(function() {
var $table = $("#projectList");
$table.jqGrid({
url: url,
datatype: 'json',
mtype: 'GET',
beforeRequest: function() {
var postData = $table.getGridParam('postData');
//add parameters to postData here
}
// ...
});
$("#submit").click(function(e) {
e.preventDefault();
$table.trigger('reloadGrid');
});
});