Question

var addRecord, getRecords, wcfServiceUrl;

// Use strict for all other functions
// Based on post at:
// http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

(function () {
    "use strict";

    wcfServiceUrl = "http://localhost/WcfRestUpdates/eval/evals";

    // Execute when the DOM is fully loaded
    $(document).ready(function () {
        getRecords();
    });

     // Add record
    $(function () {
        $("#butCallAjax").click(addRecord);                

    });     

    //Add record function start
    addRecord = function () {
        //jQuery.support.cors = true;
        $.ajax({
                    type: "POST",
                    url: wcfServiceUrl,                    
                    //data: '<Eval xmlns="http://schemas.datacontract.org/2004/07/WcfRestUpdates"><Comments>' + document.getElementById("txtComment").value + '</Comments><Submitter>' + document.getElementById("txtSubmitter").value + '</Submitter></Eval>',
                    data: '<Eval xmlns="http://schemas.datacontract.org/2004/07/WcfRestUpdates"><Comments>' + document.getElementById("txtComment").value.toString() + '</Comments><Submitter>' + document.getElementById("txtSubmitter").value.toString() + '</Submitter></Eval>',
                    //data: jQuery.parseJSON('{"Comments":"This is test comment","Id":"1","Submitter":"Mayank","Timesent":"\/Date(928129800000+0530)\/"}'),
                    //ContentType:"application/json; charset=utf-8",
                    //dataType: "json",   
                    contentType: "application/xml",                   
                    dataType: "xml",   
                    success: getRecords,
                    error: function (xhr) {
                        if(xhr.status = 200) {
                            getRecords;
                        }
                        else{
                            alert("Error in POST:" + xhr.status.toString() + "and "+ xhr.responseText);                        
                            //var obj = jQuery.parseJSON('{"Comments":"This is test comment","Id":"1","Submitter":"Mayank","Timesent":"\/Date(928129800000+0530)\/"}');
                            //alert("Error in POST:");  
                            //alert("Error in POST:" + obj.Id);                        
                        }
                    }
                });        
    };

    //Add record function end

    //Get records function start
    getRecords = function() {
        jQuery.support.cors = true;
        $.ajax({
            type: "GET",
            url: wcfServiceUrl,
            data: "{}",            
            ContentType:"application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                //alert('success');
                //var resultText = "<div>";
                var divR = document.getElementById("divResult");
                //[{ "Comments": "this is my first comment", "Id": "1", "Submitter": "Mayank", "Timesent": "\/Date(1329473557750+0530)\/" }, { "Comments": "this is my first comment", "Id": "2", "Submitter": "Mayank", "Timesent": "\/Date(1329473813781+0530)\/"}]
                divR.innerHTML = '<div style="clear:both;width:7%;float:left;padding:5px;" class="sb">' + 'Id' + '</div>';
                divR.innerHTML += '<div style="width:15%;float:left;padding:5px;" class="sb">' + 'Submitter' + '</div>';
                divR.innerHTML += '<div style="width:40%;float:left;padding:5px;" class="sb">' + 'Comments' + '</div>';
                divR.innerHTML += '<div style="width:20%;float:left;padding:5px;" class="sb">' + 'Date/Time' + '</div>';
                $.each(data, function (i, theItem) {

                    //var option = document.createElement("option");
                    //option.text = theItem.toString();
                    //option.value = theItem.toString();

                    try {
                        //alert('success add combo');
                        //combo.add(option, null); // Other browsers
                        var datetime = new Date(theItem.Timesent.match(/\d+/)[0] * 1);
                        divR.innerHTML += '<div style="clear:both;width:7%;float:left;padding:5px;" >' + theItem.Id.toString() + '</div>';
                        divR.innerHTML += '<div style="width:15%;float:left;padding:5px;" >' + theItem.Submitter.toString() + '</div>';
                        divR.innerHTML += '<div style="width:50%;float:left;padding:5px;" >' + theItem.Comments.toString() + '</div>';
                        divR.innerHTML += '<div style="width:20%;float:left;padding:5px;" >' + datetime.toDateString() + '</div>';
                    }
                    catch (error) {
                        alert('error found');
                        combo.add(option); // really old browser
                    }

                });
            },
            error: function (xhr) {
                        alert("Error in GET:" + xhr.responseText);
            }               
        });
    };
    //Get records function end
}) ();

I need to display result to div once POST submitted successfully. It works fine with FireFox. but with Safari, I need to refresh the browser to GET the POSTED data. “getRecords” function used to display data in div. which works fine in all browsers on page load. but it is not working as a part of ajax POST > successful.

Answer 1

$.ajax({
                type: "POST",
                url: wcfServiceUrl,
                //data: '<Eval xmlns="http://schemas.datacontract.org/2004/07/WcfRestUpdates"><Comments>' + document.getElementById("txtComment").value + '</Comments><Submitter>' + document.getElementById("txtSubmitter").value + '</Submitter></Eval>',
                data: '<Eval xmlns="http://schemas.datacontract.org/2004/07/WcfRestUpdates"><Comments>' + document.getElementById("comment").value + '</Comments><Submitter>' + document.getElementById("submitter").value + '</Submitter></Eval>',
                contentType: "text/xml",
                dataType: "xml",
                success: function (xhr) { getRecords(); },
                error: function (xhr) {
                            if(xhr.status = 200) {                            
                                getRecords();
                            }
                            else{
                                alert("Error while adding record with error-code:" + xhr.status.toString() + "and "+ xhr.responseText);                                                   
                            }
                        }

            });

Improper calling of function “getRecord” in ajax “POST” success. Used “function (xhr) { getRecords(); }” instead of “getRecord” and it works!!