CODEWITHSUNDEEP
jqueryasp.netajaxhtml
John
John

Reputation: 135

jQuery create new div with ID?

I have form in my ASP.NET masterPage.master and if i click on submit it call some method from masterPage.master.cs file by ajax (i have it in update panel). But i want improve it with jQuery. So i have this:

$('#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 () {
                }
            });
        });

So if i click on submit, new div is creating (there is loading text and image, and cool opacity overlay), but how i give to this div some ID? Because i need use it in

success: function () {
                    }

i need clear this box and write here some text (error or success).

Upvotes: 3

Views: 11941

Answers (4)

Sam Jones
Sam Jones

Reputation: 4618

I like to create the element this way:

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

etc...

For reference - some attributes have reserved words/names (see MDN Reserved Words), so if you wanted to specify a class you need to wrap the attribute name:

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

You can of course assign a name to this new element and change it as you go along...

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

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

Upvotes: 7

SirDeveloper
SirDeveloper

Reputation: 276

All the answers are valid.

Another way:

HTML

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

JQuery

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

Or:

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

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

Upvotes: 1

nttakr
nttakr

Reputation: 1697

I did not quite get the setup you have created.

The success function is actually called with 3 parameters. 

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

You can safely ignore textStatus and jqXHR and just write

success : function( data ) {
}

The data element is the result you get back from you ajax call. You can search within that data to get the desired ID.

Another option would be to create the div from jQuery with a simple insert or append call and create the id in the script. (perhaps using date and time to be unique, or just get the highest id and increase a counter) You could then just load the html to be placed into the div via a call to jquery.

Upvotes: 0

JohnP
JohnP

Reputation: 50039

Just set the attribute when you're creating it

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

Upvotes: 7

Related Questions