www/js/inv_suppliers.js

changeset 488
77f1617b6994
parent 208
578c78abf058
child 528
202272a28052
equal deleted inserted replaced
487:06df1320327c 488:77f1617b6994
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 });
100 cache: false, 102 cache: false,
101 data: data, 103 data: data,
102 type: "POST", 104 type: "POST",
103 success: function (data, status, xhr) { 105 success: function (data, status, xhr) {
104 commit(true); 106 commit(true);
107 location.reload( true );
105 }, 108 },
106 error: function(jqXHR, textStatus, errorThrown) { 109 error: function(jqXHR, textStatus, errorThrown) {
107 commit(false); 110 commit(false);
108 } 111 }
109 }); 112 });
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

mercurial