Проблема с изменением HTML в тд - PullRequest
Новая
       7

Проблема с изменением HTML в тд

0 голосов
/ 29 июня 2011

У меня есть таблица, в каждой строке есть несколько ячеек с флажками в них, если пользователь нажимает флажок, на странице отображается div с формой для пользователя, чтобы ввести его / ее имя. Затем флажок заменяется введенным именем, которое является якорем, щелкнув ссылку, пользователь может сбросить ячейку обратно к флажку. Для этого я использую jquery, проблема в том, что, хотя ссылка возвращается обратно к флажку, когда я нажимаю флажок, который должен запустить div с формой, браузер отвечает, как будто это ссылка на имя пользователя ...

Надеюсь, что все имеет смысл - процесс выглядит так:

щелкните флажок-> отображает форму-> пользователь отправляет форму-> форма скрыта, имя вставлено в ячейку td, заменяя флажок в качестве ссылки-> если пользователь нажимает ссылку-> подтверждение, чтобы вернуться к флажку-> при подтверждении, заменить ссылку на флажок

это все хорошо, что происходит, то

установите флажок-> появится подтверждающее сообщение, чтобы вернуться к флажку-> отклонить, а затем отобразится скрытая форма

это плохо. это должен быть тот же процесс, что и раньше. Кажется, что хотя я изменяю код в ячейке с помощью jquery, браузер (FF5.0) сохраняет (хотя и скрывает) прежний код ссылки и ставит флажок поверх него (если я переворачиваю флажок, браузер отображает ссылка назначения).

Я использую уникальные идентификаторы и классы для вызова функций. Не совсем уверен, что я делаю здесь неправильно или как это исправить.

Код для отображения формы: 

/*show make item active form*/
    $("#showActiveNameForm").live('change', function() {


        if($(this).is(':checked') == true) { 

            //get record id
            var thisID = $(this).attr("thisID");

            //get the td cell index

            var row = $(this).parent().parent();
            var rowIndex = $(row[0].rowIndex);

            var colIndex = row.children().index($(this).parent());
            cellIndex = rowIndex[0] + "," + colIndex; 


            //store the record id in the session
            manageSessionData("set", "thisID", thisID);

            //store the td cell index in the session
            manageSessionData("set", "cellIndex", cellIndex);

            $.blockUI({ 
                message: $('#activeForm'),
                css: { 
                    border: '2px solid #000', 
                    padding: '5px', 
                    backgroundColor: '#ffffff',
                    width: '200px' 
                }  
            });

        }

    });

соответствующий код, который меняет флажок на ссылку html 

//write the value to the cell
$('#productTableBody').children('tr:eq(' + y + ')').children('td:eq(6)').html("<a href=\"javascript:void(0);\" class=\"changeActive\">" + elementValue + "</a>");

код для изменения ссылки обратно на флажок: 

//changeActive back to checkbox
    $(".changeActive").live('click', function() { 

        //get record id
        var thisId = $(this).attr("thisID");            

        var answer = confirm("Are you sure you want to change the active status of this item?");

        if (answer) { 

            //write the value to the database
            dataString = "thisId::" + thisId + "@@activename::@@active::off"; 

            //pass data to db manager via ajax
            $.ajax({
                type: "POST",
                url: "lib/includes/ajaxDatabaseManager.php",
                data: "dataString=" + dataString + "&table=scheduleTable&queryType=update",
                success: function(data){
                    console.log(data);
                }
            });

            //change the content of the cell
            $(this).html("<input type=\"checkbox\" id=\"showActiveNameForm\" class=\"setActive\" thisId=\"" + thisId + "\">");

        } else { 
            console.log("No confirm");
        }

        //

    });
...