SpServices getlistitmes to populate text boxs

Mar 27, 2012 at 6:23 PM

I am having issue with my code and if do not know why.

First script block works as expected and populates the drop down. Then when the user selects an item the second script should run and return the values to two text boxs. 1 for the program Id and 2 is the program type. Any help would be appreciated

<script type="text/javascript" src="http://sites2/spgwhkgd/SiteAssets/Jscript/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://sites2/spgwhkgd/SiteAssets/Jscript/jquery.SPServices-0.7.1a.js "></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $().SPServices({
                operation: "GetListItems",
                async: false,
                listName: "Project_Planning_Forms",
                CAMLViewFields: "<ViewFields><FieldRef Name='Concept_x0020_Program_x0020_Name'/></ViewFields>",
                //CAMLRowLimit: 0,
                completefunc: function (xData, Status) {
                alert(xData.responseText); // returns xml data

                    $(xData.responseXML).SPFilterNode("z:row").each(function () {
                        var selectHtml = "<option>" + $(this).attr("ows_Concept_x0020_Program_x0020_Name") + "</option>";
                        $("#tasksUL").append(selectHtml);
                    });
                }
            });
        });
    </script>
<script language="javascript" type="text/javascript">
    $("#tasksUL").change(function () {
        $().SPServices({
            operation: "GetListItems",
            async: false,
            listName: "Project_Planning_Forms",
            CAMLViewFields: "<ViewFields><FieldRef Name='Program_x0020_Type' /><FieldRef Name='ID' /></ViewFields>",
            CAMLQuery: "<Query><Where><Eq><FieldRef Name='Concept_x0020_Program_x0020_Name'/><Value Type='Number'>" + $("#tasksUL").val() + "</Value></Eq></Where></Query>",

            completefunc: function (xData, Status) {
               $(xData.responseXML).SPFilterNode("z:row").each(function () {
                    data = $(this).attr("ows_Program_x0020_Type");
                    var conceptid = "<input>" + $(this).attr("ows_ID") + "</input>"
                    $("#conceptprogamidtype").value(conceptid)
                    var programtypeq = "<input>" + $(this).attr("ows_Program_x0020_Type") + "</input>"
                    $("#programtype").value(programtypeq)
                    alert(liHtml);
                });
            }
        });
    });
</script>
<div>
<form action ="" >
Concept Program Name: <select id="tasksUL"> 
<option>Select....</option>
</select>
Concept Program Id  : <input id="conceptprogamid" type ="text"/> Program Type : <input id="programtype" type="text"/>
</form>
</div>

Coordinator
Mar 27, 2012 at 7:58 PM
Edited Mar 27, 2012 at 7:58 PM

What issue are you having? Have you tried debugging to make shre that you are getting the data back that you expect?

On a quick glance, you don't have the second block inside the $(document).ready(), so it's likely running before the select is populated.

M.

Mar 27, 2012 at 9:23 PM

I have tryied debugging it. The change event does not seem to fire on change. I tryied to bring the bottom section in to the $(Document).ready() but can now i am getting an expected ) at load and have no idea what u am missing. I am very new to this.  

Mar 27, 2012 at 10:15 PM

What are you trying to do (describe in non-code) :)

