Currently I am using SS4 Blog module.
We have used a paginated style of blog.
And now we need a load more ajax for more content.
Any idea on how to do this in SS4?
I am searching for an example of this but the community was not able to give me an answer.
Though your question is not clear, I will try to answer it in the way I think will make sense.
Pagination: This view is like a book were you actually have to flip through each "Page". If you are on Page 2, you won't see what's on Page 1.
LoadMore: You start on Page 1 then you append results of Page 2 to the View where Page 1 is. This way you can view Page 1 and Page 2 on the same Page creating a stack of pages.
For LoadMore which you asked.
You need a js variable var currentPage = 1; to hold the current page to be loaded from the server. Each time you request data you will need to provide the current page you are on. Logically something like this
You render your page with Page1 loaded; currentPage = 1;
OnClickingLoadMore button; currentPage++;
Send the request via ajax. var url = 'server.com/posts/pull?page='+currentPage;
Append returned data on the current view.
PostsController.php
add the method name to the allowed-action
private static $allowed_actions = [
'pull',
];
Create a method called "pull" with the code below in it.
$oListings = BlogPost::get();
$oList = new PaginatedList( $oListings, $this->request );
$oList->setPageLength( $limit );
$oList->setCurrentPage( $page );
Lastly your routes.yml (simplified)
SilverStripe\Control\Director:
rules:
'posts//$Action/$ID/$OtherID': 'PostsController'
Lastly using jQuery you can APPEND [http://api.jquery.com/append/] to add more content to your page.
Hope this helps
Related
ORIGINAL POST: Not sure why I am having such a hard time grasping this but I am creating a page that executes a query to list a set of records per a user. I am wanting to create a div that shows the details of a select record from the list. I am attempting to load that record with the following:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
$("#form").load("tm-reserves-form-test.php?ContactID"+$ContactID);
});
});
Initial form loads but I can not get my .click function to work using the URL parameters.
How can I pass the url parameter from my current query into a div that loads an external page and executes a second query based on that url paramenter (primary id)?
Thanks in advanced for helping me out!
EDIT POST: Found solution, but another issue has arisen.
So I took a crash course this weekend on ajax and I found a working solution here:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
So with this example, when the page loads the div form is loaded with a default page. With a click function on the label #record the div #form is than loaded with a parameter of ContactID that is a string value inside of #ContactID. All that seems to work very well (even passes the parameter correctly).
The issue now is that it is only allowing me to pass the first record to my div. Any thoughts on what I need to implement next? I originally thought it was to clear the var but that didn't work either.
The original query parameters are not readily available to a running script. So $ContactID is not resolved to an actual value.
See this page on methods for extracting query parameters from the current page:
Get query string parameters with jQuery
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
This code solved my initial question, but led to an additional question.
I am working in cakephp application.
Here all the calls happening with Ajax. So user wants to keep one button or link, when user click on the link it will show one with contains help info of that page. I'm able load div with right content. But dynamically I'm not able to display one link (Show Help) on the page dynamically.
The reason for the "Show Help" link dynamic is based on which page loads I have to pass value to JavaScript function.
Plz help me how to add this link in $content_for_layout so that it will display dynamically in all the pages.
Step1: This is the code to create helper. Put the following code in app/views/helpers/LinkHelper.php
class LinkHelper extends AppHelper {
var $helpers = array('Html');
function showHelp() {
$url = '';//create your url dynamically here
$title = 'Show Help';
return $this->Html->link($title, $url, array('class' => 'help'));
}
}
Step2: Load the Link Helper in layout
$HelpLink = $this->Helpers->load('Link');
Step3: Call showHelp method of LinkHelper where Show Help link to be shown.
echo $HelpLink->showHelp();
I thought this would be really simple but obviously after a couple of days trial and no success I have to ask the people to help, looked everywhere.
right im basically creating a php template without much guidance on the foundation 4 framework with is a responsive framework. Now this framework is rather basic and so to add page transitions ive had to use jquery to do what i believe is an ajax call to take "content" from another page and display it on the template page index.html
for which I am currently using the following
<script>
$(document).ready(function() {
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function() {
var toLoad = $(this).attr('href')+' #content';
$('#content').hide(1000,loadContent);
$('#load').remove();
$('#main_wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('fast');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
function showNewContent() {
$('#content').show(1000,hideLoader);
}
function hideLoader() {
$('#load').fadeOut('fast');
}
return false;
});
});
</script>
NOW before i changed over to using ajax and jquery i was operating the menu "active" class and the page name with a simple variable set on each page in the first line listed as $page='' and then the page name
now that im loading the content with ajax even if i include this variable in the content of the new page it will not update in either the or the menu title
im very sorry i dont write things correctly im new to this forum thing
thank you for the help in advance
:) I prefer someone to explain what i need to do and how to do it rather than just copy and pasting code as im a learner :)
You probably want to load the page and parse the result in jQuery to get the new page’s <title> tag and set the requesting page’s <title> tag.
The only thing I’d ask is: why are you doing this? Are you just wanting AJAX page navigation in your website instead of the traditional propagating navigation?
I am only able to answer one part of your question due to extreme confusion, so:
First off, here's why your url changes:
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
You are modifying it with that line. That line, however, has an interesting little quirk:
attr('href').length-0
at the end. Why the -0? That would make no difference. I'd clean it up.
Outside of that, I'm incredibly confused with what you're asking so let me try rephrasing it and you can tell me what I'm missing.
You want to have a user click on a navigation link, and load that link's content via an AJAX call using jQuery, and then replace the content on the page with the newly loaded page, correct?
When you say "right on top main page i have variable $page = then the page name", what do you mean by "main page"? Do you mean it's a line of text in HTML? Part of a script that you haven't included here? Part of your PHP code?
And then you say "ive tried including the tag in a div that changes along with the above content"- what is "the tag"?
By reading this 4 or 5 times I could barely discern the above understanding of what you're trying to do.
Please make heavy edits to you question- it's incredibly hard to understand.
Lastly, why are you trying to replace the browser's functionality of a user clicking a link and loading content? That's what the browser is for. The browser also, conveniently, has a loading indicator in the url bar usually (or some form thereof), letting the user know the content is still loading.
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
So first off, look at the jQuery doc for the load method:
http://api.jquery.com/load/
Your issue is that it is calling for three arguments, and you are passing two. If there are multiple arguments listed and you only want to pass SOME of them, you still need to supply a null value for the ones you want to "skip". Try changing your call to this:
function loadContent() {
$('#content').load(toLoad, null, showNewContent);
}
You'll notice that I'm passing "null". If that doesn't work, pass an empty string, like this:
function loadContent() {
$('#content').load(toLoad, "", showNewContent);
}
That second argument is data to be passed with the request. It's the THIRD argument that you list as your callback, which as far as I can tell is where you're making the mistake.
Currently, I am using TWIG to display all my information(articles and comments). So, I first retrieve the articles and comments from my database and pass it into an array. This is then passed into my twig template. Then, I load each article and underneath each article I load in the comments of that article. These comments and the buttons associated with it(aka the new comment button) are all made in my macro.
The macro just gets the array that contains the comments that I need to display. It display the comments for the article and with each comment it makes a reply button, so the user can reply to any comment or start a new thread.
I have used AJAX and jQuery to store the new comments in my database without refreshing the page. However, I need to figure out a way to display the new comment without refreshing the whole page. Does anyone have any idea on how to do this in TWIG?
The problem I am facing with TWIG right now is how to post comments asynchronously. I load the array of the current database of comments initially when I load the page. However, if my database updates, how do I update my array with it. Any suggestions? I was thinking of grabbing my array whenever a new comment is added, which is why my question is "How to retrieve an array in TWIG template?", but I am open to other suggestions.
Your issues isnt a twig issue, twig only is a templating engine and is only used on the initial render of the page. What you should be doing is when you get a successful response from your ajax save is create a new DOM element using jquery and add it to the page using your same schema. Something like:
<script>
$.post(
TheUrlThatYouPostTo,
TheDataThatYouPassWithThePost,
function(returnData, textStatus){
//assuming that your return data is an array conatianing a boolean successful key
if(returnData.successful){
$('#YourCommentsWrapperElement').append('<div class="comment">#some other elements containing the posted values</div>');
}
}
);
</script>
Or if you want twig to generate the comment HTML for you and you dont want to have it hard coded into your javascript you can have the controller action that your are posting to with the AJAX post return a rendered version of the comment. Something like this:
#Your Controller file
public function ajaxPostAction(Request $request){
//Handle post data to create a new commentObject
return array(
'comment' => $commentObject
);
}
Then you create a view file for that action:
#your view for the controller action ajaxPost.html.twig
<div class="comment">
<h3>{{comment.author}}</h3>
<p>{{comment.content}}</p>
</div>
Then your javascript will just take the return data and append it to the existing list:
<script>
$.post(
TheUrlThatYouPostTo,
TheDataThatYouPassWithThePost,
function(returnData, textStatus){
//Now your return data is the HTML for the new comment so just append it to the rest
$('#YourCommentsWrapperElement').append(returnData);
}
);
</script>
I am using CodeIgniter's pagination API. I found some issues when I click on particular page: it shows controller and pages in URL. I dont want to show all the details in URL.
I have large number of search criteria.
e.g.
http://localhost/myapp/search/pages/2&fromAge=25...... so on
Is there any way to handle it using POST method rather than GET?
Please help.
If you want to use the pagination with POST, there is a simple way to do that with the standard CI pagination and without Ajax. You can perform a POST instead of the GET
when one click on the pagination links.
For this you need an hidden field in the form (named page in my example) which contains the page number and you need to set the action attribute of the form with the link before submitting it (it is necessary for the pagination class to compute the current page). Find below a sample code in jquery :
// bind onclick event to the pagination links
$('.pagination a').click(function () {
var link = $(this).get(0).href; // get the link from the DOM object
var form = $('#form1'); // get the form you want to submit
var segments = link.split('/');
// assume the page number is the fifth parameter of the link
$('#page').val(segments[4]); // set a hidden field with the page number
form.attr('action', link); // set the action attribute of the form
form.submit(); // submit the form
return false; // avoid the default behaviour of the link
});
On the server side, you read the page number from the
POST field named page to perform the db query with pagination and you build the pagination links with the usual function
What about using AJAX?
http://tohin.wordpress.com/2008/08/12/codeigniter-ajax-pagination/
http://codeigniter.com/wiki/AJAX_Pagination_with_CI_Pagination_Library/