Я задал много вопросов, связанных с этим, но до сих пор не нашел хорошего ответа. Я получаю много предложений и вопросов, но я не очень хорошо разбираюсь в Javascript или Ajax, поэтому мне нужна ваша помощь, а не только предложения.
У меня есть таблица, заполненная данными из базы данных. У него есть несколько кнопок … добавьте строку, сохраните таблицу, отредактируйте и деактивируйте. Было бы неплохо иметь обновление базы данных после нажатия каждой кнопки, но на данный момент мне действительно нужно, чтобы все обновлялось после нажатия кнопки «Сохранить таблицу». Как я могу заставить это случиться. Я знаю, что мне нужно использовать Ajax, но не знаю, как это сделать. Если кто-то сможет взять несколько раз и отправить ответ, который будет потрясающим! Я работал над этим некоторое время, и я мог бы наконец разобраться в этом.
Соединение с БД:
<?php $host="xxxxxxxxxxxxxxxx"; $dbName="xxxxxxx"; $dbUser="xxxx"; $dbPass="xxxxxxxxx"; $dbh = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass); $dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION ); $sql = "SELECT * FROM Stage_Rebate_Master ORDER BY MR_ID ASC"; ?> HTML / PHP:
<div id="dialog-form" title="Add Vendor"> <p class="validateTips">All form fields are required.</p> <form> <fieldset> <label for="mr_name">Vendor</label> <input type="text" name="mr_name" id="mr_name" class="text ui-widget-content ui-corner-all"> <label for="buyer_id">Buyer ID</label> <input type="text" name="buyer_id" id="buyer_id" class="text ui-widget-content ui-corner-all"> <label for="poc_n">POC Name</label> <input type="text" name="poc_n" id="poc_n" class="text ui-widget-content ui-corner-all"> <label for="poc_p">POC Email</label> <input type="text" name="poc_e" id="poc_e" class="text ui-widget-content ui-corner-all"> <label for="poc_p">POC Phone</label> <input type="text" name="poc_p" id="poc_p" class="text ui-widget-content ui-corner-all"> <!-- Allow form submission with keyboard without duplicating the dialog button --> <input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px"> </fieldset> </form> </div> <div id="users-contain" class="ui-widget"> <table id="html_master" class="ui-widget ui-widget-content"> <thead> <tr class="ui-widget-header"> <td>ID</td> <td>Vendor</td> <td>Buyer ID</td> <td>POC Name</td> <td>POC Email</td> <td>POC Phone</td> <td>Edit/Delete</td> </tr> </thead> <tbody> <?php foreach ($dbh->query($sql) as $rows){ ?> <tr> <td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td> <td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td> <td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td> <td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td> <td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td> <td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td> <td><input type="button" class="edit" name="edit" value="Edit"> <input type="button" class="deactivate" name="deactivate" value="Deactivate"></td> </tr> <?php } ?> </tbody> <input type="button" class="create-user" value="Add Row"> <input type="submit" value="Save Table" class="save"> </table> </div> <input type="button" class="create-user" value="Add Row"> <input type="submit" value="Save Table" class="save">
Javascript:
// ----- Deactivate/Activate Row ----- $(document).on("click", "#html_master .deactivate", function () { var $this = $(this); var $tr = $this.closest('tr'); var action = $tr.hasClass('deactivated') ? 'activate' : 'deactivate'; // ------ Confirmation box in order to deactivate/activate row ----- if (confirm('Are you sure you want to ' + action + ' this entry?')) { $tr.toggleClass('deactivated'); $this.val(function (i, t) { return t == 'Deactivate' ? 'Activate' : 'Deactivate'; }); } }); // ----- Edit Row ----- $(document).on("click", "#html_master .edit", function () { var $this = $(this); var tds = $this.closest('tr').find('td').not('.mr_id').filter(function () { return $(this).find('.edit').length === 0; }); if ($this.val() === 'Edit') { $this.val('Save'); tds.prop('contenteditable', true); } else { var isValid = true; var errors = ''; $('#myDialogBox').empty(); // changed from here....... var elements = tds; if (tds.find('input').length > 0) { elements = tds.find('input'); } elements.each(function (index, element) { var type = $(this).attr('class'); var value = (element.tagName == 'INPUT') ? $(this).val() : $(this).text(); // changed from here....... to here // ----- Switch statement that provides validation ----- switch (type) { case "buyer_id": if (!$.isNumeric(value)) { isValid = false; errors += "Please enter a valid Buyer ID\n"; } break; case "poc_n": if (value == value.match(/^[a-zA-Z\s]+$/)) { break; } else { isValid = false; errors += "Please enter a valid Name\n"; } break; case "poc_e": if (value == value.match(/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/)) { break; } else { isValid = false; errors += "Please enter a valid Email\n"; } break; case "poc_p": if (value == value.match('^[0-9 ()+/-]{10,}$')) { break; } else { isValid = false; errors += "Please enter a valid Phone Number\n"; } break; } }) if (isValid) { $this.val('Edit'); tds.prop('contenteditable', false); } else { alert(errors); } } }); // ----- Dialog Box ----- $( function() { var dialog, form, emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/, phoneRegex = /^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$/, mr_name = $( "#mr_name" ), buyer_id = $( "#buyer_id" ), poc_n = $( "#poc_n" ), poc_e = $( "#poc_e" ), poc_p = $( "#poc_p" ), allFields = $( [] ).add( mr_name ).add( buyer_id ).add( poc_n ).add( poc_e ).add( poc_p ), tips = $( ".validateTips" ); console.log(allFields); function updateTips( t ) { tips .text( t ) .addClass( "ui-state-highlight" ); setTimeout(function() { tips.removeClass( "ui-state-highlight", 1500 ); }, 500 ); } function checkRegexp( o, regexp, n ) { if ( !( regexp.test( o.val() ) ) ) { o.addClass( "ui-state-error" ); updateTips( n ); return false; } else { return true; } } function addVendor() { var valid = true; allFields.removeClass( "ui-state-error" ); valid = valid && checkRegexp( mr_name, /^[az]([0-9a-z_\s])+$/i, "Please enter a valid vendor name" ); valid = valid && checkRegexp( buyer_id, /^(0|[1-9][0-9]*)$/, "Please enter a valid Buyer ID" ); valid = valid && checkRegexp( poc_n, /^[a-zA-Z ]*$/, "Please enter a valid name" ); valid = valid && checkRegexp( poc_e, emailRegex, "Please enter a valid email" ); valid = valid && checkRegexp( poc_p, phoneRegex, "Please enter a valid phone number" ); if ( valid ) { var $tr = $( "#html_master tbody tr" ).eq(0).clone(); $.each(allFields, function(){ $tr.find('.' + $(this).attr('id')).html( $(this).val() ); }); $tr.find('.mr_id').html( $( "#html_master tbody tr" ).length + 1 ); $( "#html_master tbody" ).append($tr); dialog.dialog( "close" ); } return valid; } var dialog = $( "#dialog-form" ).dialog({ autoOpen: false, height: 400, width: 350, modal: true, buttons: { "Add Row": addVendor, Cancel: function() { dialog.dialog( "close" ); } }, close: function() { form[ 0 ].reset(); allFields.removeClass( "ui-state-error" ); } }); form = dialog.find( "form" ).on( "submit", function( event ) { event.preventDefault(); addVendor(); }); $( ".create-user" ).button().on( "click", function() { dialog.dialog( "open" ); }); } ); // ----- Save Table ----- $(document).on("click", ".save", function () { // ------ Confirmation box in order to deactivate/activate row ----- if (confirm('Saving will update the entire table. Are you sure you want to save?')) { var tabledata=[]; $( "#html_master tbody tr" ).each(function( index ) { tabledata[index] = { mr_id: $( this ).find("td.mr_id").text(), mr_name: $( this ).find("td.mr_name").text(), buyer_id: $( this ).find("td.buyer_id").text(), poc_n: $( this ).find("td.poc_n").text(), poc_e: $( this ).find("td.poc_e").text(), poc_p: $( this ).find("td.poc_p").text() }; }); } });