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!
Related
This is the situation, I've got a big array ( 280 items ) which creates a really big form by going trough loops.
I want the user to be able to disable certain items, so they can 'pre make' their form ( and skip the not used ones ), You are probably going to say i can just remove what's not needed. But they need different items from the array every time they use it.
So how would i make a page where they can just use checkbox to 'change' the form. ( if possible at all.)
Thanks,
Mike
edit:
Did not think of sharing code, here:
The array : http://pastebin.com/EnwHsqtK
the form : http://pastebin.com/y2XSFBG4
the page which makes a .txt file from the given answers. http://pastebin.com/UaUcsj2z ( not sure if anyone would need this. )
Might be a bit messy. I'm new in PHP, and only programming for a year. Also dont mind the language please.
If you want to permanently record form preferences/settings for each user, you'd want to create an additional table or column(s) in your database for this, give the users additional checkboxes on the form to indicate their preferences, receive this input and store it in the database, and of course finally disable certain fields based on their settings.
But if you just want to give the users a temporary way to disable certain fields (with no preferences saved permanently), you would use JavaScript in your output. You would add more form controls (checkboxes or buttons or whatever) to the HTML and then add JavaScript code snippets into that HTML to disable form elements when the user clicked on the controls. This kind of making changes when users click is called "triggers that fire based on events". The most commonly-used event is called "OnClick()" and the JavaScript code for it will execute when a user clicks on something.
Many folks who use JavaScript also find it helpful to use the functions in the jQuery library instead of raw JavaScript. To do this, you just add one line of HTML to the top of your page to include the JavaScript libraries from a publicly-hosted server, then you can use jQuery commands in your page.
The only thing to remember when you first start using JavaScript/jQuery is that it only runs on the client browser - its code cannot talk directly to the server, the database, or many things you can access in PHP. JavaScript/jQuery is specifically used for making your HTML pages more interactive. Plain HTML doesn't have much razzle-dazzle. JavaScript allows users to do things like enable and disable form fields on-the-fly.
I am making custom shop-cms. And at this point I am stuck, trying to make for each product possibility for picking colors and for each color 1-5 picture(s). And I just can't understand the most reasonable solution, how should the form look like. The point is that I clone the CREATE form on page load for less code purposes, making an EDIT form out of it. When I click on product's EDIT button it makes a request to DB picking all the information according to the chosen ID. The way I see it is that I have to have main hidden input where I keep all the information about all the colors and related pictures on other inputs change. That will do with creating new product. But when it comes to editing, it requires now collect the information in reverse, the main input's change fills related inputs. And the way I see it requires a lot of rows of code, which is not an option. Maybe somebody has done it before and knows a simple way.
in the DB I keep everything in one cell :
COLOR { IMG => VALUE, PRICE => VALUE }, COLOR { IMG => VALUE..etc}
You can use AngularJS kind of framework to build single page application.
OR use Ajax to call and fetch data for each action.
Loading all data and manipulate them in hidden fields, may makes things complicated.
I myself will either use MVC Framework (i.e. Angularjs) or jQuery ajax to load data according to each action.
On any given page (It's used site-wide for different purposes) I'd like to call a function getMyForm() or something similar and this would render a several step selection process for a product. We only have this one product but it is quite a complex selection process.
If I wanted to implement this on one page only it would be fairly simple... but I'd like this selection process to be available on different pages, and it seems silly for me to recreate the form for each page used when it's only really the outcome after the selection process that will change for each.
How would I go about achieving this:
Should I have the form on it's own page anyway then link to it at the beginning of the selection process and redirect to the appropriate page after selection depending on the page the user first came from?
Use a service container or similar to render the form on the specific page, then use session attributes/variables to track which step the user is currently on, and refresh the current page after each selection.
Something completely different?
Additional stuff:
I want this to be functional without javascript/jQuery, but this
would be a nice addition in future so I don't want to rule it out if
possible.
The selection process is dependent on what was selected in the
previous step, so I can't just render the whole form in step one, and
some kind of refresh will be required.
First, i'd say you can't completely avoid javascript your selection process, if only for triggering change event on your selectors. Having user to manually trigger page refresh through some button doesn't seem like a good idea.
But if you're so inclined, you need to create a form controller with form builder, there just check a request and render a form accordingly.
For example, if no request is supplied it renders a starting form contains only one select and a submit button, and its action is simple submit to the same page. Main page controller includes a form controller, so form controller gets a request and renders second part and so on...
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.
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.