Is there a way to keep children added to the DOM via .appendChild() after a POST/GET without regenerating them in JavaScript? Right now I'm regenerating them with a few function calls written in a script tag using php.
If the page is reloaded, the DOM is recreated from scratch, and any earlier modifications are lost.
Possible solutions:
Use Ajax to avoid reloading the page. You would be able to send requests asynchronously without losing the state of the DOM.
When responding to specific requests, reconstruct the correct elements while rendering the HTML from php. This requires some duplicated logic on the server-side that you are now handling on the client-side.
Not if you are appending on the client side. The server has no way of knowing that the source doc has been altered, and in turn has no way to make sure the update doc is served after a GET/POST. Best analogy that I can think of is if you open a Word doc, modify some text, and then close the app without saving the file.
Related
I just started writing server code (php), I finished the client side with javascript and html. I have some questions that I hope to get some clarification on before I start coding the server side.
Is it possible/a good idea to create DOM elements (img, p, header etc) on the server side (php), send it to the client side via AJAX, client side set some extra attribute and 'attach' it (the received DOM) to a div on that html page?
I want this because those DOM elements will be used on multiple pages.
Is it possible, and if possible, is sending the entire DOM efficient?
When sending raw HTML rather than JSON you want to consider things like:
the size of the request is going to be bigger. JSON is much more succinct
the time to render the element is going to be shorter (no need to parse the JSON and render the HTML, you're already done it server side)
reusability and caching is pretty easy. Indeed, The same snippet could be served to multiple clients and the template can be cached (the same is true if you used precompiled template in JS, but it's slightly more complex).
Code logic is all in one place (server side) or in two places (JS and server side).
The recommended way to accomplish what you want is using a Template Engine, which out there are plenty of them.
This way you can have separate files for the templates and load them as necessary via an AJAX request.
I recommend you the use of Handlebars, its pretty simple and you can use it with JavaScript and also with PHP itself!!!
See the PHP Handlebars port here: https://github.com/XaminProject/handlebars.php
I am trying to found out how to see if a php file has changed and then show a div with saying Page changed in JQUERY
You'd better do that in PHP using filemtime, no need for JQuery here.
You only need jQuery for this task if you're trying to detect the page change without waiting for the user to request a new page. If not, do as the other responder suggests and use PHP.
But if you need to do it without a page reload, use one of the $.ajax() methods in jQuery in combination with a JavaScript timer. You'll have to poll the server periodically (thus the timer) to ask if the page has been altered.
You would also need to set up something on the server that can tell your page about changes. Perhaps a very simple service that provides the timestamp of the last edit in JSON format. Use $.ajax() to poll for the timestamp, then compare it with the last edit the page knows about. If the timestamp from JSON is more recent, display your div.
Javascript cannot access the server, you will have to use some sort of server side technology. Like PHP that was suggested by Pekka.
In short, javascript is client side, which means it interacts with the user on their side, while php is server side, meaning it interacts with the server. Checking the file modified date is a server side issue, your client isn't serving the pages (unless you're on freenet)
Or you could output a <meta> tag for when the page was updated with PHP or whatever framework or language you are using. Then create a cookie with your JS and compare the cookie with the meta tags content.
Ugly solution but it would work. I wouldn't want to resort that this however.
How can I transfer an array from an IFrame running a php script, to the parent PHP of the IFrame?
I have an Array of strings in PHP that need to be transferred to the main window so that when the iframe changes pages, the array is still stored.
I could use a cookie for this, though I'm not sure that would be the best idea.
Thanks.
you can't do that in php. iframe is like a new browser window, so they are separate requests. separate requests can not transfer data between each other in a server side language.
if you give some detail as to what you're trying to accomplish, there may be another way around the issue that someone can suggest.
Like Tim Hoolihan said, PHP is a server side language that is only responsible for generating the HTML before it is sent to the browser. Meaning once the page shows up in your browser window, PHP has done it's part.
However, with that said, if you control both the "parent" page and the page being iframed, you can json_encode the array in the page being iframed and set it to Javascript variable, then on load pass it to a Javascript function on the parent page (assuming not violating any browser/domain sandbox constraints). At that point you can do whatever you want with it.
Take a look at jQuery for your core Javascript/Ajax needs.
if you control the iframe, you can save the array in a session variable and make the parent do an asynchronous call to retrieve the array from session.
however Jordan S. Jones solution with only javascript works as well
I've been asked to create a web UI that allows a user to modify a specific section of the HTML DOM and then POST the modifications back to the server for storage. The modification should be done via drag'n'drop, with my tool of choice being jQuery. The server will be PHP, but written by someone else since I'm not a PHP programmer.
The only way I can think to do this is to send back to the server the entire DOM section via AJAX whenever it is modified. However, that is expensive since the section could be quite large. Furthermore I'm not sure how I'd efficiently capture the modified section and write it to a string which can be sent to the server. Overlapping events would also be a big concern.
Any ideas for a better approach? Are there libraries/tools (JavaScript or server-side) that I should be considering? Many thanks.
Well if you are dealing with some list of elements, say rows in table you can send back a map where particular row is mapped to a position then when you re-initialize the page you can feed such map back and rearrange the list.
Also - another idea (since you are using PHP) you can have some sort of a model on the back end which backs your visual DOM element, then again - you send back some parameters you have changed (order, size, etc.) and adjust/save the model
Instead of sending the entire DOM section you should try to serialize the DOM section you're sending to something more lightweight (like JSON). Since it's HTML, serializing it to JSON will dramatically reduce it's size.
Apart from that I think there's not much you can do besides some AJAX request to allow the server to save the changes.
You'd want to use something like the UI plugin to facilitate the actual dragging/dropping/reorganizing. I don't know of any libraries that will pick out DOM objects and AJAX information to a server in a particular fashion, so you would probably have to code something like that yourself to suit your specific needs. It might help to know what sort of DOM node you're trying to send.
If you're building something like a custom WYSIWYG, sending the entire node might be the best approach without losing information. If you're doing something simple like allowing users to drag and drop to reorder a list something like the following code might suffice:
var toPost = '';
function handler(data) {//handle server response}
$("ul#container li").each(function(){toPost+=this.getAttribute('rel');});
$.post('processing_script.php',{data:toPost},handler);
I checked into how Google handles these. If you drag and drop an element on the iGoogle homepage, a GET request is sent to the Google handling script with the following parameters:
et '4af26272PQUMZP8V'
mp '19_1:4_1:7_1:13_1:16_1:18_2:2_2:3_2:14_2:11_2:_opt_3:17_3:6_3:12_3'
I'm writing an application that would allow users to edit a calendar, its description and a few other things. I'm using jquery, php and mysql. Each time the user makes a change it asynchronously updates the database.
I'd like to give them the option of turning what they make into a pdf. Is there a way that I can post to my server the raw html of the page after the user makes changes?
I could regenerate the page using only php on the server, but this way would be easier if possible.
You can use this to get most of the HTML for the page:
var htmlSource = document.getElementsByTagName('html')[0].innerHTML;
However it'll lack the opening and closing HTML tags and doctype, which probably won't matter to you as you could recreate that very easily back on the server.
I'll assume you can just use the same AJAX you're already using to send htmlSource to the server once you've grabbed it.
You can certainly return the innerHTML from jQuery any object that you can select, although it doesn't seem like the best way to go (see other answers for alternatives).
Watch out for XSS attacks. If you just run the HTML back and forth without checking it first you are leaving yourself open to major risks.
Regenerating the page from the server is going to be your best bet. To have a good downloading experience, you'll want to be able to send headers for Content-Type and size.
To answer your question, I would use output buffering to capture the output of your scripts, and then use one of the many tools available for turning HTML to PDF.