$(function(){
$('.page').click(function() {
var paging = $(this).attr("name");
var dataString = 'page='+paging;
$.ajax({
type: "POST",
url: "<?php echo $backtrack; ?>shop.php",
data: dataString,
success: function(){
$('#products').load('shop.php/skateboards/ #products > *', function(){
$('#products').delay(200).fadeOut();
$('#products').delay(600).fadeIn();
});
$(".current-page").attr("class", "");
}
});
return false;
});
});
I am guessing this is not working because I am reloading the part of the page that gets the post. What I want to do is post the page number to the current page and then reload the items inside the products div, with it being the next set of items
I think you need to do something like this:
$('.page').click(function() {
$('#products').delay(200).fadeOut();
var paging = $(this).attr("name");
var dataString = 'page='+paging;
$.ajax({
type: "POST",
url: "<?php echo $backtrack; ?>shop.php",
data: dataString,
complete: function() {
$.get('shop.php/skateboards/', function(data) {
$('#products').replaceWith(data);
});
}
});
return false;
});
Related
I want to pass id with ajax to a php file. I tried a lot but couldnot succed. I want to return to the page with id. Please help me.
I tried like this.
<script>
jQuery.ajax({
var registration_date=$("#registration_date").val()
var building_length_ft=$("#building_length_ft").val();
var building_length_in=$("#building_length_in").val();
var building_breadth_ft=$("#building_breadth_ft").val();
var reg_id=$_GET['id'].val();
var dataString = $('#a').serialize();
$.ajax({
url:'registration_detail.php',
method:'POST',
data: dataString,
success:function(data){
alert(data);
}
});
});
</script>
I tried below code as well.
var reg_id=$_GET['id'].val();
$.ajax({
url:'registration_detail.php',
method:'POST',
data:{
'reg_id=' + reg_id,
},
success:function(data){
alert(data);
}
});
I tried below code as well.
var id = $('#id').val();
$.ajax({
url:'registration_detail.php',
method:'POST',
data: { id: id},
success: function(response) {
$('#result').html(response);
}
});
You should fix your code:
<script>
jQuery.ajax({
var registration_date=$("#registration_date").val()
var building_length_ft=$("#building_length_ft").val();
var building_length_in=$("#building_length_in").val();
var building_breadth_ft=$("#building_breadth_ft").val();
// There is a PHP script here:
var reg_id=<?= $_GET['id'] ?>;
var dataString = $('#a').serialize();
$.ajax({
url:'registration_detail.php',
method:'POST',
data: dataString,
success:function(data){
alert(data);
}
});
});
</script>
Since couple of weeks(two) started my adventure with Magento. So far I've learned a little but have a problem how to send data using Ajax (jQuery).
$(document).ready(function(){
var total = $(this).find(\"input[class=tramp]:checked\").length;
$(\".caret input[type='checkbox']\").change(function(){
if($(this).is(':checked')){
var value= true;
}else{
var value = false;
}
var brand = $(this).data('brand');
data = {brand: brand, value: value}
$.ajax({
data: data,
url: 'checkbox/ajax/index',
method: 'POST',
success: function(result){
console.log(data, total);
}});
});
});
This is my Ajax, so as you can see trying to send brand and value. AjaxController.php looks like this:
class Amber_Checkbox_AjaxController extends Mage_Core_Controller_Front_Action {
public function indexAction()
{
$brand = Mage::app()->getRequest()->getPost('brand', 'value');// not sure or I should use data?
if($brand )
{
....
$this->getResponse()->setBody($brand);
echo $brand;
...
}
}
}
remove \"
$(document).ready(function(){
var total = $(this).find("input[class=tramp]:checked").length;
$(".caret input[type='checkbox']").change(function(){
if($(this).is(':checked')){
var value= true;
}else{
var value = false;
}
var brand = $(this).data('brand');
data = {brand: brand, value: value}
$.ajax({
data: data,
url: 'checkbox/ajax/index',
method: 'POST',
success: function(result){
console.log(data, total);
}});
});
});
remove \", $ replace with jQuery and pass absolute URL Mage::getUrl('checkbox/ajax/index');
$.ajax({
data: data,
url: '<?php echo Mage::getUrl("checkbox/ajax/index"); ?>',
method: 'POST',
success: function(result){
console.log(data, total);
}});
I am passing empcode using key press event, but my whole empcode is not transfered and the last digit is cut.
Here is my code:
$(document).ready(function(){
$("#e_code").keypress(function(){
//var dataString=document.getElementById("e_code").value;
var dataString = 'e_code='+ $(this).val();
$.ajax({
type: "POST",
url: "getdata.php",
data: dataString,
cache: false,
success: function (html) {
$('#details').html(html);
$('#custTrnHistory').show()
}
});
});
});
on getdata file code is
write code in keyup instead of keypress
$("#e_code").keyup(function(){
You can bind your keypress on document --- try this
$(document).on('keypress',"#e_code",function(){
Try this
$(document).ready(function(){
var minlength = 5; //change as per the the length of empcode
$("#e_code").keyup(function () {
var inputvalue= $(this).val();
if (inputvalue.length >= minlength ) {
var dataString = 'e_code='+ $(this).val();
$.ajax({
type: "POST",
url: "getdata.php",
data: dataString,
cache: false,
success: function (html) {
$('#details').html(html);
$('#custTrnHistory').show()
}
});
}
});
});
i have a div that shows the total sum of some products:
<div class="total-price"><?php echo (!empty($cart)) ? $cart['total'] : '0'; ?> $</div>
with ajax, i'm adding products to cart ... se the page is not reloading.
How to refresh the div after I add the product to cart?
The ajax that i'm using:
<script>
$('#order-to-cart').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/tdt/order',
data: $(this).serialize(),
success: function () {
$(".success-message").slideDown().delay(5000).slideUp();
$(".total-price").something...;
}
});
})
</script>
Thank you!
You can do something like this:
<script>
$('#order-to-cart').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/tdt/order',
data: $(this).serialize(),
success: function () {
$(".success-message").slideDown().delay(5000).slideUp();
var oldPrice = $('.total-price').text() * 1;
var itemPrice = "15"; //the price that should be added
$('.total-price').text(oldPrice + itemPrice);
}
});
})
</script>
You should be returning a total basket value from your /tdt/order path.
In the PHP script you should echo some JSON data with all the required information, for example
echo json_encode(array("totalPrice" => "£10.01"));
Then you need to parse this information into your Javascript and update the pages elements;
<script>
$('#order-to-cart').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/tdt/order',
dataType: 'json',
data: $(this).serialize(),
success: function (data) {
$(".success-message").slideDown().delay(5000).slideUp();
$('.total-price').val(data.totalPrice);
}
});
})
</script>
The above ajax request will expect the data returned to be JSON, you will then use this to update the total-price element.
You can use something like angularjs or knockoutjs - for angular you would update your model - for knockout you would use the self.object.push(value) i.e.,
function OrderViewModel() {
var self = this;
self.myOrder = ko.observableArray([]);
self.addOrderItem = function () {
$.ajax({
type: "post",
url: "yourURL",
data: $("#YOURFORMFIELDID").serialize(),
dataType: "json",
success: function (value) {
self.myOrder.push(value);
},
headers: {
'RequestVerificationToken': '#TokenHeaderValue()'
}
});
}
}
ko.applyBindings(new orderViewModel());
</script>
</pre>
why isn't this working?
jQuery AJAX Code:
$("header input").bind("keyup", function()
{
var searchString= $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false
});
});
PHP Code(Just a test Code):
if($_POST["search"]) {
echo "TEST MESSAGE!";
}
It doesn't show The echo :/
thanks for ur help ;)
You need to display the data you receive from the ajax call.
Example, to put the result into a <div> called YourresultDiv:
Try with this
$("header input").on("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
success: function (data) {
$('#YourresultDiv').html(data);
alert("Successful");
}
});
});
Hopes this will help you....
$("header input").bind("keyup", function()
{
var searchString= $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
async: false
},success: function (data) {
$('div#posteddata').append(data);
}
);
});
<html>
<head>
</head>
<body>
<div id="posteddata"></div>
</body>
</html>
You need to specify an element you want to update.. for example
<div id="result"> </div>
and then append a success event handler to your ajax call
$("header input").bind("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false
}).success(function (data) {
$("#result").html(data);
}).fail(function () {
alert("Ajax failed!");
});
});
Try with this
In js add
success: function (data) {
// success handler
}
as your response handler
if($_POST["data"]) {
// search = search string available here in $_POST['data']
echo "TEST MESSAGE!";
}
where is your call back function in $.ajax() function,with callback function only,you can display anything through an ajax request..
So try this.
$("header input").on("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
success: function (data) {
$('#Yourdiv').html(data); // or $('#Yourdiv')text(data);
}
});
});
Without success function,you can see the echoed statement in your network segment in console.
for that, press F12,then you will get a link like
XHR finished loading: POST "http://localhost/yourproject/func_name.Click on that link and you will goto network segment and from there,click on the function name and then in response or preview tab,you canb see the echoed statement..
try it.