I want to load a javascript code inside a div with ajax for this i am doing in this way
$(".pagination_btn").click(function(){
var start = 20;
var json = '{"offer":[{"city_id":"55","city":"Melbourne","name":"Space Hotel","address":"380 Russell St","price_no_vat":"250.96","currency":"AUD","type":"hotel","description":"The 3-star Space Hotel in Melbourne"}]}';
$.ajax({
type:"POST",
url:"search_result.php",
data: "start="+ start +"&json="+ json,
success: function()
{
$('#search_result_cont').load("search_result.php");
}
});//ajax ends
}); // click function ends
what i am doing here is i am posting one start value and json code into variables named start and json and that i want to load into a div#search_result_cont. but when i click in button it show me the blank page. may be my method is wrong for loading the page inside div.
data: {start: start, json: json}
you need to construct data to be sent as an object . . . . same is the case for your json data which has to be encoded as a javascript object
like
json: {name: 'something', address: {street: 'xxx', city: 'yyy'}} etc
Apart from that, can you share the php code of search_result.php . . .
if the php file does not contain any html elements . . .it will be blank since it has nothing to display ........
Related
This is the script i use for the drop down in the echo table
The echo table
Try passing your data object as text
JAVASCRIPT
$.ajax({
type: "POST",
url: "data.php",
data: JSON.stringify(data1) // use JSON.stringify();
});
Also a note is to make sure your html is echo'd or rendered out before you attempt to bind a javascript function to it. Other wise you will get an error indicating no such html element found.
I want to get content using ajax from an admin page and append it to all content pages on right hand side.
I have this script:
$.ajax({
url: '/Quicklinks-Content-Admin',
type: 'GET',
success: function(data) {
var quicklinks_list = [];
$('.content-inner .blogentries ul li').each(function (i, v) {
v = $(v);
quicklinks_list.push({
text: $('.blogBody a', v).text().trim(),
href: $('.blogBody a', v).attr("href"),
bg: $(v).find('.sws-inline-content img').attr('src')
});
console.log(i);
console.log(quicklinks_list[i].text);
console.log(quicklinks_list[i].href);
console.log(quicklinks_list[i].bg);
$(".quicklinks-inner").append('<div class="right-quicklink ql' + i + '"><div class="quicklink-inner"><div class="quicklink-title">' + quicklinks_list[i].text + '</div><div class="background-cover"></div></div></div>');
$('.ql'+ i +' .background-cover').css("background-image", 'url("' + quicklinks_list[i].bg + '")');
$(".quicklink-title a").html(function(index, old) {
return old.replace(/(\b\w+)$/, '<span class="lastWord">$1</span>');
});
});
}
});
With this script I extract the content from a blog list from "/Quicklinks-Content-Admin" page which is a link in two variable (text and href) and one more variable for the image. After this I want to insert the content from variables to all content pages.
Actually, that script insert the content just for that admin page, instead to put it on every single page.
Why does it happen and how to solve the problem ?
AJAX is just a procedure for sending data from/to the current webpage to a back-end PHP (or aspx etc) file.
If the transmitted data should be remembered (for example, to update other pages), then you can store it in a database and refactor the other pages to read from the database for data when constructing each of those pages.
If you require the AJAX data to be added to other areas on the same page as the AJAX routine, for example in sidebar sections that are $.load()ed when the page is constructed, just use javascript to update those areas. Or, use javascript to call another $.load() of the data into that div.
Regardless how you do it, you will either use javascript to update an area on the page you are on, or you will store the data on the server (usually using a database, but you can also use a server-side file) and make the other PHP pages read that stored information when building their pages.
Hi i have this data which i want that only a certain div will refresh using ajax. How will i able to pass the json_encode to the ajax what will load the data on a certain div using codeigniter.
Heres my controller below
$this->data['getNumberOfMessages'] = $this->mm->getNumberOfMessages($this->data['id']);
$this->data['countNumber'] = $this->data['getNumberOfMessages'];
$responseOnject = new stdClass();
$responseOnject->status = 'ok';
$responseOnject->StatusMessages=$this->data['countNumber'];
$this->output->set_output(json_encode($responseOnject));
this line of code here
$this->output->set_output(json_encode($response));
outputs this one
{"status":"ok","StatusMessages":20}
and i want that to pass through my ajax in my code below
$(document).ready(function(){
var id =$(this).data("messageid");
$.ajax({
type: "get",
url: $(this).data("href"),
success: function(data){
alert(data.StatusMessages);
console.log(data.StatusMessages);
$("#" + id + ' span.badge').html(data.StatusMessages);
}
});
});
and target on my certain div so that it will automatically refresh
below is my code
<tr>
<th>
<a href="#" id="<?php echo $id; ?>" data-messageid="<?php echo $id; ?>" data-href="<?php echo base_url().'profile'?>" title="messages">
<span class="badge"><?php echo $countNumber; ?></span>
message(s)</a>
</th>
</tr>
when i tried to alert(data.StatusMessages);it return undefined.
can someone pls help me figured this thing out? ive been stuck in this.. my code really works but i want to be ajax, only certain div refresh without refershing my entire page.
Any help is muchly appreciated.
You need to decode the response JSON first in order to be able to access it as a JS object. This is how it's done in JS:
JSON.parse(JSONStringHere);
So, your success callback should be:
success: function(data){
data = JSON.parse(data); // this is what decodes JSON
alert(data.StatusMessages);
console.log(data.StatusMessages);
$("#" + id + ' span.badge').html(data.StatusMessages);
}
As I said in the comments, you're not calling the right URL with AJAX (although you said you do and that it returns that JSON string; if so, the code above would work). This doesn't look like it would give you a URL:
$(document).ready(function(){
var id =$(this).data("messageid");
$.ajax({
type: "get",
url: $(this).data("href"), // <---- what is the value of this?
Once you fix that, your code will work.
For JSON data your controller should have the following line to output
UPDATE
Just noticed your problem is that codeigniter is outputting html along side your ajax response.
To Make this go away, Your code in the controller should be like this:
$this->output
->set_content_type('application/json', 'utf-8')
->set_output(json_encode($responseOnject))
->_display();
exit;
This would force the output library to display & the exit to stop displaying anything else.
If you do not set the application/json content type, your response won't be treated as JSON And you'd have to use JSON.parse in your javascript code to convert it to json which is a bad practice.
Currently, I'm trying to create a page using instagram's api, showing recent pictures with a specific tag, as well as the user who posted it and the date posted. I'm also trying to have the infinite loading functionality, with ajax loading in more instagram posts as the page reaches the bottom.
Heres a link to the live site http://www.laithazzam.com/work/nukes/indexnew.php
Clicking the red yes will skip the video, and go straight to the instagram feed.
I'm currently using Christian Metz's solution found here, https://gist.github.com/cosenary/2961185
I am also having an issue with posting the date, in the first initial load, as well in the ajax loads. I was previously able to use this following code, before trying to implement Christian's php/ajax solution.
var date = new Date(parseInt(data.data[i].created_time) * 1000);
<p class='date'>"+(date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear()+"</p>
I guess what I don't understand, is how the ajax loading function, is actually functioning. How would I also pull the name, and date through the ajax loading success function as well?
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {
tag: tag,
max_id: maxid
},
dataType: 'json',
cache: false,
success: function(data) {
// Output data
$.each(data.images, function(i, src) {
$("#instafeed").append('<img src="' + src + '">');
});
// Store new maxid
$('#more').data('maxid', data.next_id);
}
});
});
The data parameter of the success handler function is populated from whatever JSON ajax.php returns and the structure will match accordingly. It looks like the images attribute of that object only has an array of URLs for the images and no other data.
You'll need to update this section of the PHP script to return more than just the array of URLs for the images and also include the additional data retrieved from the Instagram API.
Try updating the last part to this:
echo json_encode(array(
'next_id' => $media->pagination->next_max_id,
'images' => $media->data
));
Then you'll have full access to all the media data, not just the URL.
Below is the code snippet which is hitting the url on server and getting the html response.I can see
the response inside firefox debugger but it does not display in div tag.
$.ajax({
url: url,
dataType: 'html',
data: '',
type: 'POST',
success: function(data) {
//in firefox debugger i can see complete html response inside data
$('#displayContent').html(data); // but here, it does not
// append the html inside div displayContent. Instead it makes
// the current page blank
}
});
I don't get what mistake I'm making here Can I not directly assign the ajax html response to an selector(div tag in my case) with $('#displayContent').html(data)?
Instead of using html() method use append i.e.
$('#displayContent').append(data);
Or if you want to assign whole content direct to your element use load method
$(function(){
$('#displayContent').load(url);
});
If you've got a form tag on your page, and you're trying to submit it asynchronously with jQuery, your function will need to return false, to prevent the browser from handling the form.
Example:
$("form").submit(function () {
$.ajax(...);
return false;
});