43 } |
43 } |
44 |
44 |
45 |
45 |
46 |
46 |
47 $(document).ready(function () { |
47 $(document).ready(function () { |
48 var url = "includes/db_inventory_suppliers.php"; |
48 |
49 // tooltips |
49 // tooltips |
50 $("#name").jqxTooltip({ content: 'De naam van de leverancier.' }); |
50 $("#name").jqxTooltip({ content: 'De naam van de leverancier.' }); |
51 $("#address").jqxTooltip({ content: 'Het adres en huisnummer.' }); |
51 $("#address").jqxTooltip({ content: 'Het adres en huisnummer.' }); |
52 $("#city").jqxTooltip({ content: 'De woonplaats of gemeente.' }); |
52 $("#city").jqxTooltip({ content: 'De woonplaats of gemeente.' }); |
53 $("#zip").jqxTooltip({ content: 'De postcode.' }); |
53 $("#zip").jqxTooltip({ content: 'De postcode.' }); |
54 $("#country").jqxTooltip({ content: 'Het land.' }); |
54 $("#country").jqxTooltip({ content: 'Het land.' }); |
55 $("#website").jqxTooltip({ content: 'Het website adres.' }); |
55 $("#website").jqxTooltip({ content: 'Het website adres.' }); |
56 $("#email").jqxTooltip({ content: 'Het email adres.' }); |
56 $("#email").jqxTooltip({ content: 'Het email adres.' }); |
57 $("#phone").jqxTooltip({ content: 'Het telefoon nummer.' }); |
57 $("#phone").jqxTooltip({ content: 'Het telefoon nummer.' }); |
58 $("#notes").jqxTooltip({ content: 'Opmerkingen over deze leverancier.' }); |
58 $("#notes").jqxTooltip({ content: 'Opmerkingen over deze leverancier.' }); |
|
59 |
|
60 var url = 'includes/db_inventory_suppliers.php', |
59 // prepare the data |
61 // prepare the data |
60 var source = { |
62 source = { |
61 datatype: "json", |
63 datatype: "json", |
62 cache: false, |
64 cache: false, |
63 datafields: [ |
65 datafields: [ |
64 { name: 'record', type: 'number' }, |
66 { name: 'record', type: 'number' }, |
65 { name: 'name', type: 'string' }, |
67 { name: 'name', type: 'string' }, |
82 url: url, |
84 url: url, |
83 cache: false, |
85 cache: false, |
84 data: data, |
86 data: data, |
85 type: "POST", |
87 type: "POST", |
86 success: function (data, status, xhr) { |
88 success: function (data, status, xhr) { |
87 // delete command is executed. |
|
88 commit(true); |
89 commit(true); |
|
90 location.reload( true ); |
89 }, |
91 }, |
90 error: function (jqXHR, textStatus, errorThrown) { |
92 error: function (jqXHR, textStatus, errorThrown) { |
91 commit(false); |
93 commit(false); |
92 } |
94 } |
93 }); |
95 }); |
115 url: url, |
118 url: url, |
116 cache: false, |
119 cache: false, |
117 data: data, |
120 data: data, |
118 type: "POST", |
121 type: "POST", |
119 success: function (data, status, xhr) { |
122 success: function (data, status, xhr) { |
120 // update command is executed. |
|
121 commit(true); |
123 commit(true); |
|
124 location.reload( true ); |
122 }, |
125 }, |
123 error: function(jqXHR, textStatus, errorThrown) { |
126 error: function(jqXHR, textStatus, errorThrown) { |
124 commit(false); |
127 commit(false); |
125 } |
128 } |
126 }); |
129 }); |
127 } |
130 } |
128 }; |
131 }, |
|
132 dataAdapter = new $.jqx.dataAdapter(source), |
|
133 editrow = -1; |
|
134 |
129 // initialize the input fields. |
135 // initialize the input fields. |
130 $("#name").jqxInput({ theme: theme, width: 640, height: 23 }); |
136 $("#name").jqxInput({ theme: theme, width: 640, height: 23 }); |
131 $("#address").jqxInput({ theme: theme, width: 350, height: 23 }); |
137 $("#address").jqxInput({ theme: theme, width: 350, height: 23 }); |
132 $("#zip").jqxInput({ theme: theme, width: 120, height: 23 }); |
138 $("#zip").jqxInput({ theme: theme, width: 120, height: 23 }); |
133 $("#city").jqxInput({ theme: theme, width: 350, height: 23 }); |
139 $("#city").jqxInput({ theme: theme, width: 350, height: 23 }); |
135 $("#website").jqxInput({ theme: theme, width: 640, height: 23 }); |
141 $("#website").jqxInput({ theme: theme, width: 640, height: 23 }); |
136 $("#email").jqxInput({ theme: theme, width: 640, height: 23 }); |
142 $("#email").jqxInput({ theme: theme, width: 640, height: 23 }); |
137 $("#phone").jqxInput({ theme: theme, width: 175, height: 23 }); |
143 $("#phone").jqxInput({ theme: theme, width: 175, height: 23 }); |
138 $("#notes").jqxInput({ theme: theme, width: 800, height: 100 }); |
144 $("#notes").jqxInput({ theme: theme, width: 800, height: 100 }); |
139 |
145 |
140 var dataAdapter = new $.jqx.dataAdapter(source); |
|
141 var editrow = -1; |
|
142 // initialize jqxGrid |
146 // initialize jqxGrid |
143 $("#jqxgrid").jqxGrid({ |
147 $("#jqxgrid").jqxGrid({ |
144 width: 1280, |
148 width: 1280, |
145 height: 630, |
149 height: 630, |
146 source: dataAdapter, |
150 source: dataAdapter, |
147 theme: theme, |
151 theme: theme, |
148 showstatusbar: true, |
152 showstatusbar: true, |
149 renderstatusbar: function (statusbar) { |
153 renderstatusbar: function (statusbar) { |
150 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
154 var addButton, container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
151 var addButton = $("<div style='float: right; margin-right: 15px;'><img style='position: relative; margin-top: 2px;' src='images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Nieuw</span></div>"); |
155 addButton = $("<div style='float: right; margin-right: 15px;'><img style='position: relative; margin-top: 2px;' src='images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Nieuw</span></div>"); |
152 container.append(addButton); |
156 container.append(addButton); |
153 statusbar.append(container); |
157 statusbar.append(container); |
154 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); |
158 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); |
155 // add new row. |
159 // add new row. |
156 addButton.click(function (event) { |
160 addButton.click(function (event) { |
173 { text: 'Leverancier naam', datafield: 'name' }, |
177 { text: 'Leverancier naam', datafield: 'name' }, |
174 { text: 'Adres', datafield: 'address', width: 300 }, |
178 { text: 'Adres', datafield: 'address', width: 300 }, |
175 { text: 'Plaats', datafield: 'city', width: 250 }, |
179 { text: 'Plaats', datafield: 'city', width: 250 }, |
176 { text: 'Land', datafield: 'country', width: 200 }, |
180 { text: 'Land', datafield: 'country', width: 200 }, |
177 { text: 'Telefoon', datafield: 'phone', width: 175 }, |
181 { text: 'Telefoon', datafield: 'phone', width: 175 }, |
178 { text: 'Wijzig', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function () { |
182 { text: 'Wijzig', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', |
179 return "Wijzig"; |
183 cellsrenderer: function () { |
|
184 return "Wijzig"; |
180 }, buttonclick: function (row) { |
185 }, buttonclick: function (row) { |
181 // open the popup window when the user clicks a button. |
186 // open the popup window when the user clicks a button. |
182 editrow = row; |
187 editrow = row; |
183 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
188 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
184 // get the clicked row's data and initialize the input fields. |
189 // get the clicked row's data and initialize the input fields. |
226 }); |
231 }); |
227 $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme }); |
232 $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme }); |
228 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); |
233 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); |
229 // update the edited row when the user clicks the 'Save' button. |
234 // update the edited row when the user clicks the 'Save' button. |
230 $("#Save").click(function () { |
235 $("#Save").click(function () { |
231 var rowID = -1; |
236 var row, rowID = -1; |
232 if (editrow >= 0) { |
237 if (editrow >= 0) { |
233 rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
238 rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
234 } |
239 } |
235 var row = { |
240 row = { |
236 record: rowID, |
241 record: rowID, |
237 name: $("#name").val(), |
242 name: $("#name").val(), |
238 address: $("#address").val(), |
243 address: $("#address").val(), |
239 city: $("#city").val(), |
244 city: $("#city").val(), |
240 zip: $("#zip").val(), |
245 zip: $("#zip").val(), |
248 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
253 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
249 } else { |
254 } else { |
250 $('#jqxgrid').jqxGrid('addrow', null, row); |
255 $('#jqxgrid').jqxGrid('addrow', null, row); |
251 } |
256 } |
252 $("#popupWindow").jqxWindow('hide'); |
257 $("#popupWindow").jqxWindow('hide'); |
253 location.reload( true ); // reload ourself. |
|
254 }); |
258 }); |
255 createDelElements(); |
259 createDelElements(); |
256 }); |
260 }); |
257 |
261 |