Cloning an existing blueimp file upload table - javascript

I am using blueimp jquery file upload in my current project.
I want to make a clone of my existing file upload table. On the new clone I should be able to make changes and these changes would not affect the first table.
The form may contain some files uploaded to the browser but not sent to server.
As demonstated in this question How to I preload existing files and display them in the blueimp upload table? I can create a new form and add photos that are uploaded to the server as follows:
$(this).fileupload('option', 'done').call(this, null, {result: result});
But in my case the photos are not sent to the server but held in an existing form/table.
Note: I will use the clone in my edit view. The edit view has a cancel button. I want to be able to return to the original state if the user press cancel.

Using the "Programmatic File Upload" feature of the plugin I was able to show previous table's files and fileInputs in the new table as follows:
$('#fileupload').fileupload('add', {
files: filesList,
fileInput: $(this)
});
https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-upload
https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-uploads-for-browsers-without-support-for-xhr-file-uploads
Note I was able to collect the files and fileInputs from the previos table by using the "fileuploadadded" event of the plugin
$('#fileupload').bind('fileuploadadded', function (e, data) {/* ... */});
https://github.com/blueimp/jQuery-File-Upload/wiki/Options#additional-callback-options-for-the-ui-version

We may need more info or more code to really help, but my impression is that you are simply attempting to create a second html table that has added functionality for the user. The user can make changes and if a 'confirm' button is pressed then the edits get applied to original table. If this is the case, then the blueimp framework, or even the fact that the files may or may not eventually be uploaded to a server, should not be considered factors to this UI scenario.
Jquery has a method clone, which would allow you to duplicate a table and append that to the DOM where you wish. However the fact that this new table will have new functionality leads me to think that a simple clone is not what you would want. It might be better to have another 'edit table' pre-made with all its functionality and hidden by default. Then when the user wants to edit a particular item, you would update the 'edit table' with the necessary data and show it. If the user hits 'cancel' simply hide the edit table, if the user hits 'confirm' hide the edit table and save the edits to the js object for that item, then update the original table to match the edits.
My answer is lacking any code examples on purpose as the actual code for this final product could vary drastically project by project. If you would like to put together a simplified version of your project on jsFiddle, it might help others.

Related

Auto save data with Node.js

Right now I'm building a team based project with Node.js/MySQL/React and have been stuck at a ToDo list part. I would like to know what is the recommended or fastest way how to save data or options to database automatically and without any submit button on each row.
Todo item
You could do a single POST when adding a new row, and whenever you change the options you could do a PUT request, but as a general design rule I'd advise against it : you want to be able to review all your changes before committing them to the database, plus this requires a lot more requests, hence more controllers rather than just having one.
Looking at your screenshot why don't you have a single submit button at the bottom of the table ?

adding dynamic data to mysql with php j query

I am trying to add multileg travel information using PHP, jQuery and MySQL. I present to users with existing data and then they dynamically add travel leg information to their existing visit. What I have done so far is below.
Bind data (PHP -MySQL) to the HTML table. Show add new button the user.
When the user clicks on add new, I have used jQuery to clone the data and this has dynamic id.
On the form there is file upload as well which needs to upload the file and also save information in the database.
My problem is how can I rebind the data on the table without effecting any other thing. I have tried to use jQuery load but it tries to reload the entire page rather than just reloading the newly generated trs.
I am open to change my logic on the whole as to how I do this.
Appreciate any help on this.

Dynamically display database information onclick

