error: ajax XML http request

Question

User-1952516322 posted

hello,

I have a calendar, if I click on any date the my context menu show successfully, but when I click on the list of context menu I call a ajax method for call services.

I try the same code without any different Its work fine, but in this new project it doesn't? I don't know what is that mean [object XMLHttpRequest]

this is my code on two project

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"type="text/javascript"></script>

        <script src="assets/js/jquery-ui.custom.min.js" type="text/javascript"></script>
        <!-- ace scripts -->
        <script src="assets/js/ace-elements.min.js" type="text/javascript"></script>
        <script src="assets/js/ace.min.js"></script>
        <!-- inline scripts related to this page -->
        
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    
        
        <script type="text/javascript">

            $(document).ready(function () {
                window.onclick = hideContextMenu;
                window.onkeydown = listenKeys;
            });

            var contextMenu = document.getElementById('contextMenu');
            var myUpdatePanel = '<%=upAttendance.ClientID %>';
            function listenKeys(event) {
                var keyCode = event.which || event.keyCode;
                if (keyCode == 27) {
                    hideContextMenu();
                }
            }

            function hideContextMenu() {
                contextMenu.style.display = 'none';
            }

            function showContextMenu(event, selectedDate) {
                contextMenu.style.display = 'block';
                contextMenu.style.left = event.clientX + 'px';
                contextMenu.style.top = event.clientY + 'px';
                $('#hdv_date').val(selectedDate);
                return false;
            }

            function absentClick() {
                $.ajax({
                    url: 'Attendance.asmx/Attendance_Insert',
                    data: "{'date':'" + $('#hdvDate').val() + "','type':'1','studentID':'" + $('#hdvStudentID').val() + "','createdBy':'" + $('#hdvCreatedBy').val() + "'}",
                    contentType: "application/json;charset=utf-8",
                    type: "post",
                    success: function () {
                        if (myUpdatePanel != null) {
                            __doPostBack(myUpdatePanel, '');
                        }
                    },
                    error: function (error) {
                        alert(error);
                    }
                });
                return false;
            }

//// Day Render

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
        {
            string method = "return showContextMenu(event,'" + e.Day.Date.ToShortDateString() + "')";
            e.Cell.Attributes.Add("oncontextmenu", method);
        }

Answer 1

User-1838255255 posted

Hi Khalid Salameh,

I make a sample to test, I found it run perfect. So I have some suggestions to you:

1. if you want to use server side control in jQuery. Please add this line.

function OnSuccess() {
            debugger;
            var UpdatePanel1 = '<%=UpdatePanel1.ClientID%>';
            if (UpdatePanel1 != null) {
                __doPostBack(UpdatePanel1, '');
            }

2.  Debugger your Ajax, check it trigger which function, success or error function.  

3. if it trigger error function, please add breakpoint in your WebService function, check which line code caused this error.  

Best Regards,

Eric Du

Answer 2

User-1952516322 posted

Eric Du Thank you for your response and your interest

I try debugger, but the compiler going successfully into the function "absentClick()", but doesn't enter into the $.ajax?? it is going direct to last function >> which is ( return false; ).. !! why? 

function absentClick() {
                debugger;
                $.ajax({
                    url: 'Attendance.asmx/Attendance_Insert',
                    data: "{'date':'" + $('#hdvDate').val() + "','type':'1','studentID':'" + $('#hdvStudentID').val() + "','createdBy':'" + $('#hdvCreatedBy').val() + "'}",
                    contentType: "application/json;charset=utf-8",
                    type: "post",
                    success: function () {
                        if (myUpdatePanel != null) {
                            __doPostBack(myUpdatePanel, '');
                        }
                    },
                    error: function (error) {
                        alert(error);
                    }
                });
                return false;
            }

Answer 3

User-1838255255 posted

Hi Khalid Salameh,

OK, I guess you press F10 to debug your code, because $.ajax({ }) is a function, only need once press to skip, so I suggest you modify your code like this:

Sample code:

success: function() {
                    alert("success!");
                },

                failure: function() {
                    alert("fail!");
                }

this code will help you check request success or fail.

if it alerts fail, please add break point in your web service function, check which line code caused this error.

Best Regards,

Eric Du

Answer 4

User-1952516322 posted

I tried as you said, and I added a break point on a web service, but the compiler doesn't enter on it. just I have an error ("fail!");

and when I set this line as comment 

<%-- <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>--%>

I have error [object object]

Answer 5

User-1952516322 posted

Thank you very much Mr. Eric Du,, Its work fine 

Answer 6

User-1838255255 posted

Hi Khalid Salameh,

I am very glad to hear you have solved your problem, I hope you could post your solution and mark it as answer, it will help more people who meet the same problem as you!

Best Regards,

Eric Du