Updating GridView without postback using javascript - javascript

I have a gridview and a dropdownlist on my page.
The gridview is binded through code behind with some columns. Among these price is also a column.
My scenario is to change the price field based on the dropdown criteria.
The price column consists of values in "lakhs", and i need to change them as crores or usd or some other format as per dropdown.
I don't want to go for postbacks. I want these to be implemented using javascript.
(These changes are for user conversion. They need not to be saved on database)
Thanks in advance
Madhu

You have two options. If you don't want to go for any response from the server (i.e. you don't want to make an AJAX call), you could populate a hidden field with a list of comma-delimited values that correspond to your dropdown values. It's an ugly approach, but it would work.
The other option is to make an AJAX call to a web method on the server (or possibly a financial service like Yahoo! Finance). When your dropdown selected value changes, that event fires a call to the server.
If you were able to indicate what platform you're using (PHP, .Net or other), someone will likely be able to provide more relevant examples and code samples.

Since the grid is rendered as an HTML Table, you can actually manipulate anything on the client.
I would pickup jQuery for the task

Related

updating values to server in AG-grid

Here I'm Using .net Core in Server Side and plain vanilla JavaScript for UI
AG grid is getting data from the SQL view thru ASP.net Core application.
in the Grid all the cells are editable. now i want to have one button on top of the Grid. if the user clicks that button only changed data needs to save in DB. is there any option to get oly dirt values or pls advice me how to achieve the above use-case.
Thanks in Advance.
I think there isn't such a complex solution implemented in ag-grid out of a box. But you can do it yourself with help of the events cellValueChange and/or rowValueChange (only if you are using editType = 'fullRow').
I suggest to use the scenario editType = 'fullRow'. So whenever the rowValueChange fires, store the new data of that row in some data array (of course, if a user edits the same row the second time, you need to overwrite the previous stored row value). And when the button is pressed, you pushed to the server only data of that changed rows you've collected.

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?

Sort and retrieve data with drop down menus in php

I have two drop down menus on my webpage. One is a course list and the other is a student list. What I want to do is, when a selection is made in the course menu it will update the student menu to only list students in that course.
All the course and student data is saved in a MySQL database. The SQL statements to retrieve the results I want are not a problem. I have those figured out. The problem is that I don't know how to get one drop down menu to update the other without the use of a submit button. Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
I've looked through several similar questions, but a lot of them end up resetting the first menu when the second is updated. I need to print both the selected course and student on the page at the end.
Is this something that can be done with PHP, or would Javascript be more preferable? If someone could point em in the right direction, that would be much appreciated.
Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
Yes. The buzz-word for this is AJAX.
You will end up using both JavaScript and PHP to do this. The actual implementation is quite involved, so I will list the basic steps for you.
(JavaScript) Bind the change event for the course drop down menu.
(JavaScript) When that event is fired, capture the selected course and fire an XMLHttpRequest off to your server along with the selected course.
(PHP) Capture the selected course, and run the SQL statement to fetch your students.
(PHP) Convert the student list to a text format (JSON, XML, delimited-text, etc.) to send back to the browser (using echo, print, etc).
(JavaScript) Populate the student drop down menu.
The general approach to this is to use jQuery to add a hook to your drop-down selector and trigger an AJAX load on another section of the page, populating that with data retrieved either as an HTML fragment (easy) or JSON data that's turned into one (harder).
A really quick and dirty version is to grab a portion of a page and re-populate the current document with it using $.load():
$('#select1').on('change', function() {
$('#select2').load('select.php #select2', 'select1=' + $(this).val())
})
That's the rough idea: When your first selection box changes, load the select.php page, or whatever you're using, and add on the parameter select=N where N is the selected value. It then rips out the #select2 section and replaces it.

JQGrid update multiple rows at once then save

I have a requirement to be able to update 'n' number of rows in one go.
I have acheived this by adding a SELECT into the column header of 1 particular column. This will give the user the option of picking a Yes/No option and making all subsuequent rows in said particular column in the grid view, the choice of Yes or No dependant on which the user chooses.
I have successfuly managed to do this. My problem is now sending the "New" updated row data to the server.
I have tried saveRow() with the row id of each row in the view. This does not do anything. No AJAX calls are made.
Can someone point me in the right direction?
Thanks
I write the answer only because you asked to point you in the right direction. Sending of the data from the local grid to the server is not complex (see here for example). The main problem is the case is concurrency.
In my opinion any web application should work not only as one user application. I wrote multiple answers (see here or here for example) where I described my opinion that one should better update modified rows directly after modification because of possible concurrency errors. The later the update take place the higher is the possibility that the same rows were already modified by another user from another computer. So I would recommend you to use standard saveRow behavior and send modified data directly after the modification.
I have solved this by simply making an AJAX call myself to the file that is declared in JQGrid. Passing all relevant data everything worked how I needed it to

how to populate the state and city in my project without using AJAX and refresh page?

I am looking a sample for the functionality where there are 2 drop downs. One is 1 is State/Province and the 2rd is City. Based on the state drop down selection, city drop down values should be populated.
I need sample database design also....
Could anyone please help me out on getting a sample for this.
Regards
padman..
With neither Ajax nor refreshes? Bad idea, unless you have a very limited number of state/city combinations--otherwise the HTML/JavaScript you send will be huge.
Otherwise it's a simple dependent select, which is searchable on the web. The nutshell version is that when your state changes, you take the value of the selected state option, use it to look up cities in a map of state id => cities, and use the cities collection to populate the second select box.
The state/cities JavaScript structure is created on the server side using whatever template mechanism the rest of the app uses (I assume JSP or Velocity since you're using Struts 1).
DB DB design for what? States and cities? Have a table of states. Have a table of cities with a state id foreign key.

Categories

Resources