I set up a web service using LAMP for personal use.
Basically, I have a scrollable list with some database information I pull once in the PHP script. I'd like to be able to click on one of the items, and have more information appear in a preview pane . (preview pane is set up)
I don't expect to ever have more than 100 entries in my database. Also, the data I'm pulling is very small...about 10 fields, all text data.
My question is as follows:
If I pull all the data I need in one shot, how can I store it so that each block of data I define (2-3 rows are what I need in the preview pane) is "cached" and I can access that given block at will so I can display it upon clicking its corresponding list entry?
Basically, this is about the same as clicking an email in a web-browser and having the rest of the message show up in a preview pane.
Thanks.
nb: the fact that I'm using a preview pane or a list is irrelevant. Just describing what I'm doing.
If I understand correctly, you would like to create a simple page, where several details are hidden until you click on different buttons. If you would like to do this in a "cached" way, you can try the following:
Fetch the complete data so that everything (with details) ends up in the result HTML. Everything: I mean, the parts which should be visible at all times and also the details which should be visible only after pressing a button.
Now, to the design. You will have to write CSS code, which will hide the details. (Of course, for that, you will have to create HTML in step 1 which will let you target the details via CSS classes, for example.) You will also have to figure out how to create buttons.
The most complicated part is to bind the buttons to Javascript actions, which will perform showing the hidden details. You can control all CSS properties from Javascript, so for example you can alter the position, the size, the text color etc. of a <div> dynamically.
Most people nowadays use jQuery for tasks like the one in step 3, or even software libraries built on the top of jQuery. That could help a lot if you're just starting out with tasks like this one. On the jQuery site, you will find a great place to start, called the jQuery Learning Center.
Edit: I've created a very basic fiddle to let you test the JS part of my concept, see it here: http://jsfiddle.net/eL9mj/22/

Trying to add websites to localstorage in chrome extension options page

I want to be able to add websites to a chrome extension options page. So I have a text box with a "save" button and I want to be able to save multiple websites with the ability to edit or remove them later. Like this:
Enter URL: |_________| |_save_|
Edit Remove - www.google.com
Edit Remove - www.msn.com
Edit Remove - www.yahoo.com
Once you enter a website and click save, it will add it to the list of websites already there. I've been trying to scavenge the internet to try to figure out how to accomplish this, but I just don't know enough about it to complete it.
I'd recommend chrome.storage instead of localStorage: http://developer.chrome.com/extensions/storage.html
It's fantastic. You can even choose to store data online in your Google profile (100KB max). Otherwise offline (100MB max, I think).
API is super simple too:
chrome.storage.local.get('websites', function(items) {
console.log('websites:', items.websites);
});
Unlike localStorage, it's async, so you'll be using callbacks. But it's lightning fast, so the UI won't notice.
What I'd do is not keep a virtual record of your storage, but keep it in HTML and read from/write to that as necessary:
btnAdd adds a new LI to the list and then saves the list
btnEdit fills the textfield and removes the LI from the list (no save) (saving via btnAdd)
btnDelete removes the LI from the list and saves the list
save = get items from list as array and save to storage
init = load items from storage and fill list
http://jsfiddle.net/rudiedirkx/Zbpmx/
I'm assuming jQuery since it's popular. It's not necessary of course.
If you're having problems with this already, a Chrome extension will be insanely difficult.

Fill and add select options and sync with database

I'm very new with JavaScript and I'm struggling to implement something which I don't think should be very complicated.
What I want to do is:
form is open in browser with a drop-down list of records in a database
if the desired option is not in the list, the user can click on a link next to it to add a new entry to the database
this will open a new window with an additional form for this entry
on clicking submit the processing script will run to insert this information into the database
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
Maybe that last thing with the list refreshing is quite complicated (unless the list only in fact loads from the db on click?) but everything else should be simple enough, I think. I've tried all sorts of things but nothing that's got close enough to working to be worth posting here.
Could someone please give me some sort of idea of the sort of functions I should be using and roughly how to implement them? I don't necessarily need precise code, just a framework to work from. (I'll learn more in that case anyway.)
ETA: I should add that I've been trying to work with window.open() and window.close(). I don't even really know if this is the best method?
No, that's not(at least relatively) complicated. What you'll need is jQuery and jQuery UI(these frameworks are just suggestions, you may chose any other if you like) to achieve that. So...
form is open in browser with a drop-down list of records in a database
This part is easy, just a simple html form with a select tag and a add link/button on it. You will need a JavaScript function to refresh the select options from database. For that I suggest this or this -there are many others on the web- post.
if the desired option is not in the list, the user can click on a link
next to it to add a new entry to the database
this will open a new window with an additional form for this entry
The easy way to do this is using jQuery UI Dialog Widget to open the popup with the new form.
on clicking submit the processing script will run to insert this information into the database
On that form you'll have to use jQuery Ajax to send data to database through your server language(PHP, ASP.Net, JSP, whatever...). Some examples here and here.
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
So when data processing was complete, you call the refresh select function that you created before and close the dialog on the ajax success callback. Example here.
And this is it. Now it's up to you. Hope it helps.

Categories

Resources