Forum
Log In
Home
Topic RSS
20:42
28/08/2014
Offline
I am working on a billing application (LAMP). I can have multiple businesses that have multiple services. I have a grid displaying my businesses; when I click a business, it displays the services purchased by this business.
The way I have it working currently, the billing people enter services in fields at the top of the services grid, click "Create Service", then the service is saved to the db. When the billing people want to edit a service, they click an edit button at the end of the row, the information for that service is repopulated into the fields at the top of the services grid, and the "Create Service" button is changed into an "Update Service" button. When clicked, the service is updated in the db.
The billing people now want to be able to edit these services in-line, instead of having it repopulate the input fields. I did some Googling and found jqGrid would work for this. After playing with jqGrid for a while, I have come to the conclusion that I might not be able to do what I want with jqGrid after all. Below is a sample of my application, and an explanation follows.
Â
<html>
   <head>
      <title>Cleaning Services and Fees</title>
   </head>
   <body>
      <div class="module" id="serviceModule">
         <h2>Cleaning Services and Fees</h2>
         <form name="serviceForm" id="serviceForm" method="POST" action="./eventHandler.php">
            <table id="serviceTable" border="1">
               <thead>
                  <tr>
                     <th nowrap>
                        <label for="serviceLocation"> Service Location </label><br>
                        <select id="serviceLocation" name="serviceLocation" onChange="frequencyHandler(this.value);">
                           <option selected disabled>Choose Service Location</option>
                           <option value="13">Large Building</option>
                           <option value="13">Medium Building</option>
                           <option value="13">Small Building</option>
                           <option value="4">Medical Facility</option>
                           <option value="11">Residential</option>
                           <option value="12">Other</option>
                        </select>
                     </th>
                     <th nowrap>
                        <label for="frequency"> Frequency </label><br>
                        <select id="frequency" name="frequency" onChange="feeUnitAmountHandler(this.value);">
                           <option selected disabled>↠Choose Location First</option>
                        </select>
                     </th>
                     <th nowrap>
                        <label> Fee Unit Amount </label><br>
                        <input id="feeUnitAmount" name="feeUnitAmount" type="text" size="7" disabled value="">
                     </th>
                     <th nowrap>
                        <label for="quantity"> Quantity </label><br>
                        <input id="quantity" name="quantity" type="text" maxlength="5" size="6" value="">
                     </th>
                     <th nowrap>
                        <label for="amountCharged"> Amount Charged </label><br>
                        <input id="amountCharged" name="amountCharged" type="text" size="13" value="">
                     </th>
                     <th nowrap>
                        <label for="invoiceDate"> Invoice Date </label><br>
                        <input id="invoiceDate" name="invoiceDate" type="text" maxlength="10" size="11" class="datepicker" value="">
                     </th>
                     <th nowrap>
                        <label for="invoiceNumber"> Invoice Number </label><br>
                        <input id="invoiceNumber" name="invoiceNumber" size="10" class="uppercase" type="text" value="">
                     </th>
                     <th nowrap>
                        <label for="paid"> Paid </label><br>
                        <input id="paid" name="paid" type="checkbox" value="">
                     </th>
                     <th>
                        Note
                     </th>
                     <th colspan="2" nowrap>
                        <input type="hidden" name="token" value="3fa8ff35afb1cfbe3406ad2196e72ba2" />
                        <input type="hidden" name="action" value="create" />
                        <input type="hidden" name="type" value="service" />
                        <button class="create" type="submit">Create Service</button>
                     </th>
                     <th> </th>
                  </tr>
               </thead>
               <tbody id="servicespace">
                  <tr id="serviceDataRow0" class="dataRow"><td class="text">Residential</td><td class="text">weekly</td><td class="numeric">$50.00</td><td>4</td><td class="numeric">$200.00</td><td>11/06/2013</td><td>173784</td><td><span class="smallMark">✓</span></td><td class="noteEditor" id="noteEditor5517" title="Edit notes for service: Residential" onClick="openNotesEditingWindow('42','5517');"><img src="./images/note.gif" width="14" height="14" border="0" alt="Note" border="0" /></td><td><a href="./cf.php?action=edit&id=5517&type=service"><img src="./images/edit.gif" width="14" height="14" border="0" alt="Edit" title=" Edit Service: Residential" /></a></td><td><a href="./eventHandler.php?token=3fa8ff35afb1cfbe3406ad2196e72ba2&action=delete&id=5517&type=service"><img src="./images/delete.gif" width="14" height="14" border="0" alt="Delete" title="Delete Service: Residential" onClick="return confirmDelete();" /></a></td><td><input type="checkbox" id="5517" value="5517" title="Select this Service for copying." /></td></tr>
                  <tr id="serviceDataRow1" class="shadedDataRow"><td class="text">Residential</td><td class="text">weekly</td><td class="numeric">$50.00</td><td>4</td><td class="numeric">$200.00</td><td>11/06/2013</td><td>173784</td><td><span class="smallMark">✓</span></td><td class="noteEditor" id="noteEditor5518" title="Edit notes for service: Residential" onClick="openNotesEditingWindow('42','5518');"><img src="./images/note.gif" width="14" height="14" border="0" alt="Note" border="0" /></td><td><a href="./cf.php?action=edit&id=5518&type=service"><img src="./images/edit.gif" width="14" height="14" border="0" alt="Edit" title=" Edit Service: Residential" /></a></td><td><a href="./eventHandler.php?token=3fa8ff35afb1cfbe3406ad2196e72ba2&action=delete&id=5518&type=service"><img src="./images/delete.gif" width="14" height="14" border="0" alt="Delete" title="Delete Service: Residential" onClick="return confirmDelete();" /></a></td><td><input type="checkbox" id="5518" value="5518" title="Select this Service for copying." /></td></tr>
                  <tr id="serviceDataRow2" class="dataRow"><td class="text">Medium Building</td><td class="text">monthly</td><td class="numeric">$500.00</td><td>1</td><td class="numeric">$500.00</td><td>11/06/2013</td><td>173784</td><td><span class="smallMark">✓</span></td><td class="noteEditor" id="noteEditor5519" title="Edit notes for service: Medium Building" onClick="openNotesEditingWindow('42','5519');"><img src="./images/note.gif" width="14" height="14" border="0" alt="Note" border="0" /></td><td><a href="./cf.php?action=edit&id=5519&type=service"><img src="./images/edit.gif" width="14" height="14" border="0" alt="Edit" title=" Edit Service: Medium Building" /></a></td><td><a href="./eventHandler.php?token=3fa8ff35afb1cfbe3406ad2196e72ba2&action=delete&id=5519&type=service"><img src="./images/delete.gif" width="14" height="14" border="0" alt="Delete" title="Delete Service: Medium Building" onClick="return confirmDelete();" /></a></td><td><input type="checkbox" id="5519" value="5519" title="Select this Service for copying." /></td></tr>
               </tbody>
               <tfoot>
                  <tr>
                     <td colspan="3"> </td><td colspan="2" id="TotalAmountCharged">Total Charged: $900.00</td><td colspan="6"> </td><td nowrap><button type="button" class="filterButton" onClick="return ReplicateServices('3fa8ff35afb1cfbe3406ad2196e72ba2');" title="Copy selected Services to new Business"><img src="./images/copy.gif" width="14" height="14" alt="++" /> copy services </button></td>
                  </tr>
               </tfoot>
            </table> <!-- end service table -->
         </form> <!-- end services form -->
         <div id="numberOfServicesForThisTarget">3 Result(s)</div>
      </div> <!-- end service module -->
   </body>
</html>
Â
When a person chooses a Service, I use AJAX to grab the frequency (daily,weekly,monthly) from the db and populate the Frequency of the Service. When a person chooses the Frequency, the Fee Unit Amount is then populated. All of this is doable with jqGrid, but there are two functions within each row that I do not know if I can accomplish with jqGrid.
The first function is the ability top copy one to N services from one business to another (to make it easier for the billing people). This is accomplished by clicking boxes at the end of the row of services, then clicking a similar box next to the new business, then clicking the "copy services" button. Behind the scenes, AJAX executes a stored procedure that copies all selected services to the new business.
The second function is a "Notes" editing function. When a user clicks the Notes icon, a new window opens where they can edit the note, then click to save.
So, given my code and an explanation of what I need to accomplish, is what I am wanting to accomplish "doable" by jqGrid? Specifically, since jqGrid doesn't use a standard HTML form, I am not sure how I can get my custom "buttons" (e.g., notes, copy services) into the jqGrid generated table/form.
Most Users Ever Online: 715
Currently Online:
30 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
