Reload GetListItems on Form Change

Jan 28, 2014 at 3:36 PM
HI All, i am trying to reload/replace my '#Querycontent' Divide when an field on my form changes. So that if i user changes either the 'Document Type' or the 'Discipline' Select fields the GetListItems will automatically reload to Query the field changes.

My problem is that using the append command, whenever i change a dropdown fields the #QueryContent divide just keeps appending to the same divide.
$("#Querycontent").append(liHtml);
I have tried using '.html' instead of '.append' but when i do this only 1 record from the query shows.

Any ideas?
$('form :input').change(function() {
        var DocumentType = $("option:selected", $("select[title='Document Type']")).text();
        var Discipline = $("option:selected", $("select[title='Discipline']")).text();
        var SeqNo = $("input[title='Sequence No']").val();
        var PAWONo = $("input[title='PO / WO Number']").val();
    
        $("input[title='Document No']").val("MP0041" + '-' + PAWONo + '-' + Discipline + '-' + DocumentType + '-' + SeqNo);
        
        $().SPServices({
            operation: "GetListItems",
            async: false,
            listName: "Vendor Register",
            CAMLViewFields: "<ViewFields><FieldRef Name='DocumentNo' /><FieldRef Name='View_x0020_Item' /></ViewFields>",
            CAMLRowLimit: 5,
            CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='Discipline'/><Value Type='Text'>" + Discipline + "</Value></Eq><Eq><FieldRef Name='DocumentType'/><Value Type='Text'>" + DocumentType + "</Value></Eq></And></Where><OrderBy><FieldRef Name='Created' Ascending='FALSE' /></OrderBy></Query>",
            completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
            var DocNo = ($(this).attr("ows_DocumentNo"));
            var href = ($(this).attr("ows_View_x0020_Item")).split(",")[0];
            var liHtml = "<li><a href='"+ href +"' target='_blank'>" + DocNo + "</a></li>"; 
            $("#Querycontent").append(liHtml);
            });
            }
        });
    });
Jan 28, 2014 at 4:27 PM
  • What type of element is #Querycontent?
  • Are you trying to replace all of the content of the #Querycontent with new stuff? or append more values to it?
Given that you are trying to append bullet list items (<li>) I assume it is a order/unordered element (<ol> or an <ul>)... If not, then you are output invalid markup...

Try this:

Replace the entire content (I'm assuming #Querycontent is a <ul> or <ol>):
var $Querycontent   = $("#Querycontent");
var liHtml          = "";

// Build all new values
$(xData.responseXML).SPFilterNode("z:row").each(function() {
    var DocNo = ($(this).attr("ows_DocumentNo"));
    var href = ($(this).attr("ows_View_x0020_Item")).split(",")[0];
    liHtml += "<li><a href='"+ href +"' target='_blank'>" + DocNo + "</a></li>"; 
});


// CLear all existing values and Append new values to the List
$Querycontent.empty().append(liHtml);
/Paul.
Jan 28, 2014 at 8:51 PM
Hi Paul, Yes #QueryContent is a <UL>
<ul style="list-style-type:none;" id="Querycontent"><li></li></ul>
I am trying to replace the <li> values within the #Querycontent <ul> when the form fields change, when i do this at the moment it only returns one value.

I tried to add your code, but had some issues, i wasn't sure about the 'liHtml +=' and the 'var $Querycontent'.

Here is what i have got now:
    $('form :input').change(function() {
        var DocumentID = $('#ctl00_m_g_a98b84c2_da23_4861_aba3_de78ad6ca2fb_ff16_1').val();
        var DocumentType = $("option:selected", $("select[title='Document Type']")).text();
        var Discipline = $("option:selected", $("select[title='Discipline']")).text();
        var SeqNo = $("input[title='Sequence No']").val();
        var PAWONo = $("input[title='PO / WO Number']").val();

        $("input[title='Document No']").val("MP0041" + '-' + PAWONo + '-' + Discipline + '-' + DocumentType + '-' + SeqNo);
        
            var liHtml = "";
        
                $().SPServices({
                operation: "GetListItems",
                async: false,
                listName: "Vendor Register",
                CAMLViewFields: "<ViewFields><FieldRef Name='DocumentNo' /><FieldRef Name='View_x0020_Item' /></ViewFields>",
                CAMLRowLimit: 5,
                CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='Discipline'/><Value Type='Text'>" + Discipline + "</Value></Eq><Eq><FieldRef Name='DocumentType'/><Value Type='Text'>" + DocumentType + "</Value></Eq></And></Where><OrderBy><FieldRef Name='Created' Ascending='FALSE' /></OrderBy></Query>",
                completefunc: function (xData, Status) {
                $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var DocNo = ($(this).attr("ows_DocumentNo"));
                var href = ($(this).attr("ows_View_x0020_Item")).split(",")[0];
                var liHtml = "<li><a href='"+ href +"' target='_blank'>" + DocNo + "</a></li>";  
                $("#Querycontent").empty().append(liHtml);   
                });
                }
                });
    });
