adding dynamic data to mysql with php j query - javascript

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.

Related

JS rest api update html

I'm making a simple JS which consumes a Rest api. Basically the user types in a city, clicks submit and based on that JS generates a GET call. Then using jQuery the script inserts the received data into HTML document. So every time a user clicks submit I want the contents of ny HTML to be filled with new data from te API (without refreshing the page of course). My plan was to structure the script in a way that firstly JS deletes all the prievious content from HTML (run .empty() on each element) and afterwards add new data. Is there an easier way of doing that?

MVC 4 making a view (only single div on the particular cshtml webpage not whole webpage) dynamically changed according to the change in Database

let, I have a view in (.cshtml file) and this view's has a model which corresponds to my database class or table. In the view, I have many more different div or section.Let, inside one of the div or section I have some code which fetches data from my database table. Now suppose, I have added/changed some data in that database. I don't want to reload the webpage(view) to view the changes; however, I just want to see the changes dynamically in that particular div which fetches data from database without reloading the full webpage. I would be grateful if you provide me some solutions or redirect me to some good tutorials regarding this topic.

Make edits on dynamically loaded data using jQuery and PHP

I have a dropdown, on its change I need to load the contents related to it on the same page. Which I did using jQuery. Now the question is how do I make edits on this data and store it on my database. If I am wrong in using jQuery for loading my data then what else should I use? I am using PHP as my server side scripting language.
More detail -
Simply taking there a list of details I need to display as per the country you select, which I am displaying currently in a nice grid(textboxes)!
Now the data from this grid should be copied to another textbox on "EDIT" button click from where I edit them and store it in my database. I am not able to make the values copy into a another textbox
You could do this:
Display the data in some form of editable div, textarea, or other element.
Make a hidden field somewhere and when you display the data
Set the row id from your database to the hidden field
On your change event, grab the id from the hidden field along with the edited data.
Using Jquery/ajax, send that data to a php page that will save thee data to your database using the passed in id.
You could do that.
However, if it were me (and if you're not married to your current databse / mySQL etc..), I would use parse.com. The service is free up to a significant amount of usage (which Ive never come close to) and it really simplifies everything. See the below post if you're interested in that approach:
Save and retrieve user input from database with javascript?

Using Javascript with Asp.net for ListBox

I want to use ClientSide Javascript for listbox, it should take values from database table when the page is loaded first time OR load the specific table in javascript,
Right Now, all the values are coming from database, if I select "StandardM1(CA)"
it brings all the values from "food_menu" table.
I want to do the the same thing with client-side javascript in order to save time and server requests, so that the application runs faster.
Can some one please guide me?
Faheem use array in it and try to do the coding right on the save button. its the save button that is creating problems

Cloning an existing blueimp file upload table

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.

Categories

Resources