How do I make my website compatible with all those autopaging plugins out there that load the next page beneath the current, thereby saving a page reload?
It's depend on how you design your page.
Let's take a look at twitter page. The items there displayed in a li, top to down. Implementing a autopaging to page like this will be quite simple.
When page load, display a predefined number of item in list (10 or 20, or else)
When user reach the end of list, (maybe detect the position of certain element, or else), load the next page via AJAX. The back end page should detect AJAX request and then only return a portion of page that contain the list item only
In AJAX response handler block, do a DOM manipulation to add the newly received list item into the end of existing list.
In my project, I create function like this by myself. I'm using jQuery btw.
You can't make it compatible with all plugins. You can make it compatible with a specific plugin. How to do that is probably described in the documentation for said plugin.
Related
I am trying to create a form which provide a checkbox element on each row. Problem is that I have 2000 rows which takes some time to load and also it is not easy to navigate through whole list.
Is there a way to create some kind of pagination in Drupal form ?
There's no built-in pagination of field values within the context of a larger form that I'm aware of. Instead, you'd probably want to consider a Javascript solution, where you load all 2000 form values, but you use JS and CSS to hide all but the first page. Then you create Javascript forward/back and page links which dynamically hide the first "page" of checkboxes and load the page in question.
The reason I recommend this, instead of an AJAX request that loads only the first 20 records and then dynamically loads more via a pager, is that you'd have to separately track and store which values had been checked (since the AJAX would literally throw away and reload the next 20 checkbox values). By contrast, if it doesn't slow the page down to load all 2000 checkboxes as, say, 100 individual sections behind the scenes, and then use your custom JS pager to show/hide the pages, your user could check and uncheck while paging and all the values would be remembered. (It's an often overlooked feature of HTML forms that they retain their field values even when hidden via CSS, which can be super helpful when you're aware of it).
I don't think a code snippet would be too useful here because this is a fairly open-ended problem, but the basic process would be:
Use hook_form_alter() to change the specific checkbox group field(s). Specifically, you would use markup to add the paginator controls after running the database query to retrieve the results and determine the number of pages.
Also as part of using hook_form_alter(), you would loop a page at a time and generate all 100 (or whatever number) pages of checkbox options, setting all but the first page to display:none in the <div> tags surrounding the checkbox options.
Create JS or jQuery functions in your site's custom theme, or put the code into an includes/ folder and load it dynamically through hook_form_alter (not elegant - I recommend always having a custom theme or sub-theme available). This function would listen for the link press and the current page and hide/show the proper CSS blocks.
If you wanted to get fancy, you could also create a JS-enabled page number field where you could type in a page number and hit Enter, or a search feature that would return individual results (more complex since now you'd have to be able to show/hide all individual records), and a check all/uncheck all feature for individual pages. Have fun!
My app currently changes data quite frequently and requires the user to switch back and forth between pages.
I often find that when a page is loaded through AJAX, and then you return to said page either through the backbutton, or by clicking a link...the information isn't always refreshed.
Is there a way to force this refresh?
This is due to the fact that when you link pages through AJAX navigation in Jquery mobile they are automatically loaded into the DOM according to the documentation.
Try adding a data-dom-cache="false" to your "page" as one of the attributes.
I would like to use a DIV to load a page within a page. Seems simple enough - BUT, I would like to do this WITHOUT refreshing the entire page.
Here is my example:
browse.php --> Lists all of the items that I currently have for sale on my site. This page can be incredibly long, and taxing to reload (especially on slower connections).
editcart.php --> This is the page that I would like to load within browse.php. It allows the user to add/remove a specific item from their cart.
Is there any way that I can load editcart.php on browse.php WITHOUT refreshing browse.php?
If it's just loading the page you can do the following using the .load() method
That was the first item that came up in google search
$('.editableItem').click(function(){
$('#editDiv').load('editcart.php');
});
You can read more about this and other methods here
Hello guys I newbie question :) - I am currently using PHP/Zend and now I need to display a form and other content in one of my pages. I do not want the page to reload and I cant use a pop-up window so the best option is to sort of dynamic display a "square" in the middle of the current page with this form being load on the go... this way i could have my pages (forms, text, whatever) being pulled in this square.
In order to keep compatibility with older/new and different browsers, what would be the best choice? DOJO - that is already in Zend, JQuery, or just HTML5/CSS3? Besides, if anyone could point me to some references of where can I find this info it would be great!
AJAX is the most common means (Asynchronous Javascript And Xml) to do this- which uses Javascript to poll other scripts (can be .php pages) which then return predefined output based on the request- this output can be content to inject into a page, or data which can then be interpreted by your page for another action (i.e. the output from another page etc..).
In this instance, your .php page could include JS (javascript) in the head, whether linked or inline, which would contain details for launching an AJAX request- namely, how often or on what trigger (button press etc), by what means (POST or GET), what is sent (any other variables you wish), what the target script is (the script which will handle the request and output your required content/data), and what to do when the response is recieved (i.e. which element on the page should be updated with the response).
A little about AJAX:
http://webdesign.about.com/od/ajax/a/aa101705.htm
http://webtrends.about.com/od/web20/a/what-is-ajax.htm
Likely the simplest way to begin is to use a pre-existing Javascript library like the ubiquitous jQuery (jquery.com), there are thousands of tutorials out there for it, and though you will need to do some Javascript programming, the library has meant that you can rely on fairly simple syntax to do so (as simple as $('#myelement').load('mypage.php')):
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/
http://www.sitepoint.com/ajax-jquery/
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/
In simple terms:
You have your php page with the element (area) that needs updating (page A)
Build another php script which outputs the content you want 'refreshing', e.g. the latest news stories, each time it is run (page B)
Link to the jQuery library in your header section (page A)
Write a simple jquery function in the header section of page A, which says every X seconds/minutes (or on demand), run an AJAX request to fetch the content of page B and insert into an element (DIV) within page A
---updated---
If you wish to use DOJO as opposed to jQuery, there is also a wealth of resources available:
http://dojotoolkit.org/documentation/tutorials/1.6/ajax/
http://www.infernodevelopment.com/dojo-ajax-tutorial
http://startdojo.com/2010/01/02/simple-ajax-form-tutorial/
http://today.java.net/pub/a/today/2006/04/27/building-ajax-with-dojo-and-json.html
http://www.ibm.com/developerworks/web/tutorials/wa-dojotoolkit/index.html
http://www.roseindia.net/dojo/
I'm working on a web UI control called Folder - it basically mimics Windows Explorer folder - you see a grid of items inside a rectangle and can drag an item around, drop an item inside a different instance of the control, add new items and so on. each item is made of an item template - basically some php code that dictates the look of the item, for example an item template might look like this:
my_item_template.php:
<h3>my item</h3>
<p>i'm an item</p>
when dragging the item i want to replace it with a different template, for example:
my_item_drag_template.php:
<h3>my item</h3>
<p>i'm being dragged</p>
one page may host many different kinds of items, each with its template, its load template, its drop template and so on. my problem is moving all these templates from the server side to the client side.
what i'm doing now - in the server side stage i figure out all the templates that i'll need and include them on the page, hidden (display:none). whenever i need a template (for example when the user starts dragging an item and i need its drag template) i locate it, clone it and use. i'd like to avoid having all this code hidden in my page, maybe store it in a jquery's $(folder).data or something. however, i still need to move it from the php. one option would be to insert the templates to $(folder).data and remove them from the page on page load, but i'd rather avoid it (it adds unnecessary dom manipulation). are there any better ways?
It's certainly an interesting problem, but I don't think you are too far off from a good solution by storing the templates in the dom in a hidden div. Unless you have alot of templates, that generally is a great way to have easy access.
Another option is to ajax request a template when you need it. You can use jQuery's $.load function to get a chunk of html and inject it into an element.
$('<div class="newItem" />')
.load('getTemplate.php?template_id=newItem')
.appendTo('body');
You would obviously have to fill the new element with real data, but you can still do it in a single call.
There is obviously a performance hit by doing this, but the structural gain is pretty significant if you don't mind making the requests. It allows you to define your templates in your backend just like you would a normal page, instead of mucking them all together in a hidden div at the bottom.