как установить позицию переключения jquery после вызова ajax - PullRequest
0 голосов
/ 31 августа 2011

Я настраиваю калькулятор майнинга для игры под названием eve.

В моем калькуляторе вы можете выбирать из списка игроков, а затем из списка руды.

По вашему выборуигрок или руда, событие переключения используется в jquery, чтобы сообщить игроку, что он выбрал предмет.Кроме того, ajax-вызов php-скрипта запускается для добавления / удаления члена / руды из базы данных.

Проблема, с которой я столкнулся, заключается в том, что хотя при загрузке операции майнинга уже работали (ужеесли к нему добавлены участники / руда) события переключения для игрока / руды по-прежнему устанавливаются так, как если бы они не были выбраны.У меня уже есть php-код, который предотвращает добавление дублирующих игроков и руды, но я бы хотел, чтобы интерфейс показывал пользователю, что игрок или руда были ранее выбраны.Кроме того, поскольку игрок / руда уже был выбран в предыдущем сеансе, я бы хотел, чтобы первым действием события переключения было то, которое будет использоваться для выделения выделения и удаления руды.

Каждая рудаэто часть операции, которая хранится в БД, возвращается с тегом rel с его typeId. Ниже приведен пример того, как выглядит список игроков:

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

Ниже приведен пример того, как рудсписок выглядит следующим образом:

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

Ниже приведен пример возвращаемых данных из вызовов ajax.

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

Ниже приведен пример того, как javascript выглядит для события переключения длярудаСобытие переключения для игроков почти одинаковое.

$(".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();
            });
        }
    });
});

Если повезет, я задал этот вопрос понятным образом.

Я знаю, что когда-либо я, вероятно, собираюсьчтобы быть успешным: часть запроса ajax, я просто не знаю, как решить эту проблему.

1 Ответ

0 голосов
/ 31 августа 2011

У вас есть ссылка, по которой я мог бы посмотреть на проблему, имея немного проблем с мысленной визуализацией на основе описания. В прошлом у меня были проблемы с динамически загружаемым содержимым, и это могло быть чем-то простым, например, добавление .live () к переключателю, чтобы он работал с загруженным содержимым.

...