Retrieve List Items Using JavaScript gives unexpected response from server

Question

I'm extremely new to SharePoint and was recently experimenting with the client side object model. I've used one of MSDNS examples. however, I seem to be getting this error response :

"request failed. Unexpected Response from server.The status code of the response is '0'. The status text of the response is null"

Here is the sample of the code I've used:

    function retrieveListItems() {
        var siteUrl = '/personal/amgu/workspace/music/'; // music is a site within a site.
        var clientContext = new SP.ClientContext.get_current();
        var oList = clientContext.get_web().get_lists().getByTitle('Music');

        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'Title\'/>' + 
            '<Value Type=\'Text\'>'+Title+'</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');  // trying to query using the title name which is unique and I've retrieved and stored  it in a variable called title.
        this.collListItem = oList.getItems(camlQuery);

        clientContext.load(collListItem);

        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

    }

    function onQuerySucceeded(sender, args) {

        var listItemInfo = '';

        var listItemEnumerator = collListItem.getEnumerator();

        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();
            listItemInfo += '\nID: ' + oListItem.get_id() +
                '\nTitle: ' + oListItem.get_item('Title') +
                '\Votes: ' + oListItem.get_item('Votes'); // this is another column to which i actually want to make an increment after getting the previous value first
        }

        alert(listItemInfo.toString());
    }

    function onQueryFailed(sender, args) {

        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }

Please tell me is there something wrong with my CAML query?

Note: 1.)the function is being triggered via a button click, Bound to it via jquery bind.

2.) Also happened to notice this in the Console as soon as i click the button:

NS_ERROR_NOT_AVAILABLE: prompt aborted by user     ....    nsPrompter.js
(this error comes immediately after clicking)

Would really appreciate it if someone could throw some light onto the matter hehe.

3.) removed the CAML query function from the code and then tried . Still gave the same error

4.)BUTTON MARKUP:

I've plugged in the vote up and vote down buttons inside the web part title

     $("#WebPartTitleWPQ3").html(Title + ".mp3 : By " + Artist + "&nbsp&nbsp (" + Votes + " votes) ").css("font-size", "20px").append("<button  id='voteBtnUp' > Vote Up </button>&nbsp<button  id='voteBtnDn' > Vote Down </button>");

and the bound the click handler to them like this

 $('#voteBtnUp').bind("click", function () { voteOnClick(Title, "up"); });
         $('#voteBtnDn').bind("click", function () { voteOnClick(Title, "Dn"); });

voteOnClick si simply calling the retrieveListItems() functions for now. haven't used the arguments for anything

Also, tried using get_web() instead while creating the client context, still not working

Answer 1

Change the button markup from

<button  id='voteBtnUp' > Vote Up </button>
<button  id='voteBtnDn' > Vote Down </button>

to

<input type="button" id="voteBtnUp" value="Vote Up"></input>
<input type="button" id="voteBtnDown" value="Vote Down"></input>

Answer 2

If you are using SP 2013, I recommend to take advantage of REST API and make your life easier

var url = _spPageContextInfo.webAbsoluteUrl+ "/_api/Web/Lists/GetByTitle('music')/items?$top=10&$filter=Title Ge '" + Title + "'";
$.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                headers: {
                    Accept: "application/json;odata=verbose"
                }
            }).done(function(data){
var res = data.d.results;
//Do your stuff....
});

Also you can fine tune query to odata select query options http://www.odata.org/documentation/odata-version-2-0/uri-conventions/

Answer 3

The culprit is the SharePoint 2013 MDS feature. I am on mobile at the moment so cannot provide any links but you can google about this MDS.

You try to turn it off at site features : minimum download strategy and then let me know if same issue is present.

This feature is supposed to make life easy and it does so when using the ootb solutions. But it creates a mess when using custom js code solutions.

I have answered this question only looking at the strange error message which does not give any constructive info to developers. And I got stuck on such error for whole day before discovering MDS was culprit.

Good luck

Links:

The correct way to execute JavaScript functions in SharePoint 2013 MDS enabled sites

http://www.greggalipeau.com/2013/09/18/sharepoint-2013-dynamic-javascript-and-minimal-downloads-the-_layouts15start-aspx-conundrum/

Answer 4

Try changing var listItemEnumerator = this.collListItem.getEnumerator();

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var listItemEnumerator = this.collListItem.getEnumerator();
    ....
}

And your camlQuery looks more or less fine.

Answer 5

Yes Here we can go with button tag but we need to write below lines of code to prevent its default action and we can call our own function on click.

No need to change to input type="bytton" tag

 $("button").click(function (event) {
        event.preventDefault();
    });

put this somewhere in

$(document).ready(function()
{
});

It will work as expected.