I made a drag and drop utility that make it possible for users to drag and drop elements directly on a workplace and create their page, I wound how can I save the user's work as HTML page!
You mean the position of all elements? How about iterating through them and saving their position? If you use jQuery you could do something like this:
var positions = new Array();
function savePositionOfAllDivs() {
$('div').each( function(){
$this = $(this);
id = $this.attr('id');
position = $this.position();
left = position.left;
top = position.top;
positions[id] = new Array();
positions[id]['left'] = left;
positions[id]['top'] = top;
}
}
And then send the positions array to some server side script which turns it into CSS which you can then embed into the HTML page that the user can download.
(With more specefic information about what your trying to do this could be way more easy and effecient. Say it is a order drag 'n drop functionality then you only have to save the order of div s)
Uhhm,.. press the save button? Seriously though, I think you might want to put more information on your question, such as what's system that you're using, etc, etc..
document.getElementsByTagName("BODY")[0].innerHTML
Most jQuery drag & drop libraries have the ability to serialize the elements that are being moved into an array that you can save. If you give me the link to the specific library you're using, I can tell you how to harness that.
However, if you made it yourself, you're going to have to try one of the above suggestions.
Maybe using XPath.
You may find useful this discussion on SO.
EDIT:Or maybe you could do sth with Node.childNodes.
for more information check MDC here
Are you trying to figure out the best way to transfer the HTML & CSS from the front end to the server or the best way to save the HTML on the server (as in DB or File)?
I am using jquery , and I made a drag and drop utility that you can use to place some html elements inside the page , I need to know how to save the users work in HTML file that he can download , or can view his work after saving it
I need the same solution that porta is looking for.
My scenario is i'm building a drag and drop cms. Users can drag drop html elements to build their pages. Now how do i save these changes (to db or to a session var) and must be able to create a static page with all the above changes that the user made with php. Can someone shed some light. I'm totally new to jquery and wouldn't consider myself expert in php.
Related
Long story short I am using javascript and php to add / remove questions to a database (think notecards to study with). It all works except I can't get the table on my page to refresh whenever I hit the add question button which uses a XHR to add the data. I can refresh the page manually and see the updated table with my information, but want to use ajax to refresh the table on-screen right after I submit the new question (or delete it) seamlessly. I would rather not have to redraw the entire page, just the table and the info. I understand how to use the XHR and refresh the mysql...but how can I tell the browser to reload a table in a specific div on the page - and only that specific table - with the additional or removed info?
I can NOT use Jquery or other frameworks, just plain old JS, PHP, and html.
I have been searching, and just can't get that "ah-ha" moment yet, can't anybody help me out and push me in the right direction? Generalities, Dom commands to look up or research would be a great help, I don't need character by character coding done by the collective.
thank you, :-)
All you need to do is get it with a method such as document.getElementById or document.querySelector. Then you could change the element however you would need to.
var element = document.querySelector('#elToChange');
element.innerHTML = //something from the server
element.remove(); //for deleting
//If you delete remember to do the following so that you don't have a memory leak.
delete element;
I'd look at innerHTML you can place your table inside a div or whatever, and use innerHTML to regenerate the contents of that div.
So,
basically I have this image gallery > http://sensemillia.com/#/pages/necklaces.php
once the user clicks on one of them images he's lead to the item.php > http://sensemillia.com/#/pages/item.php
As you can see on the left side of the box, there is an image and on the right, there's text.
What I'd like to do, is tell to dynamically item.php load the content depending the url.
Moreover, if the user for example clicks on the first image in the gallery, the url should look like this > ...item.php?id=01 and then accordingly the content of the box should load image01.jpg on the left column, and div01 on the right.
I've searched a lot for this, but all I find are complicated asp or .net answers.
Is there a simple way?
Thank you very much in advance. Any help would be greatly appreciated.
ANSWER
<?php $actual_link = "$_SERVER[REQUEST_URI]";
if ($actual_link == "/pages/item.php?id=11") {
print ("<img src='../Sensemillia/sousou.jpg' id='jack' width='392'
height='475' alt='Daisy on the Ohoopee'/>");
}
else if ($actual_link == '/pages/item.php?id=12') {
print ("<img src='../Sensemillia/second.jpg' id='jack' width='392'
height='475' alt='Daisy on the Ohoopee'/>");
}
?>
You can use session variables or use POST to send data between the pages and fetch the data from your database
How do I pass data between pages in PHP?
PHP Pass variable to next page
Edit:
Maybe you'll want to start here:
http://www.homeandlearn.co.uk/php/php.html
It will give you basic understanding of php and allow you implement that feature on your site.
Also when you're comfortable with mysql queries you'll want to replace them with PDO
Okay let me repeat: You have an image. When you click on the image, a javascript will be called, which loads the page, behind the hash, with ajax?
Why not simply add the ?id=123 to the link behind the hash and let PHP return the values from database, depending on given id?
Btw. I strongly recommend, not to execute the load of page 1:1, because this may cause security issues. This looks a bit like XSS.
I wonder is someone can help, I'm building a website, which is driven from a database. It will consist of user submitted information.
Currently all the information is pulled from a record in the database and is being output via a PHP echo, what i would like too do is add a feature that would allow me to edit the information if incorrect from the websites front end.
I have seen many websites have some form of edit icon next to information in there databases, when clicking this icon the echoed text changes from text to a text field and you are able to update the field being echoed from the database.
Im a designer so have limited knowledge of how functionality for this kinda feature might work.
please could anyone let me know how something like this might be achieved.
many thanks.
You would need to build some kind of javascript functionality to allow the in-place editing of those data bits. One possible solution is a jQuery plugin like jEditable.
Then you need to build a server-side script in something like PHP or ruby where it would take the submitted information and update the database.
well the process is the same for the front-end and back-end. it depends whether you want you build a password protected editable forms or just editable for everyone.
One way you can do this is
echo your information into text inputs
give them a css class that removes the border and makes it transparent
make it readonly(so someone couldnt tab into it and change it)
add a javascript onclick event that changes the class to a normal
text box that is not readonly
add a javascript onchange event that uses ajax to save the new
information into the database when they are done typing, or press enter
after the ajax is done turn the text box back to the first css class
EDIT also add a onblur event that changes it back as well
you could even change the cursor for the text input to a pointer instead of the default (text) cursor so that is looks like you can click on it.
.
now html5 has contenteditable attribute which you can set for elements
simple example:
www.hongkiat.com/blog/html5-editable-content/
simpler demo:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable
I could not find a good tutorial for how to generate tabs in html page. I would like to create a function that automatically generates a tab from database information.
I was thinking something along these lines.
Get categories from DB.
IF(!EMPTY(gategory))
{
create a new tab, named after the category.
}
Could somebody please link me to a good tutorial or maybe give an example.
Thank you.
Well, you know PHP is a server-side technology and there's no way for creating tabs in the client-side without JavaScript help!
In that case, check jQuery UI / Tabs:
http://jqueryui.com/demos/tabs/
You'll need to initialize your script by forming some JSON and iterating an array of tabs information so you should have enough for creating the whole markup that jQuery UI tabs needs in order to get initialized.
So I am trying to have a dynamic tabs kind of thing using both php and javascript. To make it much easier to understand, remember the two choices on facebook (Recent news and most recent) or something like that, when you click on one of them it just changes the content that you see in the middle without updating the page. i know how to delete the content in a div for example, but after deleting the content in the div (innerHTML = "") I want to populate it with the option chosen from the database.
So let's say I have an option (all) and an option (only this)
The default is all so when I run the page, I will just get all. However, if I click on only this, it will clear the div "my header" and will replace the content with the latest content from the database (database) and display it.
For that I need both php and javascript, is there a sample or an easy way to do this before i start digging around.
((Sorry if is not clear but the facebook example should be clear enough))
Whatyou are looking for a is AJAX/PHP approach.
Clicking on the tab
The current content gets removed. This is possible because it has a unique "id" attribute in the HTML code
The server is asked for the new content. This is the AJAX request that will be triggered after/while/... the content is removed.
The server sends back the code. This can be HTML, JSON, XML or similar.
You script recieves the answer, may "do" something with it (like some parsing or similar)
The content will be placed on the page (again, this is possible due to an unique "id"
This is basically the way it is done.
Check out the different JavaScript frameworks. They all come with nice AJAX support:
jQuery
MooTools
dojo
Prototype
And of course, SO is also a nice place to look at: https://stackoverflow.com/questions/tagged/ajax+php
What you're talking about is ajax.
I would suggest a javascript library to help leverage this, like jquery.
It can be as cool as
$.post('serverScript.php',
function(data) {
$('#idOfDivToUpdate').html(data); //shove script data into div
},'html' );
tutorial.