Loading a layer in Jquery - javascript

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.

Related

Return resulting json from github API on html file

I have this html code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="result" style="color:red"></div>
</div>
</body>
<script>
$(document).ready(function(){
$.ajax({
url: "https://api.github.com/users/Microsoft",
type: 'GET',
dataType: 'json',
success: function(res) {
$('#result').html(res)
}
});
})
</script>
Whenever I try to see the result on my browser it just shows an empty blank page.
I just need to return the API result and show it on html.
Any ideas?
The AJAX callback makes res an object. When you using .html() the argument must be a string. If you want to see the object represented on the page, use JSON.stringify():
$.ajax({
url: "https://api.github.com/users/Microsoft",
type: 'GET',
dataType: 'json',
success: function(res) {
$('#result').html(JSON.stringify(res))
}
});

Ajax call not working in CodeIgniter

I am trying to test AJAX in CodeIgniter, with no luck so far. Please tell me where I am going wrong.
Here is my test_page.php:
<!DOCTYPE html>
<head>
<script src="<?php echo base_url();?>assets/libs/jquery/jquery-2.2.3.min.js"></script>
<script src="<?php echo base_url();?>assets/libs/jquery/jquery-2.2.3.min.js"></script>
<script src="<?php echo base_url();?>assets/libs/js-cookie/js.cookie.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button id="btn" onclick="gethtml()">ajax Test</button>
<script type="text/javascript">
function gethtml(){
var url = "<?php echo base_url();?>home/ajax_test";
alert(""+url);
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
success: function(data){
alert("ajax success");
}
});
}
</script>
</body>
</html>
Here is my function in controller:
public function ajax_test() {
echo "return from ajax";
}
This Type of AJAX Call dataType is not required
Remove
dataType: 'json'
Use like
<script type="text/javascript">
function gethtml(){
var url = "<?php echo base_url();?>home/ajax_test";
alert(""+url);
$.ajax({
url: url,
type: 'POST',
success: function(data){
alert("ajax success");
}
});
}
</script>
You can use below mentioned solution.
<button id="btn">ajax Test</button>
$(document).ready(function(){
$('#btn').Click(function(e){
e.preventDefault();
var url = "<?php echo base_url();?>home/ajax_test";
alert(""+url);
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
success: function(data){
alert("ajax success");
}
});
});
});
Let me know if it not works for you.
Error in the above code is the response from the ajax_test() is not encoded into json. So, the error event of json is triggered and the code inside success is not executed.
Always make sure to send json encoded data if you are specifying dataType as json.
Try on view
<button id="btn">ajax Test</button>
<script type="text/javascript">
$('#btn').on('click', function(e) {
// e.preventDefault(); Not sure if you need it.
$.ajax({
url:"<?php echo base_url('home/ajax_test');?>",
type: 'POST',
dataType: 'json',
// data: {
// someinput: $('#someinput').val()
//},
success: function(data){
alert(data['test']);
}
});
});
</script>
On controller you can use the output class also.
public function ajax_test() {
$json['test'] = "return from ajax";
$this->output->set_content_type('application/json');
$this->output->set_output(json_encode($json));
}

How to call a function and load part of view using ajax?

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;
},
});
}

PHP and Ajax: how to find out which object did the user click to pass to php?

I tested with some code here, basically the purpose of the html file code is to echo the value from the php file, depending which h3 title the user clicked.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h3 id="random1" name="random_request1">Click here to get number from php</h3>
<p id="randomnumber">Number here</p>
<h3 id="random2" name="random_request2">Click here to get string from php</h3>
<p id="randomtext">Text here</p>
<script>
$('#random1').click(function()
{
//On click: ask php to get me a random text file
$.ajax({
type: 'POST',
url: "action.php",
success: function(newrandom)
{
$('#randomnumber').replaceWith(newrandom);
}
});
});
$('#random2').click(function()
{
$.ajax({
type: 'POST',
url: "action.php",
success: function(newrandom)
{
$('#randomtext').replaceWith(newrandom);
}
});
});
</script>
</body>
</html>
This is the action.php code:
<?php
if ($_POST['random_request1']) {
$random = rand();
echo $random;
}
else if ($_POST['random_request2']){
echo 'abcd';
}
?>
Unsurprisingly, php doesn't recognize the random_request1 and 2 name in $_POST[]. I think I still hasn't grasped the POST function quite well to answer this problem by myself in this case.
use just one click event
$('h3[id^="random"]').on('click',function()
{
//On click: ask php to get me a random text file
$.ajax({
type: 'POST',
url: "action.php",
data: {id : $(this).attr('id')},
success: function(newrandom)
{
$('#randomnumber').replaceWith(newrandom);
}
});
});
and in your action.php
<?php
$id = $_POST['id'];
?>
You will want to have a way to differentiate between the senders. Maybe pass a parameter:
$('#random2').click(function()
{
$.ajax({
type: 'POST',
url: "action.php?action=random2",
success: function(newrandom)
{
$('#randomtext').replaceWith(newrandom);
}
});
});
Or have them go to different endpoints:
$('#random1').click(function()
{
//On click: ask php to get me a random text file
$.ajax({
type: 'POST',
url: "action.php",
success: function(newrandom)
{
$('#randomnumber').replaceWith(newrandom);
}
});
});
$('#random2').click(function()
{
$.ajax({
type: 'POST',
url: "action2.php",
success: function(newrandom)
{
$('#randomtext').replaceWith(newrandom);
}
});
});
There are of course more methods. This might not fit what you're eventually trying to do, but it's a simple way to get started.

how to send $(this).atta('id') using cake php js helper

HIi Folks i am having one issue please help me i want to send some data to my controller using ajax call i have written all code but for data field
<?php echo $this->Js->get('.menu')->event('click',$this->Js->request(array('controller' => 'restaurants', 'action' => 'getItem'),array('async' => true,'method'=>'POST','update' => '#HFNames','data'=>'$(this).attr(id)')),false); ?>
when ajax call hits it take "$(this).attr(id)" as a params but i need the value of cureent click
js helper genrate this
if we remove that double quote from this genrated script then its working
data: "$(this).attr(id)",
why this get quoted
<script type="text/javascript">
$(".menu").bind("click", function (event) {
$.ajax({
async: true,
data: "$(this).attr(id)",
dataType: "html",
success: function (data, textStatus) {
$("#HFNames").html(data);
},
type: "POST",
url: "\/foodkingkong\/restaurants\/getItem"
});
return false;
});
try this instead.
echo $this->Js->buffer('$(".menu").bind("click", function (event) {
$.ajax({
async: true,
data: $(this).attr(id),
dataType: "html",
success: function (data, textStatus) {
$("#HFNames").html(data);
},
type: "POST",
url: "/foodkingkong/restaurants/getItem"
});
return false;
});'
);
Hi Himanshu we had planned to do the same directly using jquery but wanted to do the same via cakephp bind function only.
What will be the difference if we pass the js in buffer.

Categories

Resources