This Code only returns a single value when i change a form field.

Thanks,

Tucker
Jan 28, 2014 at 8:59 PM
Try this:
$('form :input').change(function() {
    
    var DocumentID = $('#ctl00_m_g_a98b84c2_da23_4861_aba3_de78ad6ca2fb_ff16_1').val();
    var DocumentType = $("option:selected", $("select[title='Document Type']")).text();
    var Discipline = $("option:selected", $("select[title='Discipline']")).text();
    var SeqNo = $("input[title='Sequence No']").val();
    var PAWONo = $("input[title='PO / WO Number']").val();

    $("input[title='Document No']").val("MP0041" + '-' + PAWONo + '-' + Discipline + '-' + DocumentType + '-' + SeqNo);
    
    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "Vendor Register",
        CAMLViewFields: "<ViewFields><FieldRef Name='DocumentNo' /><FieldRef Name='View_x0020_Item' /></ViewFields>",
        CAMLRowLimit: 5,
        CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='Discipline'/><Value Type='Text'>" + Discipline + "</Value></Eq><Eq><FieldRef Name='DocumentType'/><Value Type='Text'>" + DocumentType + "</Value></Eq></And></Where><OrderBy><FieldRef Name='Created' Ascending='FALSE' /></OrderBy></Query>",
        completefunc: function (xData, Status) {
            
            var liHtml = "";
            
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
            
                var DocNo = ($(this).attr("ows_DocumentNo"));
                var href = ($(this).attr("ows_View_x0020_Item")).split(",")[0];
                liHtml += "<li><a href='"+ href +"' target='_blank'>" + DocNo + "</a></li>";  
                
            });
            
            $("#Querycontent").empty().append(liHtml);   
        }
    });
});
/Paul
Marked as answer by tuck411 on 1/28/2014 at 2:13 PM
Jan 28, 2014 at 9:13 PM
That works perfectly.

What was the problem? If you don't mind me asking.

Thank you.

Tucker
Jan 28, 2014 at 10:59 PM
Tucker,
Absolutely - and thank you for asking.. it shows that you not only want to get the solution but want to also understand a little more about what is/was going on... and improve your skills.

In looking back at your initial example, I think the issue there was that you were not emptying out the <ul> before appending items... I'm not quite sure why you were only seeing 1 item - in looking at your initial code, I would have through you would continue to see growing list of items (you kept appending)... If you were using .html() - then yes, you would see only the last item because .html() replaces the entire content of the #Querycontent with whatever you give it...

The key in what you were trying to do is emptying the <ul> only once and before you start to append new values to the <ul>. I think this might have been where you went wrong - you had the .empty() inside the loop (.each()), so you were emptying out the <ul> on every z:row iteration and thus erasing whatever was appended to it last.

So in my sample code I gave you a more efficient way to do that - basically:
  1. First we initiate a variable with blank string: var liHtml = "";
    We do this prior and outside to the .each() loop so that the variable is scoped correctly... Defining it outside of the .each() loop ensusre we can use it after the .each() loop when we are ready to insert it into the page.
  2. Then we loop through all of the z:row records and append the <li> html markup to the variable that was initiated outside the loop. That is what that liHtml += does.... it append the text to the existing value in liHtml
  3. After looping through all of the z:row's, we empty out the container (#Querycontent) and append the new values to it in 1 shot.
    (Tip: It's best to do your DOM inserts in 1 shot rather than one at a time - better performance).
Hope this helps... good luck with the project

/Paul
Jan 29, 2014 at 8:31 AM
Brilliant, thank you for your detailed description, it has helped me a lot.

Tucker