I would like to create a web application where a user can drag and drop images and text onto a div or similar container. Then, when the user clicks a save button, the application would be able to save the content of the dropped items, as well as the positional information for those items.
Ultimately the user should be able to come back, open then application, and have the images and text back in the exact same places as when they were saved.
If anyone knows a methodology or framework that could assist in accomplishing this, it would be appreciated.
When the user hits the save button, you will need to collect the dynamic state of the current web page (which sounds like images and positions) and send that to your server with some sort of user id that uniquely and securely identifies this user. The next time that user loads this web page, you can either put the state into the web page as it is retrieved from the server or you can use client-side javascript to retrieve that user's state from the server and then dynamically modify the page to match the desired state.
You can save the state to the server with either an ajax call or a post. You can retrieve the state from the server from the client javascript using an ajax call or if the state was already put into the web page by the server, you can just refer to it there.
Related
We have service where all user interaction is done via texting (iMessage) using Sendblue. We want users to be able to refer their friends to get free credits. The easiest way we can think of would be giving that user a link to send to their friends, which, when opened, would auto-populate a message to our number, the content of that message being the referring user's number. Example:
I (phone number +1234) want to refer my friends. I send them a link, which when they click, opens a text message to +4321 (the service) with the text prepopulated with my phone number, "+1234".
Right now the entire service is run through Zapier, so ideally would be able to work through that. You can also enter Javascript blocks into Zapier to manipulate data if that would help.
The only solution I have been able to come up with so far is create a different webpage for every person's phone number, which would just be a custom html link with the above that would be clicked automatically on page open.
Is there an existing service that does this (and ideally works with Zapier)? Or would I have to do what is described above? If so, what is the easiest way to integrate that data? Is there a way to automate webpage creation?
Any and all help is appreciated!
My name is Alex.
Sorry for my rather bad Englisch because i come from Germany.
I just started programming with Node.js.
Previously i made some small static HTML and CSS websites.
I have some beginner questions (which might be dump).
I think these questions are very general for now and have therefore not included any code examples.
So far I have written a static HTML website which I host locally on my computer using Node.js and Express.
My Questions are:
Which actions within a web application should take place on the client side and which on the server side. For example, I have several buttons on the start page. With the help of which predefined users can log in. When clicking on a button, the user should be redirected to the login page. The user name of the respective user should be entered directly into the username field on the login page.
How do I implement such a transition?
The username would probably have to be passed to the server using a post call. How does the user get to the next page? Should this be a simple link or should I send the new HTML document to the user via app.sendFile()?
For example, how do I change tags in an HTML document using Node.js. The same example as before a user is logged in and redirected to the next page. Now he should be greeted with his name. The name can be read from a database using the UUID.
How do I get this name into a tag?
Do I need a template engine or are there other ways to change a static HTML page.
Thank you in advance for your help.
In my opinion, security-critical parts logic be placed on the server (logging in, checking balance, authorization, etc.).
Traditionally, no code on the client side is required. You click a link/submit a form, which sends a request to a server, the server responds, the client displays the new page.
Using client side code, however, can make your app smoother and reduce the load of the server. For example: the user clicks on the shopping cart button. Instead of reloading the whole page, the user sends an ajax request, and the server responds with the cart data. Then the client updates the document, displaying the formatted cart data.
You can't "change html tags" from nodejs. You can send a response. If you send a html response, you decide how to produce the response. You can just concatenate html strings, but using a template engine is a better solution.
Cannot phrase correct term or language that I want, so finding hard to search.
Q: From server side, push line of text to user.
Building MVC 4 (asp.net - c# .net4) application. One page will have a "notifications" coloumn which will be a list of new tasks the user should do.
The tasks stored in a database.
When a new task has been added to the database, I want to push a line of html text to this notifications list with out the user having to refresh the page.
Is this possible, or do I need to have the user client side run on timer to request update of notifications?
thanks,
Please point me to similer questions or resources and the obiouse resource that Im looking for.
You are looking at a timer unfortunately if you need to support a wide range of browsers but you can use web sockets to push the information on clients that have the support. Check the website http://www.websocket.org/
Here is a basic tutorial on web sockets:
http://www.html5rocks.com/en/tutorials/websockets/basics/
I'm new to AJAX and PHP but I know that PHP is a server-side scripting language and so there will not be any changes to the html unless the user refreshes the page or the user submits a form. Therefore I suppose the change of the number in <span id="mercurymessagesCountValue"> when a facebook user receives a message
is AJAX-related.
And this is my guess:
The change of the number is triggered when it is detected that another user [the sender] has inserted a new row into a particular table and each column contains different data: the time, the message, the sender id and the receiver id.
So here's my question... In this case, how is the changes in the database detected and how does it trigger a javscript [or something else] to make changes to the html? Or if I'm wrong... can I know how Facebook does that? Thanks very much!!
If I got the question right, you should check out about pull and push models. Facebook works under the push model: facebook server knows when new message is received and it pushes the notification to the client (website open in the browser).
Let me clear a few things up for you here,
AJAX is simply a type of request being sent by the browser to go grab data from another page dynamically. In facebook's case, they actually have a special type of connection to the client computer to keep the page 'alive'. This way, they can push dynamic updates to the client without the need to constantly poll/refresh a single page on the server (would make large amounts of load).
So, let's just pretend, they are constantly refreshing the page on the server to determine how many notifications are unread -
Client -> Ajax Call -> Server PHP Page -> Ajax Return -> Client
So, in order, the client sends a request for the page to be generated by the server.
The server's php page will then count the number of 'unread' notification rows in the database for that particular user. It will then output the number of unread rows in plain html.
The client then recieves this plain HTML from the Ajax call, and simply updates the DOM with the new number of unread notifications
PLEASE NOTE: This is not how facebook works, but it's a good example of how to set up your own basic notification system if you are new to dynamic coding.
My guess is that requests are sent frequently from the client via Javascript, to the host, asking "has anything new happend since last time i asked?". The answer is responded by the server, with PHP, if it is yes, the new data is delivered in the respond and JavaScript updates the DOM (HTML) with the new data, like showing the red flag or something.
javascript:location.load(t);
(t=time interval)
i guess ,, refreshing a page in every several seconds will pop up the notifications recieved..!!
I have a simple product catalogue for businesses. There is a catalogue's management interface for adding products. Each business has a unique domain name where all its products are listed.
I would like to extend catagloue's functionality and allow businesses to have their products listed on facebook.
Functionality of the facebook application:
- Each business can install application from catalogue's management interface (I would like to have a button that opens facebook in a new window and prompts user to authorize access to one of user's existing Facebook Pages)
- installing application adds a Tab on selected Facebook Page,
- by clicking on a Tab visitor of the Facebook Page is presented with a list of products specific for this business. Data for that page is dynamic and can be accessed with a REST call and presented as json or html.
We would like each business that have a product catalogue with us to install application and have it automatically configured to use specific domain name when requesting product data.
Is it all technically possible? Could you point me into the right direction on how to
- install application from external website
- configure that application with a parameter (perhaps passed in url when requesting application installation)
- automatically add Page Tab for this application
Cheers,
Michal
Yes it is possible. But it'll be a little different from what you are thinking, i guess.
I recently implemented code to add a tab to a page programmatically, it is as follows(in PHP) :
$tabAdded=$facebook->api("/".$id."/tabs","post", array("access_token" => $access,
"app_id" => $fbconfig['appid']));
From the code we see that we need an app id, an access token, and the page id($id). $facebook is an instance of the FacebookPHPSDK.
So here's how we can get the three things in question:
First app id, you'll need to create a Facebook page tab app, select Page Tab in the app's Basic settings (where you can mention the page tab url. This url will have the content for a page tab.) You'll also need to enable website because you need to ask the user for necessary permissions (namely manage_pages). For your specific requirement you have to give the domain of the catalogue management app.
Second page id and access token, once you have manage_pages permission you can query the graph api to get the pages of the user using : api('me/accounts') this returns data with page name, page category, page id, page access token for all the user's pages.
#thaddeusmt has already mentioned that you can't create new applications, and need to use the same app, you have to read the signed request and get the page id, and serve content. All that will be left to do is link your customer domains to the correct page ids.
Hope this was useful.
You can install/uninstall (add/remove) application tabs to/from Pages using the Facebook API:
http://developers.facebook.com/docs/reference/api/page/#tabs
You cannot create new applications, however. So you will need to use the same application for each Page.
The way you can show different content for each Page in the Tab (using the same application) is by checking the Signed Request. This contains the ID of the Facebook Page. The code that serves up your application Tab can look at the Page ID and serve up the appropriate content for that Page.
I hope this helps get you on the trail. Good luck!
Yes it is possible.
It's a two way process
First you have to get page_access_token through graphAPI.
www.facebook.com/?fields=access_token
This will return Page_access_token.
Use page access token and use post method
www.facebook.com/yourpageid/tabs/
Post Parameters:
app_id= 'YourAppID'
access_token = 'access_token'
That way you can add your facebook app into facebookPage.