Tuesday, January 15, 2013

jquery tab


$("#existingCustomersTab").find("#customerDetailsDiv").tabs({
            select: function (event, ui) {
                switch (ui.index) {
                    case 0:
                        //Create Ticket Tab
                        break;
                    case 1:
                        //Ticket History Tab Starts
                        var customerIDVal = $("#existingCustomersTab").find("#customerIDText").val();
                        if (customerIDVal != "") {
                            $.ajax({
                                url: "CallRegister2.aspx/fetchTicketHistory",
                                data: "{customerID:'" + customerIDVal + "'}",
                                dataType: "json",
                                type: "POST",
                                contentType: "application/json; charset=utf-8",
                                dataFilter: function (data) { return data; },
                                success: function (data) {
                                    var $table = $('<table/>').css("border", "1px solid #111111"); ;
                                    var $tr = $('<tr/>').css("border", "1px solid #111111"); ;
                                    $tr.append("<th>").append("Complaint No").append("</th>").append("<th>").append("Subject").append("</th>").append("<th>").append("Status").append("</th>").append("<th>").append("Date").append("</th>");
                                    $table.append($tr);
                                    $.each(data.d, function (i, item) {
                                        var $tr = $('<tr/>').css("border", "1px solid #111111"); ;
                                        var $a = $('<a/>').attr('href', 'javascript:void(0)').text(item.complaintNo).css('color', 'blue');
                                        $tr.append("<td>").append($a).append("</td>").append("<td>").append(item.subject).append("</td>").append("<td>").append(item.status).append("</td>").append("<td>").append(item.date).append("</td>");
                                        $table.append($tr);
                                    });
                                    $("#existingCustomersTab").find("#ticketHistorySubTab").find("#ticketHistoryDiv").html($table);
                                }
                            });
                        }
                        //Ticket History Tab Ends
                        break;
                    case 2:
                        var customerIDVal = $("#existingCustomersTab").find("#customerIDText").val();
                        if (customerIDVal != "") {
                            $.ajax({
                                url: "CallRegister2.aspx/fetchCustomerProfile",
                                data: "{customerID:'" + customerIDVal + "'}",
                                dataType: "json",
                                type: "POST",
                                contentType: "application/json; charset=utf-8",
                                dataFilter: function (data) { return data },
                                success: function (data) {
                                    $table = $("#existingCustomersTab").find("#profileSubTab").find("table").empty();
                                    $table.last().append("<tr><th colspan='2'>Customer Profile</th></tr>");
                                    $table.last().append("<tr><td>Service Provider</td><td>" + data.d[0].serviceProvider + "</td></tr>");
                                    $table.last().append("<tr><td>Service ID</td><td>" + data.d[0].serviceID + "</td></tr>");
                                    $table.last().append("<tr><td>First Name</td><td>" + data.d[0].firstName + "</td></tr>");
                                    $table.last().append("<tr><td>Last Name</td><td>" + data.d[0].lastName + "</td></tr>");
                                    $table.last().append("<tr><td>Email</td><td>" + data.d[0].email + "</td></tr>");
                                    $table.last().append("<tr><td>Telephone</td><td>" + data.d[0].telephone + "</td></tr>");
                                    $table.last().append("<tr><td>Street</td><td>" + data.d[0].street + "</td></tr>");
                                    $table.last().append("<tr><td>City</td><td>" + data.d[0].city + "</td></tr>");
                                    $table.last().append("<tr><td>State</td><td>" + data.d[0].state + "</td></tr>");
                                    $table.last().append("<tr><td>Country</td><td>" + data.d[0].country + "</td></tr>");
                                    $table.last().append("<tr><td>Zip</td><td>" + data.d[0].zip + "</td></tr>");
                                    $table.last().append("<tr><td>Billing Address</td><td>" + data.d[0].billingAddress + "</td></tr>");
                                    $table.last().append("<tr><td>Billing City</td><td>" + data.d[0].billingCity + "</td></tr>");
                                    $table.last().append("<tr><td>Billing Zip</td><td>" + data.d[0].billingZip + "</td></tr>");
                                    $table.last().append("<tr><td>Registered Date</td><td>" + data.d[0].regDate + "</td></tr>");
                                }
                            });
                        }
                        //Customer Profile Block
                        break;
                    default:
                        //code to be executed if n is different from case 1 and 2
                }
            }
        });

No comments:

Post a Comment