how to set jquery toggle position after ajax call

I am setting up a mining calculator for a game called eve.

In my calculator you can select from a list of players and then from a list of ore.

As you select a player or ore, a toggle event is used in jquery to signal to the player that he/she has selected the item. In addition an ajax call to a php script is fired to add/delete member/ore from a database.

The issue I have is that although when the mining op is loaded that has previously been worked on (has already had members/ore added to it) the toggle events for the player/ore are still set as if it has not been selected. I already have php code in place that prevents adding duplicate players and ore but I would like the interface to show to the user that a player or ore has previously been selected. Additionally as the player / ore has already been selected in a previous session, 开发者_Go百科I would like the first action of the toggle event to be the one that would be used to unhighlight the selection and remove the ore.

Every ore that is part of the op that is stored in the db is returned with a rel tag with its typeId Below is a sample of what the player list looks like:

<div class="miningMemberList">
    <div class="float" style="color: whitesmoke;">
        <input type="checkbox" class="cbox" name="option1" value="90892149" style="display: none; ">Glitch Rin
    </div>
    <div class="float" style="color: whitesmoke;">
        <input type="checkbox" class="cbox" name="option1" value="1162532926" style="display: none; ">Drake Firerain
    </div>
    <div class="spacer">
    </div>
</div>

Below is a sample of what the ore list looks like:

<div class="oreList" style="display: block; ">
    <div class="opOre" typeid="17428">
        Triclinic Bistot<img class="img_opOre" src="http://image.eveonline.com/Type/17428_32.png" alt="Triclinic Bistot">
    </div>
    <div class="opOre" typeid="17429">
        Monoclinic Bistot<img class="img_opOre" src="http://image.eveonline.com/Type/17429_32.png" alt="Monoclinic Bistot">
    </div>
    <div class="opOre" typeid="1227" style="background-color: rgb(57, 57, 57); color: rgb(245, 245, 245); ">
        Omber<img class="img_opOre" src="http://image.eveonline.com/Type/1227_32.png" alt="Omber">
    </div>
</div>

Below is a sample of the returned data from the ajax calls.

<div id="opTableContainer">
    <from>
    <table border="1" id="returnTable">
    <thead>
    <tr>
        <th>
            Name
        </th>
        <th display="true" rel="17428">
            <img class="img_opOre" src="http://image.eveonline.com/Type/17428_32.png" alt="Triclinic Bistot">Triclinic Bistot
        </th>
        <th display="true" rel="17429">
            <img class="img_opOre" src="http://image.eveonline.com/Type/17429_32.png" alt="Monoclinic Bistot">Monoclinic Bistot
        </th>
        <th display="true" rel="1227">
            <img class="img_opOre" src="http://image.eveonline.com/Type/1227_32.png" alt="Omber">Omber
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <img src="images/redXblackBackground.png" style="float: left;">Player 1
        </td>
        <td rel="17428">
            <input type="text" style="width:100px" name="17428">
        </td>
        <td rel="17429">
            <input type="text" style="width:100px" name="17429">
        </td>
        <td rel="1227">
            <input type="text" style="width:100px" name="1227">
        </td>
    </tr>
    <tr>
        <td>
            <img src="images/redXblackBackground.png" style="float: left;">Player 2
        </td>
        <td rel="17428">
            <input type="text" style="width:100px" name="17428">
        </td>
        <td rel="17429">
            <input type="text" style="width:100px" name="17429">
        </td>
        <td rel="1227">
            <input type="text" style="width:100px" name="1227">
        </td>
    </tr>
    </tbody>
    </table>
    <div class="spacer">
    </div>
    <input type="button" value="Submit"></from>
</div>

Below is a sample of what the javascript looks like for the toggle event for the ore. The toggle event for the players is nearly the same.

$(".opOre").toggle(function(){
        $(this).css('background-color','#393939');
        $(this).css('color','whitesmoke');
        var urlQuery = location.search;
    urlQuery = urlQuery.replace('?', '');
    var getVariable = urlQuery.split('=');
    typeId = $(this).attr('typeid');
    //split[0] is your var name, and split[1]
    /* ADD ORE TO OP TO DB */
    $.ajax({        
        type: "POST",
        url: "thePHPManagementScript.php",
        data: { action : 'addOre', opId : getVariable[1], typeId : typeId },
        success: function(data) {
            $("#opTableContainer").empty();
            $("#opTableContainer").append(data); 
            var bodyRows = $("#returnTable tbody tr");
            bodyRows.each(function(){
                var firstCell = $(this).find('td').eq(0).text();
                console.log(firstCell);
                $("#opSelectBox option").filter(function() { 
                    return this.text == firstCell; 
                }).remove();
            });
        }
        });
    },function(){
        $(this).css('background-color','black');
        var urlQuery = location.search;
    urlQuery = urlQuery.replace('?', '');
    var getVariable = urlQuery.split('=');
    typeId = $(this).attr('typeid');
    /* REMOVE ORE FROM OP FROM DB */
    $.ajax({        
        type: "POST",
        url: "thePHPManagementScript.php",
        data: { action : 'removeOre', opId : getVariable[1], typeId : typeId },
        success: function(data) {
            $("#opTableContainer").empty();
            $("#opTableContainer").append(data); 
            var bodyRows = $("#returnTable tbody tr");
            bodyRows.each(function(){
                var firstCell = $(this).find('td').eq(0).text();
                console.log(firstCell);
                $("#opSelectBox option").filter(function() { 
                    return this.text == firstCell; 
                }).remove();
            });
        }
    });
});

With any luck I have asked this question in a way that is understandable.

I know what ever I do is probably going to have to be done in the success: part of the ajax request, I just dont know how to go about solving this problem.

Do you have a link where I could view the problem, having a bit of trouble mentally visualising based on the description. I've had problems with dynamically loaded content in the past and could be something as simple as adding .live() to the toggle so that it works on loaded content.