I see potential issue with your code (you're trying to insert a HTML input definition into the value of the <input> on the page), thus why I need to first understand what you are trying to do.

Also, like mark said: I would put all code inside the .ready() event function.

Paul.

Mar 27, 2012 at 10:21 PM

1 Populate a select control with the name of a document.

2 based on the selection populate the program id and program type they in the same list list as step one

3 Query and second list filtered by the program type

4 combine  the date form the first 3 steps as an array

5 load the arry records to a 3 list.

I am working on step 2

Mar 27, 2012 at 10:44 PM

The following should address your item 2 (copy and past it in):

<script type="text/javascript" src="http://sites2/spgwhkgd/SiteAssets/Jscript/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://sites2/spgwhkgd/SiteAssets/Jscript/jquery.SPServices-0.7.1a.js "></script>
    
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $().SPServices({
            operation: "GetListItems",
            async: false,
            listName: "Project_Planning_Forms",
            CAMLViewFields: "<ViewFields><FieldRef Name='Concept_x0020_Program_x0020_Name'/></ViewFields>",
            completefunc: function (xData, Status) {
                
                alert(xData.responseText); // returns xml data

                $(xData.responseXML).SPFilterNode("z:row").each(function(){
                    var selectHtml = "<option>" + $(this).attr("ows_Concept_x0020_Program_x0020_Name") + "</option>";
                    $("#tasksUL").append(selectHtml);
                });
            }
        });
        
        $("#tasksUL").change(function () {
            
            alert("Change event triggerd on select#tasksUL!\n" + 
                "Currently selected item: " + $("#tasksUL").val() );
            
            $().SPServices({
                operation: "GetListItems",
                async: false,
                listName: "Project_Planning_Forms",
                CAMLViewFields: "<ViewFields><FieldRef Name='Program_x0020_Type' /><FieldRef Name='ID' /></ViewFields>",
                CAMLQuery: "<Query><Where><Eq><FieldRef Name='Concept_x0020_Program_x0020_Name'/><Value Type='Number'>" + $("#tasksUL").val() + "</Value></Eq></Where></Query>",
                completefunc: function (xData, Status) {
                  // NOTE: if mulitple rows are returned from SP, your input fields
                  //       on the page will only display the value of the last one
                  //       that was looped through... 
                  $(xData.responseXML).SPFilterNode("z:row").each(function(){
                        $("#conceptprogamidtype").val($(this).attr("ows_ID"))
                        $("#programtype").val( $(this).attr("ows_Program_x0020_Type") );
                    });
                }
            });
        });
        
    });
</script>

<div>
    <form action ="" >
        Concept Program Name: 
        <select id="tasksUL"> 
            <option>Select....</option>
        </select>
        Concept Program Id  : <input id="conceptprogamid" type="text"/> 
        Program Type : <input id="programtype" type="text"/>
    </form>
</div>

