jQuery: Get next page via ajax and append it with animation - ajax

I am getting next page on my wordpress blog using jquery, finding the desired div and appending it to the existing one. This part works without a problem. But, what I need to do is, to add slideDown animation to it.
This is how my working code so far looks like:
$.get(next_page, function(data) {
var response = $(data);
var more_div = $(response).find('.FeaturedRow1').html();
$('.FeaturedRow1').append(more_div).slideDown('slow');
$('.navigation').not(':last').hide();
I tried adding hide() to response, more_div as well as append lines. In the first case, I get error stating that it cannot set property display of undefined.
In the second case, in the console it display HTML and says "has no method hide". I also tried adding a line $(more_div).hide() but again, I get the error "Uncaught TypeError: Cannot set property 'display' of undefined".
If I use hide in the 3rd line
$('.FeaturedRow1').hide().append(more_div).slideDown('slow');
it hides the whole FeaturedRow1 div and animates it, that takes me to the top of the div, which is what I don't want.
EDIT: Here's the important HTML structure and jQuery code for the desired section
<div class="FeaturedRow1">
<div class="postspage">
//list of posts here
</div>
<div class="navigation">
<span class="loadless">
//hyperlink to previous page
</span>
<span class="loadmore">
//hyperlink to next page
</span>
</div>
</div>
When you click on the hyperlink inside the loadmore, the following jQuery code gets called
$('.loadmore a').live('click', function(e) {
e.preventDefault();
var next_page = $(this).attr('href');
$.get(next_page, function(data) {
var $response = $(data);
var $more_div = $response.find('.FeaturedRow1').hide();
$more_div.appendTo('.FeaturedRow1').delay(100).slideDown('slow')
$('.navigation').not(':last').hide();
});
});
$('.loadless').live('click', function(e) {
e.preventDefault();
if ($('.postpage').length != 1) {
$('.postpage').last().remove();
}
$('.navigation').last().remove();
$('.navigation').last().show();
});

You get error as you are using html method which returns a string not a jQuery object, try the following.
var $response = $(data);
var $more_div = $response.find('.FeaturedRow1').hide();
$more_div.appendTo('.FeaturedRow1').delay(100).slideDown('slow');
//$('.navigation').not(':last').hide();
Update:
$.get(next_page, function(data) {
var $response = $(data);
var more_div = $response.find('.FeaturedRow1').html();
$('<div/>').hide()
.append(more_div)
.appendTo('.FeaturedRow1')
.delay(100)
.slideDown('slow')
$('.navigation').not(':last').hide();
});

Related

Loading data from a kendo grid into a kendo window

grid with a custom command to open a kendo-window with detailed data. Like described here:
http://demos.telerik.com/kendo-ui/grid/custom-command
I load the data for the grid as json via php script f.e. employees.php.
In the example by clicking on the "View Details" the windows loads Data from the same datasource.
What i need is to load detail data from another php/json file. I found out that it should work with the "refresh" Method, but i didn't get it to work.
Can anybody help me out?
UPDATE
Thanks to #Karthikeyan my code now looks like this:
<script>
... function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var dataItemID = dataItem.AK_ID;
$.getJSON('data/akDetail.php?ak=' + dataItemID + '', function (data) {
wnd.content(detailsTemplate(data));
wnd.center().open();
});
}
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= title_dataitem #</h2>
</div>
</script>
the kendo window does not open, i get an error in the chrome console: "Uncaught ReferenceError: title_dataitem is not defined"
In the demo grid, the line wnd.content(detailsTemplate(dataItem)); binds the template with data of the current row. You can instead do something like
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$.getJSON('/dataSource.php', { param1: dataItem.param1, param2: dataItem.param2 }, function (data) {
wnd.content(renderTemplate(data));
wnd.center().open();
});
}
The renderTemplate method can generate HTML markup using the data received from server and will get dumped as content inside the window.
Update: renderTemplate method can either be a kendo template that expects the data from the akDetail.php call or a custom implementation that returns HTML markup which can be used as modal window's content. For example,
function renderTemplate(dataItem) {
var markup = $('<div id="details-container"> ' +
'<h2 class="firstName"></h2> ' +
'<em class="title"></em> ' +
'<dl> ' +
'<dt class="city"></dt> ' +
'<dt class="dob"></dt> ' +
'</dl> ' +
'</div>');
markup.find('h2.firstName').html(dataItem.firstName);
markup.find('em.title').html(dataItem.title);
markup.find('dt.city').html(dataItem.city);
markup.find('dt.dob').html(kendo.toString(dataItem.dob, "MM/dd/yyyy"));
}

Open a link without a page reload

