I am trying to hide a div and load another div by calling a function in ajax, but it's not redirecting me to that function.I just want to load a div without refreshing the page.
<script type="text/javascript">
function checkVoucher(){
var voucher_number = $("#voucher_number").val();
$.ajax({
type: "POST",
url: "<?php echo base_url('cart/gift_validate'); ?>",
data: {gift_voucher_number:voucher_number} ,
success: function(data){
$('#gift_msg').html('<span id="gift_msg" style="display:block;">'+data+'</span>');
$('.order_details').html('').hide();
$('.cart_table').html('');
$('.cart_table').load('cart/ajax_cart_view');
return false;
},
});
}
</script>
Controller:
public function ajax_cart_view()
{
$gift_data = $this->cart_model->getgiftvoucher();
if($gift_data){
$this->data['giftDiscount'] = $giftData['amount'];
$this->data['giftID'] = $giftData['id'];
}
$this->load->view('cart/ajax_cart',$this->data);
}
View :(Contains div which needs to be loaded on the same page)
<div class="order_details_ajax">
.
.
</div>
It looks like the success method is deprecated.
http://api.jquery.com/jquery.ajax/
Pass it a .done() after you close your parentheses:
$.ajax({
type: "POST",
url: "<?php echo base_url('cart/gift_validate'); ?>",
data: {gift_voucher_number:voucher_number} ,
}).done(
function(data){
$('#gift_msg').html('<span id="gift_msg" style="display:block;">'+data+'</span>');
$('.order_details').html('').hide();
$('.cart_table').html('');
$('.cart_table').load('cart/ajax_cart_view');
return false;
})
Change your ajax call with following, because there is mistake in your success function :-
$.ajax({
type: "POST",
url: "<?php echo base_url('cart/gift_validate'); ?>",
data: {gift_voucher_number:voucher_number} ,
success: function(data){
$('.order_details_ajax').html('<span id="gift_msg" style="display:block;">'+data+'</span>');
$('.order_details').html('').hide();
$('.cart_table').html('');
$('.cart_table').load('cart/ajax_cart_view');
return false;
},
});
}
Related
I am using HVC codeigniter.
I wanted to alert the value of variable.
Here's the code on my view.
$("#user_table tr").click(function(){
$userid = $(this).closest('tr').children('td:first').text();
$.ajax ({
type: "POST",
url: "manageUser_controller/log_history/$userid",
success: function(data){
alert(data);
}
});
});
Here's the code on my controller.
function log_history($userid) {
echo $userid;
}
You need to edit your code as follows
var userid = $(this).closest('tr').children('td:first').text();
url: "manageUser_controller/log_history/'+userid,
try to send as data like this
$("#user_table tr").click(function(){
var userid = $(this).closest('tr').children('td:first').text();
$.ajax ({
type: "POST",
url: "manageUser_controller/log_history",
data:{userid : userid},
success: function(data){
alert(data);
}
});
});
and get it on controller using input post like this
function log_history()
{
$user_id = $this->input->post('userid',true);
echo $userid;
}
it's also be filter by true.
I have an JQuery function which submits data from a php form to a different php file(submitForm.php). The submission works fine and there isn't any problem whatsoever, below is the handler:
submitHandler : function(){
$.ajax({
type: "POST",
cache:false,
url: "submitForm.php",
data: $('#form').serialize(),
success: function(data) {
}
});
}
Now, I want to be able get data from the submit form (submitForm.php), and load it into a different page.
This is my submitForm.php
<?php
$name="Amanda";
$age="23";
$data = array("name"=>"$name","age"=>"$age");
header("Content-Type: application/json");
echo json_encode($data);
?>
This is how my new submitHandler looks like
submitHandler : function(){
$.ajax({
type: "POST",
cache:false,
url: "submitForm.php",
data: $('#form').serialize(),
success: function(data) {
var name= html(name);
var age=html(age);
$("#message").load("newpage.php",{name:name,age:age});
}
});
}
I think I am doing it wrong, I would be grateful if somebody could correct me or give an idea as to how to do this. Thanks
It should be like this. If you want to take your returner data you should use formal parameter of success function.
submitHandler : function(){
$.ajax({
type: "POST",
cache:false,
url: "submitForm.php",
data: $('#form').serialize(),
dataType : 'json',
success: function(data) {
var name= data.name;
var age=data.age;
$("#message").load("newpage.php",{name:name,age:age});
}
});
}
Edit: Also you need dataType: 'json' line.
I am using the following script
<script>
$(document).ready(function(){
$("#view").click(function(){
var requestId = $("#hdnRequestId").val();
$.ajax({
type: "POST",
url: "enquiryProcess.php",
data: requestId,
cache: false,
success: function(data){
console.log(data);
}
});
return false;
});
});
My controller function is
<?php
include('enquiry_function.php');
$functionObj=new Enquiry();
if(isset($_POST['requestId']))
{
$qt_request_id=$_POST['requestId'];
$responce=$functionObj->view_enquiry_request($qt_request_id);
echo json_encode($responce);
}
?>
And my model function is
class Enquiry
{
public function view_enquiry_request($qt_request_id)
{
$query=mysql_query("SELECT * FROM quote_request WHERE qt_request_id='$qt_request_id'");
$result=mysql_fetch_assoc($query);
return $result;
}
}
I did not get any error.But result in console message is empty.How to get the result from php in jquery ajax.please help me.
Please change
var requestId = $("#hdnRequestId").val();
$.ajax({
type: "POST"
, url: "enquiryProcess.php"
, data: {"requestId":requestId}
, cache: false
, success: function (data) {
console.log(data);
}
});
Pass data as PlainObject or String or Array. See jQuery documentation here http://api.jquery.com/jquery.ajax/
I have a bootbox dialog with a button. There is a problem with the 1st ajax function in there.
I would like to check whether the value returned from model and controller is 0 or 1 and stop the callback function from posting data to database if the value it returns is 1. However, once I put this check , it doesn't work before putting the first ajax function with the check, everything works perfectly. Now, I cannot even save any data to the database.
buttons: {
success: {
label: "Save",
className: "btn-success",
callback: function() {
console.log('save');
console.log($('#re_confirm')[0].checked);
...
...
...
var check;
$.ajax({
url: "<?php echo base_url(); ?>index.php/home/check_occupied",
type: "post", // To protect sensitive data
data: {
"table_id" : valueid2,
"session_id" : table_column_14,
//and any other variables you want to pass via POST
},
success:function(response){
// Handle the response object
check=response;
},
});
if(check!=0)
return;
$.ajax({
url : "<?php echo base_url(); ?>index.php/home/update_booking",
type: "post",
data: {
"table_id" : $('#idtable').val(),
},
success: function(response){
...
}
});
}
},
...
,
...
}
});
$.ajax is asynchronous
your code is easily fixed though:
$.ajax({
url: "<?php echo base_url(); ?>index.php/home/check_occupied",
type: "post", // To protect sensitive data
data: {
"table_id": valueid2,
"session_id": table_column_14,
//and any other variables you want to pass via POST
},
success: function(response) {
// Handle the response object
if (response == 0) {
$.ajax({
url: "<?php echo base_url(); ?>index.php/home/update_booking",
type: "post",
data: {
"table_id": $('#idtable').val(),
},
success: function(response) {
...
}
});
}
},
});
Following is the code iam working
$.ajax({
type: 'GET',
url: '<?php echo site_url(); ?>register',
data: "",
success: function (data) {
$("#ldcontent").html(data);
}
});
I want to call a layer in the above code as following in #ldfgp
$('#ldcontent').load('<?php echo site_url(); ?>register #ldfgp');
My Question is It is possible to call a layer (#ldfgp) from a loading page to my master page through $.ajax().
I cannot use load function in jquery because it excludes the JavaScript embedded in the loading page.
Your suggestions and helps are highly appreciated.
You may load the whole document to some HTML fragment and then fetch relevant content from it
$.ajax({
type: 'GET',
url: '<?php echo site_url(); ?>register',
data: "",
success: function (data) {
var $fragment = $('<div/>').html(data);
$("#ldcontent").html( $fragment.find('#ldfgp').html() );
}
});
due to $.ajax load entire html document include html>body,$(data) is creating a little odd Jquery object.
so you can use $(data).find or $(data).filter to find your element. you can try some like:
$.ajax({
type: 'GET',
url: '<?php echo site_url(); ?>register',
data: "",
success: function (data) {
var $data=$(data);
var $layer=$()
.add($data.find('#ldfgp'))
.add($data.filter('#ldfgp'));
$('#ldcontent').html($layer);
}
});
You can try this -
$.ajax({
type: 'GET',
url: '<?php echo site_url(); ?>register',
data: "",
success: function (data) {
$("#ldcontent").html(data);
$("#ldcontent *").css('display','none');
$("#ldcontent #ldfgp").css('display','block');
$("#ldcontent #ldfgp *").css('display','block');
}
});
So, let's assume we have the register.html document like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ldfgp">
<h1>Hello</h1>
</div>
<div>
<h1>Hello 2</h1>
</div>
<div>
<h1>Hello 3</h1>
</div>
</body>
</html>
Using $.ajax() you could grab the element with id #ldfgp this way:
$(document).ready(function() {
$.ajax({
type: 'GET',
url: './register.html',
data: "",
success: function (data) {
var external = $.parseHTML(data);
$.each(external, function(i, e) {
if ($(e).attr("id") == "ldfgp") {
$("#ldcontent").html(e);
return false;
}
});
}
});
});
But personally I'd prefer Vadim's solution, as it is cleaner and doesn't involve explicit .each() iteration.