I changed a few things, including your HTML (I found a few spaces that I'm not sure the browsers would interpret correctly) ... I think the major issue with your initial example is that 1) you tying to set the value of a Input field but using an invalid jQuery method (it should be .val())... 2) you're trying to insert HTML code as the value of your input field... according to your #2 item, it should be only the value of from the SP list.

I included a few alert()'s so that you can debug if any don't fire... You will also note that I included a js comment inside the .change() event...

Paul

Mar 30, 2012 at 3:19 AM

Thanks Paul this was a great help !

I have Step 4 working.  I am stuck now on Step 5 the submittion of the data to the Sharepoint list. I can not for the life of me get the the click fuction to fire

  $('#SubmitButton').click(function () {
            alert("Handler for .click() called.");

            var strTitle = " ";
            var strStartDate = " ";
            var strDueDate = " ";
            var strPercentComplete = " ";
            var strStatus = " ";
            var strPriority = " ";
            var strPredecessors = " ";
            var strDuration = " ";
            var strPType = " ";
            var strProgramname = " ";
            var strConceptID = " ";
            var strPhase = " ";

            $('#tabldata1 tr').each(function () {
                if ($(this).find("td").eq(0).html() != null) {
                    strTitle = $(this).find("td").eq(0).html();
                    alert(strTitle );
                    strStartDate = $(this).find("td").eq(1).html();
                    alert(strStartDate );
                    strDueDate = $(this).find("td").eq(2).html();
                    alert(strDueDate );
                    strPercentComplete = $(this).find("td").eq(3).html();
                    alert(strPercentComplete );
                    strStatus = $(this).find("td").eq(4).html();
                    alert(strStatus );
                    strPriority = $(this).find("td").eq(5).html();
                    alert(strPriority );
                    strPredecessors = $(this).find("td").eq(6).html();
                    alert(strPredecessors );
                    strDuration = $(this).find("td").eq(7).html();
                    alert(strDuration );
                    strPType = $(this).find("td").eq(8).html();
                    alert(strPType );
                    strProgramname = $(this).find("td").eq(9).html();
                    alert(strProgramname );
                    strConceptID = $(this).find("td").eq(10).html();
                    alert(strConceptID );
                    strPhase = $(this).find("td").eq(11).html();

                    CreateNewItem(strTitle, strStartDate, strDueDate, strPercentComplete, strStatus, strPriority, strPredecessors, strDuration, strPType, strProgramname, strConceptID, strPhase);
                }
            });
            alert('Data has been submitted.');


        }); 
 
 
function CreateNewItem(strTitle, strStartDate, strDueDate, strPercentComplete, strStatus, strPriority, strPredecessors, strDuration, strPType, strProgramname, strConceptID, strPhase) {
//alert('inside function');
    $().SPServices({
        operation: "UpdateListItems",
        async: false,
        batchCmd: "New",
        listName: "Timeline",
valuepairs: [["Title", strTitle],["PercentComplete", strPercentComplete],["Status", strStatus],["Priority", strPriority],["Predecessors", strPredecessors],["Duration", strDuration],["PType", strPType],["Program_Name", strProgramname],["Concept_ID", strConceptID],["Phase", strPhase]],    
    completefunc: function(xData, Status) {
          
        }
    });
}
</script>




<div>
    <form action ="" >
        Concept Program Name: 
        <select id="tasksUL"> 
            <option>Select....</option>
        </select>
        Concept Program Id  : <input id ="conceptprogamid" type="text"/> 
        Program Type : <input id ="programtype" type="text"/>
        <input id="SubmitButton" type="button" value="Create Timeline"/>
     <div id="tbldata" style ="display:none;" >&#160</div>
     </form>

 

Mar 30, 2012 at 6:12 PM

Is your

 $('#SubmitButton').click(function () 
inside the

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

?

Paul

 

 

Mar 30, 2012 at 7:09 PM
$(document).ready(function(){...})

I would guess so i am still in the same script tag that steps 1-4 are in.

Mar 30, 2012 at 7:13 PM

Paste your entire code so we can verify... although you can be in the same <script> tag, you could have place it outside of the .ready() callback function.

Paul

Mar 30, 2012 at 8:29 PM

Here is the complete code

<script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#DeleteButton").hide();
            $("#SubmitButton").hide();
            //Code to populate program/Concept Name dropdownlist  
          
            //alert(selectedProgramName);
            //alert( window.location.href );
            
       

                $().SPServices({
                operation: "GetListItems",
                async: false,
                listName: "Project_Planning_Forms",
                CAMLViewFields: "<ViewFields><FieldRef Name='Concept_x0020_Program_x0020_Name'/></ViewFields>",
                completefunc: function (xData, Status) {

                    //alert(xData.responseText); // returns xml data

                    $(xData.responseXML).SPFilterNode("z:row").each(function () {
                        conceptname = $(this).attr("ows_Concept_x0020_Program_x0020_Name")
                        var selectHtml = "<option>" + $(this).attr("ows_Concept_x0020_Program_x0020_Name") + "</option>";
                        $("#tasksUL").append(selectHtml);
                    });
                }
            });
            //End Code to populate program/Concept Name dropdownlist  
            //Code to populate the program id, Program Type 
            var conceptname = " "; //Global Concept Name Varible 
            var conceptid = " "; //Global Concept ID Varible 
            var programtype = " "; //Global Program Type Varible
            var itemCount = " ";
            $("#tasksUL").change(function () {
                $().SPServices({
                    operation: "GetListItems",
                    async: false,
                    listName: "Timeline",
                    CAMLViewFields: "<ViewFields><FieldRef Name='Program_Name'/></ViewFields>",
                    CAMLQuery: "<Query><Where><Eq><FieldRef Name='Program_Name'/><Value Type='text'>" + $("#tasksUL").val() + "</Value></Eq></Where></Query>",
                    completefunc: function (xData, Status) {
                        alert(xData.responseText); // returns xml data

                        var itemCount = parseFloat($(xData.responseXML).SPFilterNode("rs:data").attr("ItemCount"));
                        alert(itemCount)
                        if (itemCount == "0") {
                            alert(itemCount)
                            $("#SubmitButton").show();
                            //$("#DeleteButton").hide();
                        }
                        if (itemCount > "0") {
                            alert(itemCount)
                            $("#SubmitButton").hide();
                            $("#DeleteButton").show();
                        }
                        }
                });
               
               

                //alert("Change event triggerd on select#tasksUL!\n" +
                // "Currently selected item: " + $("#tasksUL").val());
                conceptname = $("#tasksUL").val();
                $().SPServices({
                    operation: "GetListItems",
                    async: false,
                    listName: "Project_Planning_Forms",
                    CAMLViewFields: "<ViewFields><FieldRef Name='Concept_x0020_Program_x0020_Name'/><FieldRef Name='Program_x0020_Type' /><FieldRef Name='ID' /></ViewFields>",
                    CAMLQuery: "<Query><Where><Eq><FieldRef Name='Concept_x0020_Program_x0020_Name'/><Value Type='text'>" + $("#tasksUL").val() + "</Value></Eq></Where></Query>",
                    completefunc: function (xData, Status) {

                        //alert(xData.responseText); // returns xml data
                        // NOTE: if mulitple rows are returned from SP, your input fields
                        //       on the page will only display the value of the last one
                        //       that was looped through... 
                        $(xData.responseXML).SPFilterNode("z:row").each(function () {
                            conceptid = $(this).attr("ows_ID");
                            programtype = $(this).attr("ows_Program_x0020_Type");
                            $("#conceptprogamid").val($(this).attr("ows_ID"));
                            $("#programtype").val($(this).attr("ows_Program_x0020_Type")); 
                            
                           // alert(conceptid);
                            //alert(programtype);
                            //alert(conceptname);
                        });

                    }
                });

                

                //Code to populate the Table Array
                var tablearray = " "; //Global table array Varible 
                $().SPServices({
                    operation: "GetListItems",
                    async: false,
                    listName: "Timeline_Task_Template",
                    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Phase' /><FieldRef Name='StartDate' /><FieldRef Name='DueDate' /><FieldRef Name='_x0025__x0020_Complete' /><FieldRef Name='Task_x0020_Status' /><FieldRef Name='Priority' /><FieldRef Name='Predecessors' /><FieldRef Name='Duration' /><FieldRef Name='Program_x0020_Type' /></ViewFields>",
                    CAMLQuery: "<Query><Where><Eq><FieldRef Name='Program_x0020_Type'/><Value Type='Text'>" + programtype + "</Value></Eq></Where></Query>",

                    completefunc: function (xData, Status) {
                        // alert(xData.responseText); // returns xml data
                        $(xData.responseXML).SPFilterNode("z:row").each(function () {
                            tablearray += "<tr><td>" + $(this).attr("ows_Phase") + "</td><td>" + $(this).attr("ows_Title") + "</td><td>" + $(this).attr("ows_StartDate") + "</td><td>" + $(this).attr("ows_DueDate") + "</td><td>" + $(this).attr("ows__x0025__x0020_Complete") + "</td><td>" + $(this).attr("ows_Task_x0020_Status") + "</td><td>" + $(this).attr("ows_Priority") + "</td><td>" + $(this).attr("ows_Predecessors") + "</td><td>" + $(this).attr("ows_Duration") + "</td><td>" + $(this).attr("ows_Program_x0020_Type") + "</td><td>" + conceptname + "</td><td>" + conceptid + "</td></tr>";


                        });
                        alert(tablearray)
                        $("#tbldata").html("<table><tr><th>Phase</th><th>Title</th><th>Start Date</th><th>Due Date</th><th>% Complete</th><th>Task Status</th><th>Priority</th><th>Predecessors</th><th>Duration</th><th>Program Type</th><th>Program Name</th><th>Concept ID</th></tr>" + tablearray + "</table>");


                    }

                });

            });
        });
        // End Code to populate the Table Array
        
        $('#SubmitButton').click(function () {
            alert("Handler for .click() called.");

            var strTitle = " ";
            var strStartDate = " ";
            var strDueDate = " ";
            var strPercentComplete = " ";
            var strStatus = " ";
            var strPriority = " ";
            var strPredecessors = " ";
            var strDuration = " ";
            var strPType = " ";
            var strProgramname = " ";
            var strConceptID = " ";
            var strPhase = " ";

            $('#tabldata1 tr').each(function () {
                if ($(this).find("td").eq(0).html() != null) {
                    strTitle = $(this).find("td").eq(0).html();
                    alert(strTitle );
                    strStartDate = $(this).find("td").eq(1).html();
                    alert(strStartDate );
                    strDueDate = $(this).find("td").eq(2).html();
                    alert(strDueDate );
                    strPercentComplete = $(this).find("td").eq(3).html();
                    alert(strPercentComplete );
                    strStatus = $(this).find("td").eq(4).html();
                    alert(strStatus );
                    strPriority = $(this).find("td").eq(5).html();
                    alert(strPriority );
                    strPredecessors = $(this).find("td").eq(6).html();
                    alert(strPredecessors );
                    strDuration = $(this).find("td").eq(7).html();
                    alert(strDuration );
                    strPType = $(this).find("td").eq(8).html();
                    alert(strPType );
                    strProgramname = $(this).find("td").eq(9).html();
                    alert(strProgramname );
                    strConceptID = $(this).find("td").eq(10).html();
                    alert(strConceptID );
                    strPhase = $(this).find("td").eq(11).html();

                    CreateNewItem(strTitle, strStartDate, strDueDate, strPercentComplete, strStatus, strPriority, strPredecessors, strDuration, strPType, strProgramname, strConceptID, strPhase);
                }
            });
            alert('Data has been submitted.');


        }); 
 
 
