I need to display a document (like in a Google Docs style view) and provide the ability for a user to make comments on that document.
Here's how it needs to work:
When the user views the document, they can use their mouse to highlight any amount of text they want (as they would within any other webpage)
Upon release of the highlight, some sort of modal dialog box appears asking them what they would like to comment on that portion of the text they selected
After clicking save in the modal box, their comment is saved in a MySQL database along with information about the section of the text they highlighted
Another user can view this document and see their comments on the different parts of the text.
I don't know how to tell the database what section of the text is highlighted so it can reference that and show the comment on that section of the text.
Not sure where you're getting stuck at but the basic idea would be:
Get the selected text using Javascript (see http://www.codetoad.com/javascript_get_selected_text.asp for an example)
Submit that text to a PHP script using either an HTML form or an AJAX approach (AJAX would probably be what you're looking for based on the description of your app).
Take the text passed to the PHP script and insert it into the db.
Party like a rockstar.
In Javascript:
var selectedText;
selectedText = window.getSelection();
I'd suggest some kind of character-index-based approach. I've answered a similar question recently here: execCommand insertHTML breaks stored window.getSelection()
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.
I am using a PHP foreach loop to list a series of links on a HTML page, which are rendered using jquery mobile. When one of the links is chosen, I want to be able to use the link label in PHP code to query a database and generate the header and other data for the destination page.
The problem is detecting which link was chosen. It seems that an "onclick" event would be involved, but that might mean using Javascript. I've seen an example of placing PHP inside a HTML form, but that relies on using a submit button to create a $_POST input. In my case, the link would be the only button involved in the event,so creating a separate Submit button would not make sense.
You can add query parameters to the links. (e.g. ?id=foo) and then pick them up in PHP via $_GET['id'].
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
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.
i was working on a facebook like website.and im really impressed with the facebook's commentbox.the toggle stuff are really awesome.can someone help me get something like that.
please dont send me this link http://demos.9lessons.info/multislide.php this is the most famous link on internet but i dont think it is like facebook from any point of view.please i need some serious help !!!!!!!
Well you already know the answer, no not the link you pasted, what you tagged your question with:
jQuery
You need to use AJAX via jQuery and modify a with CSS to get exactly what you want. You're coding in PHP so get use to the idea of making your own web controls by hand, it's very easy.
I doubt you're going to find anybody that'll write the code for you, and from the sound of it, you have done your homework and shopped around at the various script sites. What I would suggest is to break down the behavior of what you're looking for and what you have:
Facebook:
Simple link: "Comment"
Thin text box: "Write a comment"
Clicking link creates div under link or setting focus to text box transforms text box into textarea and button.
Clicking outside of div removes div from page.
When button is pushed and comment is made, a div is added between the original div and the link containing the text of the comment.
When textarea does not have focus, it returns the textarea back to its original state as a text box.
Perhaps it would be best to take the code already written for the link you posted and do these things to it:
Remove transitions
Change button elements into <a> tags
Make the "slider" box visible all the time, but have the contents shift
The box should have an <input type="text"> in it with an onfocus="" attribute set so that we can hide it and show the textarea when it's been clicked in
The textarea and button should be hidden until instructed to become visible (display:none)
Use a jQuery plugin to hide the textarea and button and revert to the text box when the comment div has lost its focus(es).
Hope this helps to some degree.