I have a php application that prints a list of "blocks" to a page. a block includes date, time, title and some other information.
The user needs to be able to add a new "block" to the page, and i'd like the new block to appear in the list of the existing blocks without refreshing the page.
At the moment, i'm doing this with jquery. the user adds a new block, and then jquery inserts a new DOM element, which works fine.
THE PROBLEM: Doing this means that a "block" is rendered in two different ways. One way is with php, when the list is initially printed. the other way is with Jquery, when a new block is added.
Having these two different renders means that whenever i want to change the way a block looks, or add some new field to it, i have to update two different things, the php block and the jquery block.
how can php and jquery to use the same code, to render an individual block?
Without code sample it is hard to give you any real advice. But in general you have a PHP solution which will consist of main PHP script and then a snippet which outputs only a single block. The snippet can be included in a loop with passed values for generating of the main page and later can be same snippet called without any values via AJAX and inserted into DOM. Or second option is to use jQuery function .clone() (https://api.jquery.com/clone/). which can clone the block you want but you will still need to clear all the values, if that is what you want. Or eventually you can include one block with no values and hide it with CSS, and once cloned just change its display from none to block or whatever display property it needs to have.
Related
I'm working on a wordpress template and there is one textbox and a button.
I would need to archieve that when i type something in the box and press the button, the page writes this value in the database and then adds a new row to a table on this very same page containing the newely added item. All this without the page beeing reloaded.
As far as I know i need to use jquery to do this, but how is this PROPERLY done inside a wordpress template by using the tools wordpress provides me with?
Even without knowing how wordpress handles custom javascript code, I assume that you can import a custom JS script in the document. (https://codex.wordpress.org/Using_Javascript).
What you need to do is to bind the click event of the button (.click() or with the on() function), and in the callback you can retrieve the value of the text box ($("textbox_selector").val()).
After that you can use the $.ajax() (or the $.get / $.post shorthands depending on which kind of request you need).
To add a new row to the table you can create a new tr element with $("<tr>"), adding the various <td> in the same way or using the html() function to directly set the html inside.
Then you can use the append() function on the table selector.
P.S.: you say that "As far as I know i need to use jquery to do this" so I assume it's only about the client side. Do you need even the server side? If the answer is yes, we need at least the DB structure and other server-side info, and then I can integrate the answer.
Anyway the PHP script will be part of your template and it will be responsible to add the entry in the DB and returning some useful message that will be available in the $.ajax() callback function.
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!
This is probably a fairly unique situation, however I am writing some custom code for myBB. It is essentially a small CMS whereby part of it allows users to define blocks and block areas and fill those block areas with code.
The way I want this to function is that the user creates a block area and then defines its position inside a template. As the user can define any block name they want and place them in any area they want, I am having trouble getting my head around just how to handle this in code.
My thoughts were that I could have the user define a variable in their template named block_blockarea_name, I could then grab that the variable and then parse the name of the variable remove "block_" then use the rest of the name to check for any block that is assigned to that area name. I am trying to do this on a custom page rather than through a plugin itself.
The only other option i have is to have a marker like and use a find and replace on that.
Just wondering if anyone has any ideas or suggestions on a better way to handle this.
Are you asking how to include a template in a custom PHP page on MyBB? I always use this to output things like the header, maybe yours would work in the same way:
<?php
output_page("{$header}");
?>
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.
I'm writing an app that uses ajax to retrieve data from a mysql db using php. Because of the nature of the app, the user clicks an href link that has an "onclick" event used to call the javascript/ajax. I'm retrieving the data from mysql, then calling a separate php function which creates a small html table with the necessary data in it. The new table gets passed back to the responseText and is displayed inside a div tag. The tables only have around 10-20 rows of data in them. This functionality is working fine and displays the data in html form exactly as it needs to be on the page.
The problem is this. the HREF "onclick" event needs to run multiple scripts one right after the other. The first script updates the "existing" data and inside the "update_existing" function is a call to refresh a section of the page with the updated HTML from the responseText. Then when that is done a "display_html" function is called which also updates a different section of the page with it's newly created HTML table. The event looks like this:
Update
This string gets built dynamically using php with parameters supplied, but for this example I simply took the parameters out so it didn't get confusing.
The "update_existion() function actually calls the display_html() function which updates a section of the page as needed. I need to update a different section of the page on the same click of the mouse right after the update, which is why I'm calling the display_html() again, right after it. The problem is only the last call is being updated on my screen. In other words, the 2nd function call "display_html()" executes and displays the refreshed data just fine, but the previous call to update_existing() runs and updates the database properly, but doesn't display on the screen unless I press the browsers "refresh" button, which of course displays the new data exactly how I want it to, but I don't want the users to have to press the "refresh" button. I tried adding multiple "display_html() calls one right after the other, separating all of them with the semicolon and learned that only the very last function call actually refreshed the div element on the html page with the table information, although all the previous display_html() calls worked, they couldn't be seen on the page without a refresh of the browser.
Is this a problem with javascript, or the ajax call, or is this a limitation in the DOM that only allows one element to be updated at a time. The ajax call is asynchroneous, but I've tried both, only async works period. This is the same in both Firefox and Internet Explorer
Any ideas what's going on and how to get around it so I can run these multiple scripts?
I'd recomment you to use jQuery javascript library. It has some funcions, like live() that can "wait" for that table to appear on the browser and apply the remaining functions on it.
Also, it's a great set of functions that will certainly help you out reducing the ammount of code you write, making it more human-readable.