Ordering

[Xtremer360]

What I'm trying to figure out how to do is near the bottom of the script where it has a for loop for numSegments and the dropdown for the sortOrder for each one. What the options are supposed to fill is the amount of matches or the event. So the option text would be "Match 1" or however many down with the numMatches variable I guess. And the option would just be the number of the match.

 

<?php require ('php/bookings.php'); ?>

<script type="text/javascript">
function Competitors(matchNum) {
        
    function isDupe(which) {
        var result = false;
        $('ul#competitors'+ matchNum +' li').each(function(i, e) {
            if ($(e).attr('characterID') == which) {
                result = true;
                return false; // break out of .each()
            }
        });
        return result;
    }
    
    var characterID = $('#charactersDrop'+ matchNum +' option:selected').val();
    var characterName = $('#charactersDrop'+ matchNum +' 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.attr ('characterID', characterID );
        
        // Append the new <li> element to the <ul> element
        $('#competitors'+ matchNum).append( li );
    }
}

function TitlesDefended(matchNum) {
    function isDupe(which) {
        var result = false;
        $('ul#titlesDefended'+ matchNum +' li').each(function(i, e) {
            if ($(e).attr('titleID') == which) {
                result = true;
                return false; // break out of .each()
            }
        });
        return result;
    }
    
    var titleID = $('#titlesDrop'+ matchNum +' option:selected').val();
    var titleName = $('#titlesDrop'+ matchNum +' option:selected').text();
    
    if (titleID > 0 && !isDupe(titleID)) {
        // 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>' + titleName + ' </li>' ).append( anchor );
        li.attr( 'titleID', titleID );
        
        // Append the new <li> element to the <ul> element
        $( '#titlesDefended'+ matchNum ).append( li );
    }
}

function StipulationsAdded(matchNum) {
    function isDupe(which) {
        var result = false;
        $('ul#stipulationsAdded'+ matchNum +' li').each(function(i, e) {
            if ($(e).attr('stipulationID') == which) {
                result = true;
                return false; // break out of .each()
            }
        });
        return result;
    }
    
    var stipulationID = $('#stipulationsDrop'+ matchNum +' option:selected').val();
    var stipulationName = $('#stipulationsDrop'+ matchNum +' option:selected').text();
    
    if (stipulationID > 0 && !isDupe(stipulationID)) {
        // 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>' + stipulationName + ' </li>' ).append( anchor );
        li.attr( 'stipulationID', stipulationID );
        
        // Append the new <li> element to the <ul> element
        $( '#stipulationsAdded'+ matchNum ).append( li );
    }
}

