Editing A User

[Xtremer360]

I know PHP and JS can't talk to each other however I'm trying to figure out how this can be done.

 

I have the following function (was used for the add new user form):

 

<script type="text/javascript" language="javascript">
    // Long version
    function HandlerCharacters() {
        function isDupe(which) {
            var result = false;
            $('ul#characterList li').each(function(i, e) {
                if ($(e).data('characterID') == which) {
                    result = true;
                    return false; // break out of .each()
                }
            });
            return result;
        }
        var characterID = $('#charactersDrop option:selected').val();
        var characterName = $('#charactersDrop option:selected').text();
        if (characterID > 0 && !isDupe(characterID)) {
        	// Create the anchor element
        	var anchor = $( '<a href="#">Remove</a>' );  
        	
        	// Create a click handler for the anchor element
        	anchor.click( function() {
        		$( this ).parent().remove();
        		return false;  // makes the href in the anchor tag ignored
        	} );
        	
        	// Create the <li> element with its text, and then append the anchor inside it.
        	var li = $( '<li>' + characterName + ' </li>' ).append( anchor );
        	li.data( 'characterID', characterID );
        	
        	// Append the new <li> element to the <ul> element
        	$( '#characterList' ).append( li );
        }
    }
    </script>

 

I have retrieved from my database each characterName and its ID and I'm trying to put each back into a UL with each being an LI obviously. Any ideas how I could accomplish this.

[Xtremer360]

Here's the whole bit of code.

 

