Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Не правильное распознавание (понимае) событий (https://javascript.ru/forum/jquery/32627-ne-pravilnoe-raspoznavanie-ponimae-sobytijj.html)

myfallensoul 23.10.2012 20:19

Не правильное распознавание (понимае) событий
 
Все бы ничего но идет не правильное понимае событий. Возможно я вообще не правильно понимаю работу jquery. Если есть замечания к коду выслушаю с уважением все замечания.

Проблема в следующем

Все действия работают так как нужно, но при последнем все идет на перекосяк.

После вызова этого события
jQuery("#db-tables img").live("click", function() { .....
у меня запускаеться предыдущий ajax вызов
что выдает ошибки
и самое печальное, перестают работать начальные действия.

Как то так. Подскажите в чем может быть дело.
Могу отблагодарить через WebMoney.

Код:

echo "<table id='db-tables'>";
while ($row = mysql_fetch_row($result)) {
$query_count="SELECT * FROM ".$row[0];
$result_count = mysql_query($query_count);
echo "<tr>";
echo "<td><a href=''>".$row[0]."</a> (".mysql_num_rows($result_count).")</td>
<td><img src='/template/images/bullet_delete.png' title='Delete'/></td>";
echo "</tr>";
}
echo "</table>";
?>
<div id="ajax_responce"></div>
<form id="add_table" name="add_table" action="javascript:void(null)">
Название таблицы: <input id="table_name" type="text" name="table_name" size="20">
<button id="add_next_step" class="submit">Вперед</button>
</form>
<script type="text/javascript">
jQuery("#add_next_step").click(function(event) {
        var value = jQuery("#table_name").val();
        if ( value != '' ) {
        jQuery("#add_table").append('<table id="table_fields"><tr>
<td><input type="text" name="add_field_title" value="Название поля" /></td>
<td><select name="add_field_type">
<option value="INT">INT</option><option value="VARCHAR">VARCHAR</option>
</select></td><td><input type="text" name="add_field_lenght" value="Длина значения"></td>
<td><img src="/template/images/bullet_delete.png" title="Delete"/></td></tr></table>');
        jQuery("#add_table").append('<br /><button id="add_next_field" class="submit">Добавить поле</button>
<input class="submit" type="submit" value="Создать">');
        jQuery("#add_next_step").remove();
        }
        else {
        alert("Введите название таблицы");
        }
});
                               
jQuery("#add_next_field").live("click", function() {
        var value = jQuery("#table_name").val();
        if ( value != '' ) {
        jQuery("#table_fields").append('<tr><td><input type="text" name="add_field_title" value="Название поля" /></td>
<td><select name="add_field_type"><option value="INT">INT</option><option value="VARCHAR">VARCHAR</option></select></td>
<td><input type="text" name="add_field_lenght" value="Длина значения"></td>
<td><img src="/template/images/bullet_delete.png" title="Delete"/></td></tr>');
        }
        else {
        alert("Введите название таблицы");
        }
});
                               
jQuery("#table_fields img").live("click", function() {
        var index = jQuery("#table_fields img").index(this);
        jQuery("#table_fields img").eq(index).parents("tr").remove();
});
                       
jQuery("#add_table input[type=submit]").live("click", function() {
        var value = jQuery("#add_table").serialize();
        if ( value != '' ) {
        jQuery.ajax({
                type: "POST",
                url: "implementation.php?task=add-table-mysql",
                data: {"value": value},
                cache: false,                                               
                success: function(response_add){
                        jQuery("#ajax_responce").html(response_add);
                        setTimeout(function () {
                        jQuery("#ajax_responce").html("");
                        }, 5000)
                $("#db-tables").load("index.php?task=vr-mysql #db-tables");
                $("#add_table").load("index.php?task=vr-mysql #add_table");
                }
                });
        }
        else {
                alert("Введите название таблицы");
        }
});
                               
jQuery("#db-tables img").live("click", function() {
        var index = jQuery("#db-tables img").index(this);
        var table_name = jQuery("#db-tables a").eq(index).html();
        if ( table_name != '' ) {
                jQuery.ajax({
                        type: "POST",
                        url: "implementation.php?task=delete-table-mysql",
                        data: {"value": table_name},
                        cache: false,                                               
                        success: function(response_delete){
                        jQuery("#ajax_responce").html(response_delete);
                                setTimeout(function () {
                                jQuery("#ajax_responce").html("");
                                }, 5000)
                $("#db-tables").load("index.php?task=vr-mysql #db-tables");
                                }
                        });
                }
});


rockerror 06.11.2012 23:05

Может быть меня сейчас дико заминусуют, но если бы когда-то мне кто-то на какой-то вопрос ответил то, что я напишу, я бы в последствии не написал кучу говнокода.

1. По пыху: отделите представление от логики. sql запросы и формирование html в одном месте - это дико не нормально. Почитайте про концепцию MVC - это сильно упростит вам жизнь и работу с кодом, ибо сейчас в этой каше из php, html и js разобраться без пива решительно не возможно. А уже через месяц вам самому/самой будет проще написать сей функционал заново, чем разобраться в написанном. А теперь представьте, что над кодом будет работать кто-то еще.

2. По js. Вытащите то, что происходит внутри обработчиков событий в отдельные функции, и уж наверняка вытащите хотябы в отдельные строки html, который вы аппендите. Оберните код, который должен исполняться после загрузки страницы в $(document).ready(function(){ "ваш код" }); а функции, вызываемые оттуда разместите выше. То как есть сейчас может и работает, но у меня есть сомнение по поводу того, что сие будет работать везде.

3. Вообще почитайте посмотрите КАК нужно и не нужно оформлять код. Поверьте, повысив этот скилл вам станет намного легче работать.

Из вашего кода (а тут я могу ошибаться, ибо всерьез ковыряться в нем нет никакого желания ввиду его оформления) могу лишь сделать предположение, что проблема связана с синхронностью/асинхронностью аякс запросов.


Часовой пояс GMT +3, время: 00:33.