jQuery создать новый div с идентификатором?

Question

У меня есть форма в моем ASP.NET masterPage.master, и если я нажимаю на кнопку отправить, вызовите некоторый метод из файла masterPage.master.cs от ajax (у меня он есть на панели обновления).Но я хочу улучшить это с помощью jQuery.Итак, у меня есть это:

$('#submit').click(function () {
            $.ajax({
                type: "POST",
                url: '<% Response.Write("~"+Request.Path); %>',
                beforeSend: function () {
                    $(document.createElement('div')).width($('#formBox').width())
                    .height($('#formBox').height())
                    .css({ backgroundImage: 'url(/Static/Img/bc_overlay.png)', position: 'absolute', left: 0, top: 0, margin: "5px", textAlign: "center", color: "#000", display: "none" })
                    .append("<strong>Načítám</strong><br /><img src='Static/Img/ajax-loader.gif' width='33px' height='33px' alt='loading' />")
                    .fadeIn("slow")
                    .prependTo($('#formBox'));
                    $('#formBox').css('position', 'relative');
                },
                success: function () {
                }
            });
        });

Так что, если я нажму на отправить, будет создан новый div (есть загрузка текста и изображения и наложение прозрачности непрозрачности), но как я могу дать этому div немногоID? Поскольку мне нужно использовать его в

success: function () {
                    }

Мне нужно очистить это поле и написать здесь текст (ошибка или успех).

Answer 1

Просто установите атрибут при его создании

$(document.createElement('div')).attr('id', 'theID')//rest of code

Answer 2

Мне нравится создавать элемент следующим образом:

    $('<div/>',{
        id: 'idhere',
        css:{
            width: $('#formBox').width(),
            height: $('#formBox').height()
        }
    });

и т.д ...

Для справки - некоторые атрибуты имеют зарезервированные слова / имена (см. Зарезервированные слова MDN ), поэтому, если вы хотите указать класс, вам нужно обернуть имя атрибута:

        $('<div/>',{
            id: 'idhere',
            'class':'myclassname',
            css:{
                width: $('#formBox').width(),
                height: $('#formBox').height()
            }
        });

Конечно, вы можете присвоить имя этому новому элементу и изменять его по мере продвижения ...

var div = $('<div/>',{
                id: 'idhere',
                'class':'myclassname',
                css:{
                    width: $('#formBox').width(),
                    height: $('#formBox').height()
                }
            });

$(div).prop('name','saymyname');

Answer 3

Все ответы действительны.

Другой способ:

HTML

<div id='container'></div>

JQuery

$('#container').append("<div id=\"id\"></div>");

Или:

 $('#container').append(createDiv('id', 'class'));

 var createDiv = function(newid, newclass) {
    return $('<div/>', {
              id: newid,
              class: newclass,
              css:{
                 width: "100px",
                 height: "100px"
              }
            });
 } 

Answer 4

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

Функция успеха на самом деле вызывается с 3 параметрами.

success : function( data, textStatus, jqXHR ) {
}

Вы можете спокойно игнорировать textStatus и jqXHR и просто написать

success : function( data ) {
}

Элемент данных - это результат, который вы получаете после вызова ajax. Вы можете искать в этих данных, чтобы получить желаемый идентификатор.

Другой вариант - создать div из jQuery с помощью простого вызова вставки или добавления и создать идентификатор в сценарии. (возможно, используя дату и время, чтобы быть уникальным, или просто получить самый высокий идентификатор и увеличить счетчик) Затем вы можете просто загрузить HTML, который будет помещен в div с помощью вызова jquery.