case 'edit':
    $handlerID = $_GET['id'];
    $query = "SELECT 
        characters.ID,
        characters.characterName,
        handlers.userName,
        handlers.password,
        handlers.firstName,
        handlers.lastName,
        handlers.email,
        handlers.isAdmin,
        handlers.statusID
    FROM 
        handlers
        LEFT JOIN handlerCharacters
            ON handlerCharacters.handlerID =  handlers.ID
            LEFT JOIN characters
                ON characters.ID = handlerCharacters.characterID
    WHERE 
        handlers.ID = '" . $handlerID . "'";
    $result = mysqli_query ( $dbc, $query ); // Run The Query 
    $row = mysqli_fetch_array ( $result, MYSQL_ASSOC )
    ?>
    <script type="text/javascript">
    $(document).ready(function() {
        $('div.message-error').hide();
        $('div.message-success').hide();
        $('ul#characterList').css( 'margin-left', '120px' );
        $('li').remove('.characterName');
        $("input.submit").click(function() {
            $('div.message-error').hide();
            var handlerID = $("input#handlerID").val();
            var userName = $("input#userName").val();
         	if (userName == "") {
                $("div.message-error").show();
                $("input#userName").focus();
                return false;
            } 
            var password = $("input#password").val();
         	if (password == "") {
                $("div.message-error").show();
                $("input#password").focus();
                return false;
            }
            var firstName = $("input#firstName").val();
         	if (firstName == "") {
                $("div.message-error").show();
                $("input#firstName").focus();
                return false;
            } 
            var lastName = $("input#lastName").val();
            if (lastName == "") {
                $("div.message-error").show();
                $("input#lastName").focus();
                return false;
             } 
             var email = $("input#email").val();
             if (email == "") {
                $("div.message-error").show();
                $("input#email").focus();
                return false;
             } 
             var statusID = $("select#statusID").val();
         	 if (statusID == "") {
                $("div.message-error").show();
                $("select#statusID").focus();
                return false;
             } 
             var isAdmin = $("select#isAdmin").val();
             if (isAdmin == "") {
                $("div.message-error").show();
                $("select#isAdmin").focus();
                return false;
             }  
             var liElements = $("ul#characterList li");
             var characterIDList = "";
             for( var i = 0; i < liElements.length; i++ ) {
                var liElement = $( liElements[ i ] );
                
                // only start appending commas in after the first characterID
                if( i > 0 ) {
        	       characterIDList += ","; 
                }
        
                // append the current li element's characterID to the list
                characterIDList += liElement.data( 'characterID' );
             }
             var dataString = 'userName=' + userName  + '&password=' + password + '&firstName=' + firstName + '&lastName=' + lastName + '&email=' + email + '&statusID=' + statusID + '&isAdmin=' + isAdmin + '&characterIDList=' + characterIDList + '&handlerID=' + handlerID + '&editHandler=True';
             $.ajax({
                 type: "POST",
                 url: "processes/handler.php",
                 data: dataString,
                 success: function() {
                     $('div.message-error').hide();
                     $("div.message-success").html("<h6>Operation successful</h6><p>" + userName + " saved successfully.</p>");
                     $("div.message-success").show().delay(10000).hide("slow");
                     $(':input','#handlerForm')
                     .not(':submit, :button')
                     .val('')
                     $("ul#characterList").empty();
                     return true;
                 }
            });
            return false;    
        });
    });
    </script>
    
    <!-- Form -->
    <form action="#" id="handlerForm">
    	<fieldset>
    		<legend>Edit Handler</legend>
            <div class="field required">
    			<label for="userName">User Name</label>
    			<input type="text" class="text" name="userName" id="userName" title="User Name" value="<?php echo $row['userName']; ?>"/>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="password">Password</label>
    			<input type="password" class="text" name="password" id="password" title="Password" value="<?php echo $row['password']; ?>"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="firstName">First Name</label>
    			<input type="text" class="text" name="firstName" id="firstName" title="First Name" value="<?php echo $row['firstName']; ?>"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="lastName">Last Name</label>
    			<input type="text" class="text" name="lastName" id="lastName" title="Last Name" value="<?php echo $row['lastName']; ?>"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="email">Email</label>
    			<input type="text" class="text" name="email" id="email" title="Email" value="<?php echo $row['email']; ?>"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="statusID">Status</label>
                <select class="dropdown" name="statusID" id="statusID" title="Status">
                <option value="">- Select -</option>
                <?php
                $query = 'SELECT * FROM statuses';
                $result = mysqli_query ( $dbc, $query ); // Run The Query 
                while ( $status_row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
                        print "<option value=\"".$status_row['ID']."\" ";
					if($status_row['ID'] == $row['statusID']) {
						     print " SELECTED";
					}
                        print ">".$status_row['statusName']."</option>\r";
                }
                ?>
                </select>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="isAdmin">Administrator</label>
                <select class="dropdown" name="isAdmin" id="isAdmin" title="Administrator">
                <option value="">- Select -</option>
                <?php
                    $administrator = array('Yes', 'No');
                    foreach($administrator as $admin):
                ?>        
                <option value="<?php echo $admin; ?>"<?php if($admin == $row['isAdmin']): echo ' SELECTED'; endif; ?>><?php echo $admin; ?></option>
             
                <?php endforeach; ?>
                </select>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
    	</fieldset>
        <fieldset>
    		<legend>Handler's Characters</legend>
            <div class="field">
    			<label for="charactersDrop">Characters</label>
                <select class="dropdown" name="charactersDrop" id="charactersDrop" title="Characters Dropdown">
                <option value="">- Select -</option>
                <?php
                $query = 'SELECT ID, characterName FROM characters WHERE ID NOT IN (SELECT characterID FROM handlerCharacters) ORDER BY `characterName`';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['ID']."\">".$row['characterName']."</option>\r";
                }
                ?>
                </select>
                <input type="button" value="Add Character" class="" onclick="HandlerCharacters()"/>
                <ul id="characterList"></ul>
            </div>
            <input type="hidden" name="handlerID" id="handlerID" value="<?php echo $handlerID; ?>" /> 
            <input type="submit" class="submit" name="editHandler" id="editHandler" title="Submit Handler" value="Submit Handler" />
    	</fieldset>
    </form>
    <!-- /Form -->
    <!-- Messages -->
    <div class="message message-error">
        <h6>Required field missing</h6>
        <p>Please fill in all required fields. </p>
    </div>
    <div class="message message-success">
        <h6>Operation succesful</h6>
        <p>Handler was added to the database.</p>
    </div>
    <!-- /Messages -->
    
    <script type="text/javascript" language="javascript">
    // Long version
    function HandlerCharacters() {
        function isDupe(which) {
            var result = false;
            $('ul#characterList li').each(function(i, e) {
                if ($(e).data('characterID') == which) {
                    result = true;
                    return false; // break out of .each()
                }
            });
            return result;
        }
        var characterID = $('#charactersDrop option:selected').val();
        var characterName = $('#charactersDrop option:selected').text();
        if (characterID > 0 && !isDupe(characterID)) {
        	// Create the anchor element
        	var anchor = $( '<a href="#">Remove</a>' );  
        	
        	// Create a click handler for the anchor element
        	anchor.click( function() {
        		$( this ).parent().remove();
        		return false;  // makes the href in the anchor tag ignored
        	} );
        	
        	// Create the <li> element with its text, and then append the anchor inside it.
        	var li = $( '<li>' + characterName + ' </li>' ).append( anchor );
        	li.data( 'characterID', characterID );
        	
        	// Append the new <li> element to the <ul> element
        	$( '#characterList' ).append( li );
        }
    }
    </script>
    <?php
    break;