I need to manipulate my Mysql data on:
I populate Mysql DB content on HTML table and every row have "EDIT" and "DELETE" buttons...(HTML "a" tags buttons)
When I click on "Edit" button a pure CSS3 Modal Popup is open, where I need to Edit a record on the row,
If I click on "Delete" button a pure CSS3 Modal Popup is open for delete record confirmation if the answer is "YES" proceed to delete the Record if the answer is "NO" should back to the parent page...
Populate a list of selected records is working. CSS3 Modal Popup is working...
The question is how can I send arguments to the Modal Popup to manipulate the data?
Could someone help with this.
Thanks.
The ways I would do this in no particular order:
Separate modals for every item on the table. Could be cumbersome, and is definitely not efficient, but would get the job done without using Javascript.
Javascript - Have a data-id and data-table attribute in the button. When clicked, populate the modal with Javascript via AJAX.
Javascript - Store table data in JSON array. Use above attributes to access specific elements of the JSON table object.
Javascript - Store the JSON object directly in the data attribute if possible and load up the modal when clicked.
Have a hidden <div> with all the content, and when the button is clicked, transfer the HTML to the modal.
Really there are many other ways to get it done. Pick one that looks easy, efficient, and safe, and give it a go. Post back here when you get stuck and we will be glad to help you.
Related
I am doing a signup form with a few steps, made with angular material tabs. I have 5 tabs each containing a few inputs that the user should fill in. I also have 2 buttons below the tabs, one to get to the next tab and one button to get to the previous tab. I want to disable the upcoming tabs and also disable the button that takes the user to the next tab until the user has filled in the the tab he is on properly. I want the user to be able to go back and change the information that is already filled in on the previous tabs, and when all the tabs are filled in properly a send button is shown. So, that's basic functions for a multi step signup form.
I have managed to do the basic functions for the buttons and the tabs with ng-disabled and ng-hide combined with changing the value on the variable tabNr in my controller, like hiding the previous-button on the first tab and hiding the next-button on the last tab, and that works fine.
When it comes to hide the next-button based on if the form is filled in its a bit more tricky. I am able to disable the next tab by validating the form on the previous tab like this: ng-disabled="!tab1Form.$valid", so that's hard coded and works fine.
The previous- and next-buttons, though, are the same for all tabs and that is the tricky part, so I can't just disable the button if a form isn't valid because the button does not know which tab that is active. I have tried to make a function in the controller but then the problem is that the valid-variable is just a thing in html and I cant evaluate it in the controller.. As far as I have tried and have understood.
So this is the next-button:
<md-button ng-click="FormCtrl.tabNext()" ng-disabled="FormCtrl.tabNr >= 5 || !tab{{FormCtrl.tabNr}}Form.$valid" ng-hide="FormCtrl.tabNr > 4">Next</md-button>
Each tab has this, with it's own number:
<form name="tab1Form" novalidate>
What I've tried is to change the tab, that should trigger the disable, by using angular:
ng-disabled="!tab{{FormCtrl.tabNr}}Form.$valid"
The browser seems to change the number, and it works for the first tab, but on the rest of the tabs it does not disable the button even though it should, like if the browser does not evaluate the variable properly. I hoped that it should work because I cant think of another way of doing it with these variables...
Does this way of using angular simply not work or am I doing anything wrong? Does anyone have a solution I could use?
In your controller
function Controller($scope){
var vm = this;
vm.form = $scope['tab' + anyNumber + 'Form'];
}
then in your html
ng-disabled="!FormCtrl.form.$valid"
I've build a JSP page that contains a form with two multiple select objects and several buttons to send the elements from one to other. When the user has finished choosing the elements, clicks on a button to submit the form.
The form data is encapsulated through commandName="mainForm" in the JSP to a java POJO class MainForm that represents that form.
The problem here is that the POSTed elements from the multiselect objects are only those who remain "selected" (in blue) when the user submits the form. Is there any clean way (without JQuery) to send all the options?
Thanks in advance!!
You should write a JS code on "onsubmit" event of form to programatically select all the options of multiselect. (Thus, making all options blue)
Like in jQuery,
$('#form #selectId option').attr('selected', 'selected');
I don't see better way of doing it.
I have an application where in a signed in user searches a database and is displayed a table of results. These results are basically listings of events. I give the user then, the privilege to "keep" or "discard" any event (using radio buttons beside each event).
Now however, I wish to implement a functionality whereby, the user at the end can click just one "update" button and all changes are affected (since keeping one button for each record will be very user unfriendly). That is, I am looking equivalently to submit multiple forms with just one submit/update button.
Is this possible ?
You need to use javascript, I suggest you using JQuery. Using AJAX you need to submit each form - this way page will not be redirected once you submit a form!
Then, within each forms assign individual IDs for each form. Then, assign your submit button an id for example mySubmit. Up next, add following code:
$('#mySubmit').click(function(){
// submit form1 by ajax...
// submit form2 by ajax...
});
You may see jQuery's http://api.jquery.com/jQuery.post/ for further information on how to submit a form using ajax.
As long as all of the radio buttons and submit button are part of the same form, you don't need to worry about submitting multiple forms because there won't be any. You can have multiple submit buttons in a single form, you can give them different values to know which button was clicked.
If you don't want to use jQuery then use javascript to form a list of data separated by say ~ character and set this string to some hidden field and submit using document.formx.submit()
You will need to parse the string on server side to get the data in correct format.
I have a web page consisting of a dropdown menu. What i want is the contents of other dropdown menus present in the page must change according to what has been selected in the first dropdown box. For example if a dropdown consists of Degree as its element. If i select Degree element then another dropdown must show only degree courses. This must happen automatically without clicking any button. How can i achieve this?
I would make this a comment, but I do not have commenting abilities. You are going to want to use $.post with jquery and ajax to accomplish this: http://api.jquery.com/jQuery.post/ . Ajax with JQuery is not difficult to do.
You will want to use the onchange event of the first drop down to use a jquery ajax $.post call to post to the server, passing the selection from the drop down as a parameter. The page that it post's to should us GET to get the selected attribute from the drop down, and then retrieve ( from the database or where ever) the options that go into the second drop down, based on the parameter. The code should be written out to the page. The jquery ajax call has a way to get the response and let you define a custom function to be run once the post returns. The return should be what you had written out to the page, and then you can just update the second drop down list with the returned data inside this function.
I hope this helps!
HTML form has some text boxes and a drop down box.
Drop down has huge values, and takes lot of time to fetch from database.
So I want to load the page first and while the user fills the form (text boxes) I want to load the drop down box (without his knowledge :-) ).
But without any event trigger, how do I make call to database again ?
I am using JSF with RichFaces, Servlet.
The following code is not working
<h:selectOneMenu value="#{obj.selectedValue}">
<f:selectItems value="#{obj.allValues}" />
<a4j:support selfRendered="true" action="#{bean.action}"/>
</h:selectOneMenu>
Thanks,
+1 for using Ajax - but if you have a very large number of values,t hen you might want to consider using an auto completion dropdown - where the the user starts typing what they need and after they have typed a few characters, you kick off your ajax reqeuest and just load those requests that match.
have a look at "google suggest" if you want to see this in action
-Ace
As already mentioned you can use AJAX to load the dropdown items asynchronously, but I would suggest redesigning the form so that the huge dropdown is not required. Perhaps let the user search for the correct value on a previous or subsequent screen? Long dropdowns are not easy to use as they require lots of scrolling and it can be hard to find the correct value on a large list.
At the bottom of your page put the following:
<a4j:jsFunction name="yourJsFunction" action="#{bean.fetchSelectItems}"
reRender="yourDropdown" />
window.onload = yourJsFunction();
You will have to use AJAX. When the page loads display a empty select box. Then write some JavaScript that will call some URL on your server that will return the options for the select box. And when you get that just populate the select box with those values.
Be advised that your form will be useless to those without JavaScript.