martedì 19 febbraio 2013

JQuery - PostBack from JQuery Modal DialogBox

In our web applications sometimes we need to use JQuery Modal Dialog Box and make some action in it, for example an insert/update into a database. 
To make this, we have to associate at the action of the modal box button an hidden Aspx button.
The following code show how make this. 

JQuery code to make the Modal Dialog Box:

$("#Your_DIV_ID").dialog(
            {
                autoOpen: false,
                height: 400,
                width: 350,
                modal: true,
                buttons:
                {
                    Ok: function ()
                    {
                       $("#Your_Button").click();
                    },
                    Cancel: function ()
                    {
                        $(this).dialog("close");
                    }
                },
                close: function ()
                { }
            }).parent().appendTo($("form:first"));


The Html/Aspx Code to declare your Modal Box and for example the button for the action:

<div id="Your_DIV_ID" title="Your Title">

    ... Your Div Content ...
       
    <asp:Button ID="Your_Button" style = "display:none" runat="server" Text="Save"  onclick="Your_Button_Click"  />

</div>


C# Code of the button:

protected void Your_Button_Click(object sender, EventArgs e)
        {
           // Do Somenthing
     }


My Two Cents ...

JQuery - Getting Value From DropDownList

If you need to get the value of a Drop Down List, look at the following example:

var value = $("#Yuor_DropDownList_ID option:selected").val();


My Two Cents ...

Verify Future Date with Javascript

The following Javascript function shows a way to verify if a date is in the future:

function isFutureDate(obj)
{
    var dteDate;
    var now = new Date().format("yyyyMMdd");
    obj1 = obj.split("/");
    var day = parseInt(obj1[0], 10);
    var month = parseInt(obj1[1], 10);
    var year = parseInt(obj1[2], 10);

    var born = obj1[2] + obj1[1] + obj1[0];

    if (parseInt(born) > parseInt(now))
        return true;
    else
        return false;
}


My Two Cents ...

InLine BulletList

If you need to have Inline Bullet List and not vertical and with a custom bullet, you can do as shown here:
This is the code you have to put in .aspx page:

<asp:BulletedList ID="your_bullet_id" runat="server" ></asp:BulletedList>

and here teh code per CSS stylesheet:

li
{
    display: inline;
    padding-left: 15px;
    background: url(path_of_your_custom_bullet_image) no-repeat;   
}

My Two Cents ...