$(document).ready(function() {
    $('div.message-error').hide();
    $('div.message-success').hide();
    $('li').remove('.titleName');
    $('li').remove('.stipulationName');
    $('li').remove('.characterName');
    
    $("#bookerForm").validate({ 
        rules: {
            introduction: {
                required: true
            },
            matchtypeID: {
                required: true
            },
            liCompetitors: {
                required: true
            },
            matchwriterID: {
                required: true
            },
            matchTitle: {
                required: true
            },
            preview: {
                required: true
            },
            segment: {
                required: true
            }
        },
        messages: {
            introduction: "Please enter the event introduction!",
            matchtypeID: "Please choose the type of match!",
            liCompetitors: "Please choose atleast 2 competitors!",
            matchwriterID: "Please choose a match writer!",
            matchTitle: "Please enter a match title!",
            preview: "Please enter a preview!",
            segment: "Please choose a segment writer!"
        },
        submitHandler: function(form) {
            var eventName = $("#event").val();
            var eventID = $("#eventID").val();
            var introduction = $("#introduction").val();
            var type = $("#type").val();
            var matchNumX = new Array;
            var matchTypeIDX = new Array;
            var titlesIDListX = new Array;
            var stipulationsIDListX = new Array;
            var competitorsIDListX = new Array;
            var matchWriterIDX = new Array;
            var matchTitleX = new Array;
            var previewX = new Array;
            var segmentArrayX = new Array;
            var masterIndex = 0;
            var masterArray = [];
            for(i=0;i<<?php echo $numMatches ?>; i++) {
                var matchNum = i + 1;
                var matchTypeID = $('select#matchTypeDrop'+ matchNum).val();  
                var liTitles = $('ul#titlesDefended'+ matchNum +' li');
                var titlesIDList = "";
                var j = 0;
                $('ul#titlesDefended'+ matchNum +' li').each(function(){
                    var liTitle = $( liTitles[ j ] );
                    
                    // only start appending commas in after the first characterID
                    if( j > 0 ) {
                        titlesIDList += ","; 
                    }
                    
                    // append the current li element's characterID to the list
                    titlesIDList += liTitle.attr( 'titleID' );
                    j++;
                });
                var j = 0;
                var liStipulations = $('ul#stipulationsAdded'+ matchNum +' li');
                var stipulationsIDList = "";
                $('ul#stipulationsAdded'+ matchNum +' li').each(function(){
                    var liStipulation = $( liStipulations[ j ] );
                    
                    // only start appending commas in after the first characterID
                    if( j > 0 ) {
                        stipulationsIDList += ","; 
                    }
                    
                    // append the current li element's characterID to the list
                    stipulationsIDList += liStipulation.attr( 'stipulationID' );
                    j++;
                });
                var j = 0;
                var liCompetitors = $('ul#competitors'+ matchNum +' li');
                var competitorsIDList = "";
                $('ul#competitors'+ matchNum +' li').each(function(){
                    var liCompetitor = $( liCompetitors[ j ] );
                    
                    // only start appending commas in after the first characterID
                    if( j > 0 ) {
                        competitorsIDList += ","; 
                    }
                    
                    // append the current li element's characterID to the list
                    competitorsIDList += liCompetitor.attr( 'characterID' );
                    j++;
                });
                var matchWriterID = $('select#matchWriter' + matchNum + '').val();
                var matchTitle = $('input#matchTitle'+ matchNum +'').val();
                var preview = $('textarea#preview'+ matchNum +'').val();
                matchNumX.push(matchNum);
                matchTypeIDX.push(matchTypeID);
                titlesIDListX.push(titlesIDList);
                stipulationsIDListX.push(stipulationsIDList);
                competitorsIDListX.push(competitorsIDList);
                matchWriterIDX.push(matchWriterID);
                matchTitleX.push(matchTitle);
                previewX.push(preview);
                masterArray[masterIndex] = new Object();                
                masterArray[masterIndex]['matchNum'] = matchNumX;
                masterArray[masterIndex]['matchtypeID'] = matchTypeIDX;
                masterArray[masterIndex]['titlesIDList'] = titlesIDListX;
                masterArray[masterIndex]['stipulationsIDList'] = stipulationsIDListX;
                masterArray[masterIndex]['competitorsIDList'] = competitorsIDListX;
                masterArray[masterIndex]['matchWriterID'] = matchWriterIDX;
                masterArray[masterIndex]['matchTitle'] = matchTitleX;
                masterArray[masterIndex]['preview'] = previewX;
            }
            
            var dataString = 'masterArray=' + masterArray;
            dataString += '&eventID=' + eventID + '&introduction=' + introduction + '&submitBooking=True';
            console.log( masterArray );
            $.ajax({
                type: "POST",
                url: "processes/bookings.php",
                data: dataString, 
                success: function() {
                    $('div.message-error').hide();
                    $("div.message-success").html("<h6>Operation successful</h6><p>" + eventName + " saved successfully.</p>");
                    $("div.message-success").show().delay(10000).hide("slow");
                    return true;
                }
            });
            return false; 
        }   
    });
});
</script>

<p class="listInfos">
    Card Lineup for <?php echo "".$event." on ".$bookingDate."" ?>
</p>
        