When I click on the link i want page2.html to appear without any reloading of the current page. Despite all trials, when i click on the link it does reload the entire page before displaying page2.html
<script>
$(document).ready(function() {
$("a").click(function(event) {
var $this = $(this),
url = $this.data("url");
$(document.body).load(url);
event.preventDefault();
});
}); < /script>
homepage.html
<a href="#" data-url="page2.html" class="topic-list-item">
<h3 class="topic-title">Internet Protocol Basics</h3>
<div class="topic-description-text">
Learn how Internet Protocol is used
</div>
</a>
$("a").click(function() {
var $this = $(this),
href = $this.attr("href");
$(document.body).load(href);
location.href = "#" + href;
});
See jQuery.fn.load for more details.
try this code it will work
$(document).ready(function () {
$("a").click(function (event) {
var $this = $(this),
url = $this.data("url");
$(document.body).load(url);
event.preventDefault();
});
});
the problem with Digital's code is that he is not using data function to get url as well when we click on then default action for anchor will be called so we need to stop default action so i used event.preventDefault();
also always put your jquery code between $(document).ready block

Bootstrap popover and loading content with ajax and django

I know it has been given some answers but I will go for it :). As the title says i want to add popover bootstrap but with ajax loaded content. my html, but i want a Loading message to appear first and then the content.
<p class='entry' data-adjaxload = '/calendar/entry/1'>Title1</p>
<p class='entry' data-adjaxload = '/calendar/entry/2'>Title2</p>
<p class='entry' data-adjaxload = '/calendar/entry/3'>Title3</p>
my django view is the following
def entry_details(request, entry_id):
entry = get_object_or_404(Entry, pk=entry_id)
args = dict(entry=entry, user=request.user)
if request.is_ajax():
return render_to_response('mycal/ajax/entry_details.html', args)
else:
entry_form = EntryForm(instance=entry)
args.update(entry_form=entry_form)
return render_to_response('mycal/entry_details.html', args)
Pretty simple. I am using the same view to either load html content via ajax in the popover, or a details page via normal get request
the ajax details page:
<div class="entry">
<p>{{entry.title}}</p>
<p>{{entry.date}}</p>
<p>{{entry.customer}}</p>
</div>
and the script
$(document).ready(function(){
$('p.entry').each(function (){
var i = $(this);
$(i).bind('mouseenter', function(){
i.popover({
html:True,
title:i.html(),
content:'Loading'
}).popover('show');
$.ajax({
url:i.data('ajaxload'),
dataType:'html',
success:function (data){
i.popover({content:data}).popover('show');
}
});
});
$(i).bind('mouseleave', function(){
i.popover('hide');
});
});
});
But whilst it does run tha ajx and fetches the html, it won't load them onto the popover. How can I change that?
Just fiddled what you are looking for with popover content being updated dynamically using echo/json.
Just roll over the p element and wait for the 3 second delay.
If as you say, the data is being loaded properly then the only change needed is:
var popover = i.data('popover');
popover.options.content = data.text;
i.popover('show');

How to load plain text in to div from another page

I'm trying to load content from another page div into another page div.
What i've got:
JQUERY:
$('#news_date-1').load('test.php .news_date-1');
TEST.PHP
<div class="news_date-1">20-11-2009</div>
Destination.html
<div id="news_date-1"></div>
The result i get =
<div id="news_date-1"><div class="news_date-1">20-11-2009</div></div>
The result i want =
<div id="news_date-1">20-11-2009</div>
Can anybody help out?
You can try calling unwrap() on it in the callback.
$('#news_date-1').load('test.php .news_date-1', function () {
$(this) //will refer to #news_date-1
.find('.news_date-1') //find the inserted div inside
.contents() //find all its contents
.unwrap(); //unwrap the contents, thus removing the unneeded div
});
This is not the most beautiful solution, because .load() already inserts it into the DOM, and then you tamper with the DOM again, which should be minimized.
Another way I see is using $.get() instead:
$.get('test.php', function(receivedHtml) {
//getting only the parts we need
var neededHtml = $(receivedHtml).find('.news_date-1').html();
//adding it to DOM
$('#news_date-1').append(neededHtml);
});
Try this:
$.get('test.php', function(data) {
$('#news_date-1').append($(data).find('.news_date-1'));
});

Update using Prototype and Ajax

I am using Ajax and Prototype. In my code, I need to update the contents of a div.
My div:
<div id="update">
1. Content_1
</div>
My code:
Element.update($("update"),"2.Content_2");
Expected output:
<div id="update">
1.Content_1
2.Content_2
</div>
How can I do this in Ajax and Prototype?
AJAX usually means you are executing a script on the server to get this result.
However, in your example it looks like you simply want to append some text.
To append text you could simply add the text to the end of the innerHTML:
$("update").innerHTML = $("update").innerHTML + "2.Content_2";
If you are wanting to execute a server script, I'd do this: (I haven't used Prototype for a while, things might have changed)
function getResult()
{
var url = 'theServerScriptURL.php';
var pars = '';
var myAjax = new Ajax.Request(
url,
{
method: 'post',
parameters: {},
onComplete: showResult
});
}
function showResult(originalRequest)
{
$("update").innerHTML = originalRequest.responseText;
}
This code will call 'theServerScriptURL.php' and display the result in the div with id of 'update'.

Resources