im having problems with an ajax request. the function is to increment/decrement items in a shopping cart. When the increment event is fire the post array comes up empty when printed.
Firebug shows the params being sent in the post request but in the controller nothing arrives.
The solution implemented is a bit scruffy but this is the way it has to be. The jquery is a non anonymous method outside the document.ready signature which could well be a contributor to the issue.
here's what I have...
jQuery
function increment_item($ciid){
$("#processing").fadeIn("fast");
$.ajax({
url: "<?=BASE_URL?>landing/inc_cart_item",
type: "post",
dataType: "json",
data: {id:$ciid,},
success: function(data){
$("#processing").fadeOut("fast");
if(data.error) {
alert(data.error);
} else {
// parent.$('#line1').text(data.line1);
//parent.$('#line2').text(data.line2);
//parent.$('#address-dialog').dialog('close');
alert(data.line1);
}
}
});
//return false;
};
The trigger in the view...
<a href="#" onClick="increment_item(<?=$item['cart_item_id']?>)" class="qty-inc-button" >More</a>
The controller method...
function inc_cart_item(){
$return_val = $this->cart_model->increment_cart_item($this->session->userdata('cart_id'),$this->input->post('id'));
}
EDITED TO ADD GENERATED SOURCE...
The table data
</thead>
<tbody id="item_2823">
<tr>
<td>
<img src="http://localhost/cdn/images/112/7/thumb_lemberger2010.jpg">
<p style="color: #666;">Bader</p>
<p style="font-size: 16px;">Stettener Lindhälder Lemberger</p>
Remove this item
</td>
<td class="align-td-center">
8.20€ </td>
<td class="align-td-center">
More
1 Less
<input id="item_id" class="item_id" value="2823" type="hidden">
</td>
<td class="align-td-center">
<span id="value-shipping-2823">8.20€</span>
</td>
</tr>
</tbody>
<tbody id="item_2824">
<tr>
<td>
<img src="http://localhost/***/cdn/images/112/5/thumb_kerfttropfle2010.jpg">
<p style="color: #666;">Bader</p>
<p style="font-size: 16px;">Kerftströpfle</p>
Remove this item
</td>
<td class="align-td-center">
5.10€ </td>
<td class="align-td-center">
More
1 Less
<input id="item_id" class="item_id" value="2824" type="hidden">
</td>
<td class="align-td-center">
<span id="value-shipping-2824">5.10€</span>
</td>
</tr>
</tbody>
Generated jquery
function increment_item($ciid){
$("#processing").fadeIn("fast");
$.ajax({
url: "http://localhost/***/***/landing/inc_cart_item",
type: "POST",
dataType: "json",
data: {id:$ciid},
success: function(data){
$("#processing").fadeOut("fast");
if(data.error) {
alert(data.error);
} else {
// parent.$('#line1').text(data.line1);
//parent.$('#line2').text(data.line2);
//parent.$('#address-dialog').dialog('close');
alert(data.line1);
}
}
});
};
Again the jQuery function im trying to use here is outside all the other generated jQuery in the $(document).ready(function() { code block, i dont know if this could be the cause.
I've been wrestling with it a little while now, all help is appreciated.
Thanks
Are you sure the data is being posted correctly? You have a comma inside your data json.
Also you could try:
data: JSON.stringify({id:$ciid})
Related
I have a div on my main form:
<div id="dynamic-content">RESULT</div>
after sending data to php file to insert records via ajax :
$.ajax({
url: "test.php",
type: "POST",
data: {"mydata": myjson},
dataType: "JSON",
success: function (data) {
$('#dynamic-content').html(''); // blank
$('#dynamic-content').html(data); // load data
}
});
and with a table as result after a mysql insert in php file:
<div class="table-responsive">
<table class="table table-striped table-bordered">
<tr>
<th>PRODUCT</th>
<td><?php echo $product; ?></td>
</tr>
<tr>
<th>PRICE</th>
<td><?php echo $price; ?></td>
</tr>
</table>
</div>
nothing appears in the 'dynamic-content' div.
Why?
When you are echoing HTML you have to have dataType: "html" Since you wrote it as "json" the AJAX will search for JSON output which is not present in your test.php file Hence, writing dataType: "html" will solve your problem
i need some help please i spent forever just searching and trying to know why nothing is happening when i click that button
html:
<td></td>
<td></td>
<td></td>
<td><button id="<?php echo($row['ID']); ?>" onClick="delord()" class="del" style="font-size: 12">delete</button></td>
jquery:
function delord(){
var x = event.target.id;
$.ajax({
url: 'delorder.php?id=' + x,
success: function(){
alert('deleted');
}
});
}
i tried to type alert(x); inside my jquery code and it returned the value
then i tried to go to "delorder.php?id=335" and the row has deleted successfully
just when i try it with ajax its not working
A cross platoform way is to pass the event object in the onclick method like this
onclick="delord(event)"
then register the function as
function delord(e){
e = e || window.event;
var target = e.target;
var id = target.getAttribute('id')
}
e will be the event and then your can grab the target element button
Do these
<table>
<thead>
<tr>
<td>Name</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen</td>
<td><button onclick="deleteRow('delete',<?php echo($row['ID']); ?>)">Delete</button></td>
</tr>
</tbody>
</table>
jQuery:
function deleteRow(action,id){
$.ajax({
url: 'delorder.php?id=' + id,
success: function(){
alert('deleted');
}
});
}
I am trying to ajax delete rows in a table. It is working, except for the fact that it deletes the ENTIRE table... There is a table within the table the code is as follows;
$(document).ready(function() {
$(".delete").bind('click', function(e){
e.preventDefault();
var parent = $(this).parents('tr');
var string = 'id='+ parent.attr('id').replace('record-','') ;
$.ajax({
type: 'POST',
url: 'ajax_delete.php',
data: string,
beforeSend: function() {
parent.animate({'backgroundColor':'#fb6c6c'},300);
},
success: function(data) {
if(data.status == 'success'){
parent.slideUp(300,function() {
parent.remove();
});
}else if(data.status == 'error'){
parent.animate({'backgroundColor':'#eeeeee'},300);
} else {
parent.animate({'backgroundColor':'#eeeeee'},300);
}
},
});
});
});
The table layout;
<table class="tab_var1">
<tr>
<td class="tab_var1_pad">
<div class="v_tables">
<table>
<tr>
<td>
Domain Name
</td>
<td>
Stats Overview
</td>
<td>
Remove from CRON
</td>
</tr>
<tr class="record" id="record-1">
<td >
<a href="http://www.challengept.com" target="_blank">challengept.com<a>
</td>
<td >
<table >
<tr>
<td>
Traffic (Month)
</td>
<td>
No. Keywords
</td>
<td>
No. PPC Ads
</td>
<td>
Visibility
</td>
</tr>
<tr>
<td>
1796
</td>
<td>
367
</td>
<td>
0
</td>
<td>
0.0236900
</td>
</tr>
<tr>
<td>
Data Source - UK
</td>
</tr>
</table>
</td>
<td >
Remove
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
If anyone can let me know how I can select a single TR within the ajax that would be a great help. The TR I wish to select is the tr with the class "record" which has an a href button in the last td. I am using select parents tr?
You can use closest for this:
var parent = $(this).closest('tr');
var string = 'id='+ parent.attr('id').replace('record-','') ;
I think you can do it with better way as following:
1. Assign data attr for id field
Remove
2. Get data id
var string = $(this).data('id');
.parents() returns all the parents of the element. You just need to select the immediate parent or closest ancestor tr. Use the following jquery method
var parent = $(this).closest('tr');
See links
https://www.w3schools.com/jquery/traversing_parents.asp
Jquery row selecting in a button onClick
I'm using smarty template, php and ajax. I've following code snippet from my smarty template:
<td align="left" id="subject_container" colspan="2" valign="top">
<form>
<table cellpadding="0" cellspacing="10" border="0" width="68%">
<tr>
<td align="center">
{if $subject_details}
Subjects
</td>
{assign var='i' value=0}
{foreach from=$all_subjects item=subjects}
</tr>
<tr>
<td align="left" valign="top" width="150">
{foreach from=$subject_details item=subject}
{if $subject.cs_subject_id==$subjects.subject_id}{$subjects.subject_name}{/if}
{/foreach}
</td>
{assign var='i' value=$i+1}
{/foreach}
</tr>
{/if}
</table>
</form>
</td>
The jQuery function is like as follows :
function get_subjects_by_class(class_id) {
var field_id = 'subjects';
$.ajax({
url: "teacher_details.php",
type: "POST",
data: {'request_type':'ajax', 'op':'get_assigned_subject_list', 'class_id':class_id},
success: function(data) {
$('#subject_container').append(data);
}
});
}
Now what I want to achieve is every time the function gets called the content of id="subject_container" should get clear and replaced with the new content which will come as a response from php file. I googled for it but couldn't get the satisfactory solution. Can anyone help me out in this regard? Thanks in Advance.
$.ajax({
url: "teacher_details.php",
type: "POST",
data: {'request_type':'ajax', 'op':'get_assigned_subject_list', 'class_id':class_id},
success: function(data) {
//$('#subject_container').append(data);
$('#subject_container').html(data);//<-- here
}
});
}
Change
$('#subject_container').append(data);
to
$('#subject_container').html(data);
I have a table in which the data is coming from a database, and the table has a lots of <tr> tags. With each <tr> tag I am fixing the "+" sign and want to retrieve the response from Ajax by clicking on to this "+". Can you please tell me how to achieve this using Ajax?
Here is my code of table on which the "+" is coming:
<table id=\"table_$author_id\" width=\"100%\">
<TR bgColor=#F5F5F5>
<TD class=normaltext hight=35 align=center><div id=\"test_$author_id\" class=\"test\" style=\"display:inline\">+</div><div id=\"aid_$author_id\" class=\"aid\" style=\"display:inline\">$author_id</div></TD>
<TD class=normaltext align=left>$author_name</TD>
<TD class=normaltext align=center>Edit</TD>
<TD class=normaltext align=center>Edit</TD>
<TD class=normaltext align=center>Delete</TD>
</TR>
<table>
I tried this code for ajax:
$(document).ready(function() {
$('.test').click(function(){
var URL = 'bangkokbooks/php/admin/author_ajax_detail.php';
console.log(this.id);
var ID = this.id;
var arr= ID.split('_');
var author_id=arr[1];
console.log(author_id);
$.ajax({
type: "POST",
url: "author_ajax_detail.php",
data: "&author_id="+author_id,
success: function(html){
console.log(html);
$('#table_'+author_id).append(html);
}
});
});
});
But by this way my alignment is horribly disturbed.
Now please tell me how can I add the response below the each <tr> tag, or tell me the another way to do it.
Add a class or an ID to your <tr>-tag and use jQuery to append new content to your <tr>. That's the easiest way.
Your html is not correct :
<table id="table_authorId" width="100%">
<TR bgColor='#F5F5F5'>
<TD class='normaltext' height=35 align='center'><div id="test_$author_id" class="test" style="display:inline">+</div><div id="aid_$author_id" class="aid" style="display:inline">$author_id</div></TD>
<TD class=normaltext align=left>$author_name</TD>
<TD class=normaltext align=center>Edit</TD>
<TD class=normaltext align=center>Edit</TD>
<TD class=normaltext align=center>Delete</TD>
</TR>
<table>
Add php quotes as per your requirement. And add following jQuery.ajax success callback :
jQuery.ajax({
........
success: function(response){
......
$('#table_authorId').append("<tr><td colspan =5>"+response+"</td></tr>");
.......................
}
});
Here is an example with constant data : http://jsfiddle.net/aDcQm/1/