<!-- Form -->
<form action="#" id="bookerForm" >
    <fieldset>
        <legend>Introduction</legend>
        <div class="field required">
            <label for="introduction">Introduction:</label>
            <textarea name="introduction" id="introduction" title="Introduction"></textarea>
            <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>
    <?php for( $i = 0; $i < $numMatches; $i++ ) { ?>
    <fieldset>
        <legend>Match #<?php echo $i+1 ?></legend>
        <div class="field required">
		<label for="matchTypeDrop<?php echo $i+1 ?>">Match Type:</label>
            <select class="dropdown" name="matchTypeDrop<?php echo $i+1 ?>" id="matchTypeDrop<?php echo $i+1 ?>" title="Match Type <?php echo $i+1 ?>">
                <option value="">- Select -</option>
               <?php
                    mysqli_data_seek( $matchtypesResult, 0 );
                    while ( $row = mysqli_fetch_array ( $matchtypesResult, MYSQL_ASSOC ) ) { 
                        print "<option value=\"".$row['ID']."\">".$row['matchType']."</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="titlesDefended<?php echo $i+1 ?>">Title On The Line:</label><ul id="titlesDefended<?php echo $i+1 ?>" style="list-style: none; margin-left: 195px;"></ul>
            <select class="dropdown" name="titlesDrop<?php echo $i+1 ?>" id="titlesDrop<?php echo $i+1 ?>" title="Titles Dropdown <?php echo $i+1 ?>" style="margin-left: 195px;">
                <option value="">- Select -</option>
               <?php
                    mysqli_data_seek( $titlesResult, 0 );
                    while ( $row = mysqli_fetch_array ( $titlesResult, MYSQL_ASSOC ) ) { 
                        print "<option value=\"".$row['ID']."\">".$row['titleName']."</option>\r";
                    }
                ?>
            </select>
            <input type="button" value="Add Title" class="" onclick="TitlesDefended(<?php echo $i+1?>)"/>
        </div>
        <div class="field required">
		<label for="stipulationsAdded<?php echo $i+1 ?>">Stipulation:</label><ul id="stipulationsAdded<?php echo $i+1 ?>" style="list-style: none; margin-left: 195px;"></ul>
            <select class="dropdown" name="stipulationsDrop<?php echo $i+1 ?>" id="stipulationsDrop<?php echo $i+1 ?>" title="Stipulations Dropown <?php echo $i+1 ?>" style="margin-left: 195px;">
                <option value="">- Select -</option>
               <?php
                    mysqli_data_seek( $stipulationsResult, 0 );
                    while ( $row = mysqli_fetch_array ( $stipulationsResult, MYSQL_ASSOC ) ) { 
                        print "<option value=\"".$row['ID']."\">".$row['stipulation']."</option>\r";
                    }
                ?>
            </select>
            <input type="button" value="Add Stipulation" class="" onclick="StipulationsAdded(<?php echo $i+1 ?>)"/>
        </div>
        <div class="field required">
            <label for="competitors<?php echo $i+1 ?>">Competitors:</label><ul id="competitors<?php echo $i+1 ?>" style="list-style: none; margin-left: 195px;"></ul>
            <select class="dropdown" name="charactersDrop<?php echo $i+1 ?>" id="charactersDrop<?php echo $i+1 ?>" title="Characters Dropdown <?php echo $i+1 ?>" style="margin-left: 195px;">
                <option value="">- Select -</option>
               <?php
                    mysqli_data_seek( $charactersResult, 0 );
                    while ( $row = mysqli_fetch_array ( $charactersResult, MYSQL_ASSOC ) ) { 
                        print "<option value=\"".$row['ID']."\">".$row['characterName']."</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>
            <input type="button" value="Add Character" class="" onclick="Competitors(<?php echo $i+1 ?>)"/>
        </div>
        <div class="field required">
            <label for="matchWriter<?php echo $i+1 ?>">Match Writer:</label>
            <select class="dropdown" name="matchWriter<?php echo $i+1 ?>" id="matchWriter<?php echo $i+1 ?>" title="Match Writer <?php echo $i+1 ?>">
                <option value="0">- Select -</option>
               <?php
                    mysqli_data_seek( $matchwriterResult, 0 );
                    while ( $row = mysqli_fetch_array ( $matchwriterResult, MYSQL_ASSOC ) ) { 
                        print "<option value=\"".$row['ID']."\">".$row['name']."</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="matchTitle<?php echo $i+1 ?>">Match Title</label>
		<input type="text" class="text" name="matchTitle<?php echo $i+1 ?>" id="matchTitle<?php echo $i+1 ?>" title="Match Title<?php echo $i+1 ?>"/>
		<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="preview<?php echo $i+1 ?>">Preview:</label>
            <textarea name="preview<?php echo $i+1 ?>" id="preview<?php echo $i+1 ?>" title="preview <?php echo $i+1 ?>"></textarea>
            <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>
        <input type="hidden" name="type" id="type" value="Match" />
    </fieldset>
        <?php
        }
        ?>
        
    <?php if ($numSegments > 0) { ?>
        <?php for( $i = 0; $i < $numSegments; $i++ ) { ?>
            <fieldset>
                <legend>Segment <?php echo $i+1 ?></legend>
                    <div class="field required">
                        <label for="segmentWriter<?php echo $i+1 ?>">Segment Writer<?php echo $i+1 ?>:</label>
                        <select class="dropdown" name="segmentWriter<?php echo $i+1 ?>" id="segmentWriter<?php echo $i+1 ?>" title="Segment Writer <?php echo $i+1 ?>">
                        <option value="0">- Select -</option>
                       <?php
                            mysqli_data_seek( $matchwriterResult, 0 );
                            while ( $row = mysqli_fetch_array ( $matchwriterResult, MYSQL_ASSOC ) ) { 
                                print "<option value=\"".$row['ID']."\">".$row['name']."</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="segmentOrder">Segment After:</label>
                        <select class="dropdown" name="sortOrder" id="sortOrder" title="Sort Order">
                        <option value="0">- Select -</option>
                       
                    </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>
                    <input type="hidden" name="type" id="type" value="Segment" />
            </fieldset>
        <? } ?>
    <?php } ?>
    
    <fieldset>
    <input type="hidden" name="eventID" id="eventID" value="<?php echo $eventID; ?>" />
    <input type="hidden" name="event" id="event" value="<?php echo $event; ?>" />
    <input type="submit" class="submit" name="submitBooking" id="submitBooking" title="Submit Booking" value="Submit Booking"/>
    </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>Booking was added to the database.</p>
</div>
<!-- /Messages -->