So I have this webpage that I'm making which allows people to create elements on the page on the fly. And I want to be able to save those elements to my server and whenever someone else reloads that page, the webpage will have those saved elements.
I'm not a good web programmer by any means, so take it easy with the web jargon xD
The user created elements are nested 's or lists. Those elements can be deleted at anytime as well.
So I was reading about saving them as JSON but how would I go about doing that as my 's, most of the top level ones will have the same class. Never worked with JSON before, so I'm a real noob at that.
Will the server file keep replacing itself with a brand new copy with each addition/deletion?
And I'd like to get a little help with showing the new elements without updating. On other users page. I read about AJAX real-time updating, like APE, but have no idea how to go about with that. (This is not really needed but would be a nice one to have)
If someone can guide me a little at least, that will be great. Thanks.
The best suitable way to accomplish this is by saving your objects attributes to a database, however other options include XML files etc..
The process of accomplishing it through database is:
If you want to save data to database then you will have to use a server side language like Php or Asp.net, so first step will be to have a database then an active connection to your database on your intermediate file (lets say 'data.php')
Then you need to code your data.php file so that it can take input(usually through GET or POST method) and it can save it to your database
Then you need to pass your data (objects attributes) through AJAX to data.php and save them to your database
On the main file you will have to check whether already some data exists for user, if yes then fetch it from database and display objects accordingly, otherwise set the objects preferences to default
Related
Ok, this sounds crazy, but let me explain. I want a user to be able to push a button, and then the html file is edited in such a way that it a NEW p element is created, and stays there PERMENENTLY (eg on reload and for EVERYONE to see). Any way on how I could do that.
Again I am using node.js/express, and html/js/css.
It really depends upon exactly what you're doing.
Conceptually, you would probably use some sort of template system for generating your HTML files (like Jade, Dust, EJS, Handlebars, Nunjucks, PUG, etc..) and then you store some state in a database and use a query from the database as input to the template whenever you render a particular page.
So, when you add an item to the database, it will show up in all future renders of the page.
So, your button would trigger a form post to your server which would add an item to the database and the response from the form post would be a rendering of the page after adding the item to the database. All future renders of the page from all users would also show those same items in the rendered page.
I recently came across a feature that Salesforce Applications have, i.e. when we log out, the tabs opened during the session are preserved and are displayed again when we log back in at a later point of time.
I would like to implement something similar in my web application where I would like to retain the dynamically created DOM elements so that if I refresh the page or logout, those elements still are displayed unless the end user decides to delete/close/destroy those elements.
Has anyone implemented anything that sounds familiar? If yes, what would be the ideal way to go about it?
Appreciate the help!
I have a webapplication that holds users and adresses as well as various different values. I have implemented a review function as a helper if you go through your data on an infrequent basis. It marks each value as reviewed or not. As this feature is only a helper and a review flag or timestamp is not needed and implemented in the DB, I save an array of data as a JSON string locally using localstorage.
This is enough for my case. You could do the same for your datamodell. You can of course also save this data per user on a separate table in the db. Consider something like: id, userid, featurename, etc.. with this generic layout you can save the state for each feature of your app, be it a tab, a modal, a setting or whatever.
Of course, you need a (preferably JS) function that gets these settings and then can recreate the DOM elements or fetch them via AJAX. You need as well a function that sends an AJAX request to save the information that a feature/window/tab has been opened/closed/etc.
A lot of work for a "nice feature". Might not be a top priority on your bucketlist, but definitly enhances your user experience.
I refresh the page or logout, those elements still are displayed
unless the end user decides to delete/close/destroy those elements.
That can only be possible if before refresh/logout those dynamically created elements are stored.
That can be possible by either storing the value in database or using local/session storage.
Values of the dynamically generated elements can be stored in localStorage like
localStorage.set('someKeyName' ,'value of dynamically generated Elements in string format')
Then after refresh retrieve the values and create those elements and append it to dom
So my problem is if there are 2 pages for example. PricePage.html has the list of prices and UpdatePrice.html has the input text and etc. If I use the UpdatePrice.html to change the prices of PricePage.html, whats the best way should I use? via php to php or via php to mysql or theres even an easier way to do it. Sorry for my bad english.
Don't think of it as updating one page from another. Think of it as two separate pages that both interact with a database.
Store your price information in a database (such as MySQL).
Have PricePage query the database to get the price information, and generate the HTML to display it. (This means the page can't be just static HTML; it needs to use something like PHP that can generate HTML dynamically.)
Have the UpdatePrice page store the new price information in the database. (This doesn't directly modify PricePage, but next time someone views that page, it'll retrieve and display the latest information in the database.)
If you want the data to get updated in real time like once the data is updated it gets reflected on other page,then you can use sockets which will listen for the update event and once the event is fired the contents will get updated.
One of the most popular framework for this business is socket.io.
I would suggest you to have a look to it.The benefit for using this approach is that you save a lot of resource and the functions work in realtime.
I want to save modifications made on a HTML page(modifications made with JQuery), PERMANENTLY! I have read that this thing gets possible by sending an Ajax call and saving it in a table in a database, but what do you actually save in the database? The URL of the page? And what do you retrieve back in the Ajax call so that your modifications actually stay on the page?
This is a Spring MVC based web application, in case this information is needed.
I have no clue how to start or if to start trying saving it, because I have also read that this thing might not be possible, as we're talking about Client-Side modifications.
Modification that I am trying to make:
function versionOne() {
$('#title').addClass('text-center');
$('#title').css({"margin-top":"0px","color":"black", "font-size":"45px"});
$('#title').append('<hr>');
$('#content').addClass('col-md-6');
$('#content').css({"margin-top":"80px","font-size":"20px", "text-align":"center"});
$('#picture').addClass('col-md-6');
$('#picture').css({"border-radius":"25px", "margin-top":"50px"});
}
I'd be grateful for some suggestions!
Thanks :)
Saving the whole page won't work in most cases since it's very hard to also save the JavaScript state. So while you can save a static copy of the page without JavaScript with $('html').html(), that doesn't get you very far (or causes more trouble than it's worth).
What you want is "preferences". The site should remember some specific values. The usual approach is to load the preferences from the database before the server sends the page for the client. Apply them to the elements of the page and send the result to the browser. That way, the page looks as expected when the user sees it.
When the user changes these settings, use JavaScript to update the page and send the changes as AJAX requests to the server to persist them in the database.
When the user returns to the page, the code above will make sure that the page now looks as before.
I would like to dynamically create a corresponding JSON file every time a new merchant signs up to my site.
For example:
Burger King signs up to be a merchant on my site. I add Burger king to my merchants.json file. How would I dynamically create a file that gets inserted into that JSON object that can later be used to pull up data specific to that merchant, on that merchants page. For example, a JSON file full of products or deals.
Is this even the right way to go about it?
Can someone point me in the right direction please?
This seems like a very common usage scenario but I don't see any examples online that explain this application structure thoroughly.
NOTE: I am using AngularJS
EDIT: Thanks for the tips guys, after asking around in the #AngularJS channel on IRC, I've been told to go the extra mile and create an API. I'll probably use sails.js to help with that. This obviously isn't how I was planning to do things, but as you guys pointed out, it wasn't the best practice; not by a long shot.
1) You'd need a small server-side PHP script that accepts the new JSON file sent by the client
2) Browser requests merchants.json from the server
3) Load it with JSON.parse()
4) Add the merchant to the Object
4) JSON.stringify(object)
5) Send back to the server.
Now, this is a horrible horrible idea. Use a server-side database for storing any kind of information on your clients -- MySQL, whatever. JSON is for transporting data, not storing it. You can write some PHP scripts to dynamically generate a page for your merchant based on the data in the database -- so much easier and so much more secure. The method above will expose the whole client database to the client, and based on your specifications above, I don't see another way.