Jump to content

Preloading


Xtremer360

Recommended Posts

My guess is I'll need a foreach loop with this but I'm a little unclear as to the bigger picture of the foreach because what I need is just foreach CharacterName and CharacterID that belongs to that handler needs to be put into the UL with a id of characterlist with an attached Remove Link to it that will remove it from the UL and append it back into the dropdown. I have something set up like that using jquery but how can I get the character and ID's preloaded into the ID and then afterwards have jquery take over the restwith the remove link and what to do with the appending.

 

$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>
    

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.