Rataiczak24 Rataiczak24 - 1 month ago 9
HTML Question

Add Rows After Populating a Dialog Box

I have an HTML table and I want to be able to add a row after I click a button and a dialog box pops up where I can type in the necessary row information. I came across some code that does exactly what I want. I tailored it to go with my code as much as I could. So far, I have the popup box, but it does not add a row after I click "add row" in the popup which is what I need it to do. I was hoping someone might be able to tell me what is wrong with this. I'm pretty stuck on it.

JavaScript:

// ----- 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])?)*$/,
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" );

function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}

function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}

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 && checkLength( mr_name, "mr_id", 3, 16 );
valid = valid && checkLength( buyer_id, "buyer_id", 6, 80 );
valid = valid && checkLength( poc_n, "poc_n", 5, 16 );
valid = valid && checkLength( poc_e, "buyer_id", 6, 80 );
valid = valid && checkLength( poc_p, "poc_n", 5, 16 );

valid = valid && checkRegexp( mr_id, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
valid = valid && checkRegexp( buyer_id, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
valid = valid && checkRegexp( poc_n, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
valid = valid && checkRegexp( poc_e, emailRegex, "eg. ui@jquery.com" );
valid = valid && checkRegexp( poc_p, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

if ( valid ) {
$( "#html_master tbody" ).append( "<tr>" +
"<td>" + mr_name.val() + "</td>" +
"<td>" + buyer_id.val() + "</td>" +
"<td>" + poc_n.val() + "</td>" +
"<td>" + poc_e.val() + "</td>" +
"<td>" + poc_p.val() + "</td>" +
"</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" );
});
} );


HTML/PHP:

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="test1.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="test1.js"></script>
</head>

<body>

<div id="dialog-form" title="Add Vendor">
<p class="validateTips">All form fields are required.</p>

<form>
<fieldset>
<label for="mr_id">Vendor</label>
<input type="text" name="mr_id" id="mr_id" 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" 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>

</table>
</div>

<input type="button" id="create-user" value="Add Row">

</body>
</html>


I know the validation is off right now, but that is not my current focus. I just want to be able to add a row after I populate the pop up window.

Answer

I placed your code in this fiddle, removing the PHP part, to debug it better. One thing I'm not sure you know, though it's very useful, is that you can use the browser's console (right-button click > Inspect > Console) to look for eventual JS errors.

Anyway, nothing was happening when you clicked Add Row because there was a few errors in your script.

1) This line: mr_name = $( "#mr_name" ), should be mr_name = $( "#mr_id" ),, since mr_id is the id you gave to your HTML input

2) This line: valid = valid && checkRegexp( mr_id, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." ); should have mr_name instead of mr_id, since it's the variable you named in the line I mentioned in the previous item

Comments