function CreateNewItem(strTitle, strStartDate, strDueDate, strPercentComplete, strStatus, strPriority, strPredecessors, strDuration, strPType, strProgramname, strConceptID, strPhase) {
//alert('inside function');
    $().SPServices({
        operation: "UpdateListItems",
        async: false,
        batchCmd: "New",
        listName: "Timeline",
valuepairs: [["Title", strTitle],["PercentComplete", strPercentComplete],["Status", strStatus],["Priority", strPriority],["Predecessors", strPredecessors],["Duration", strDuration],["PType", strPType],["Program_Name", strProgramname],["Concept_ID", strConceptID],["Phase", strPhase]],    
    completefunc: function(xData, Status) {
          
        }
    });
}
</script>




<div>
    <form action ="" >
        Concept Program Name: 
        <select id="tasksUL"> 
            <option>Select....</option>
        </select>
        Concept Program Id  : <input id ="conceptprogamid" type="text"/> 
        Program Type : <input id ="programtype" type="text"/>
        <input id="SubmitButton" type="button" value="Create Timeline"/>
        <input id="DeleteButton" type="button" value="Delete Timeline"/>
     <div id="tbldata" >&#160</div>
     </form>
Mar 30, 2012 at 8:35 PM

As I suspected from my prior post... your code is outside of the .ready() callback function... it needs to be moved up a few lines (looks like 3).

(TIP: not sure what editor you are using for doing your JS coding... I often use NOTEPAD++ which has color assist and indicators to show you were associated closing tags are found.. It may help you.).

Paul.

Mar 30, 2012 at 9:45 PM

I am using visual studios 2010 Pro. What you mean by three lines Up ?  Sorry i am really Green.

 

 

 

 

 

Mar 30, 2012 at 10:25 PM
Find the closing curly bracket from .ready(funtion(){}); and move your code that binds the click event on the button, to be inside that curly bracket... Example:
$(document).ready(function(){
<existing code>
<move the click() binding function here>
});

Good luck.
_________
Paul T, sent from mobile