locked
SPServices and DataTables, loading twice RRS feed

  • Question

  • I got this working, but my data is being loaded twice.

    Something here is causing this?

    This is what I have

     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css"> 
      <script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>  
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js'></script>
    <!-- <script src="https://www.datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script> -->
    <table id="example" class="display" cellspacing="0" width="100%">
    	<thead>
    		<tr>
    			<th>Title</th>
    			<th>More Information</th>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<th>Title</th>
    			<th>More Information</th>
    		</tr>
    	</tfoot>
    </table>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
    	<div class="modal-content">
    	  <div class="modal-body" id="modalBody">
    			 <div class="row">
    				<div class="col-md-6">
    				  Title
    				</div>
    				<div class="col-md-6" id="modalRowTitle">					  
    				</div>
    			  </div>
    			 <div class="row">
    				<div class="col-md-6">
    				  Responsible Body
    				</div>
    				<div class="col-md-6" id="modalRowBody">					  
    				</div>
    			  </div>
    			 <div class="row">
    				<div class="col-md-6">
    				  URL
    				</div>
    				<div class="col-md-6" id="modalRowURL">					  
    				</div>
    			  </div>				  
    	  </div>
    	  <div class="modal-footer">
    		<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
    		<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
    	  </div>
    	</div>
      </div>
    </div>	
    <script language="javascript" type="text/javascript">
    	var pageInitialized = false;
    	
    	jQuery(function($) {
    	if(pageInitialized) return;
    		pageInitialized = true;
    alert("a");
    		var myQuery = "<Query><OrderBy><FieldRef Name='Title' /></OrderBy></Query>";
    		$().SPServices
    		(
    			{
    				operation: "GetListItems",
    				async: false,
    				listName: "Studies",
    				webURL: "/",
    				CAMLQuery: myQuery,
    				CAMLRowLimit: 5,
    				completefunc: function (xData, Status) 
    				{
    					var liHtml ="<tbody>";
    					$(xData.responseXML).SPFilterNode("z:row").each(function() 
    					{
    						liHtml += " <tr><td>" + $(this).attr("ows_Title") + "</td><td><a href=\'#\' onclick=\'showDetails(\"" + $(this).attr("ows_ID") + "\");return false;\'>Details</a></td></tr>";
    					}
    				);
    				liHtml +="</tbody>";
    				$("#example").append(liHtml);
    				}
    			}
    		);
    		$('#example').DataTable
    		({
    			"dom": 'Rlfrtip'
    		});
    	});
    function showDetails(src)
    {		
    	jQuery.noConflict();
    	var title;
    	var body;
    	var URL;
    	var itemId = src;      
    	var myQuery = "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + itemId + "</Value></Eq></Where></Query>";
    	$().SPServices
    	(
    		{	
    		operation: "GetListItems",
    		async: false,
    		listName: "Plans",
    		webURL: "/",
    		CAMLQuery: myQuery,
    		CAMLRowLimit: 1,
    		completefunc: function (xData, Status) 
    		{
    			$(xData.responseXML).SPFilterNode("z:row").each(function() 
    			{
    					title = ($(this).attr('ows_Title')); 
    					body = ($(this).attr('ows_Responsible_x0020_Body')); 
    					URL = ($(this).attr('ows_URL'));				
    			}
    			);
    		} 
    		}
    	);
    	var n = URL.indexOf (",");
    	var NewURL = URL.substr(0,n);
    	NewURL = '<a href="' + NewURL + '" target=\'_blank\'>View</a>';
    	$('#modalRowTitle').html(title);		
    	$('#modalRowBody').html(body);
    	$('#modalRowURL').html(NewURL);
    	$('#exampleModal').modal('show'); 
    }
    
    </script>

    Thursday, February 8, 2018 4:23 PM

Answers

  • I figured out the issue.

    My web part was inside the content editor web part which SharePoint cannot handle it properly, once I added to web part zone it worked fine.

    • Marked as answer by CKMock Tuesday, March 6, 2018 6:45 PM
    Tuesday, March 6, 2018 6:45 PM

All replies

  • Hi,

    Firstly, please check the xData.responseXML returned, you can console.log it and then check with F12 developer tool to see if the data source is correctly:

    Then check the code for generating <tr> in the table and in the last, you also set html using Jquery, check this two points if there is data duplicated.

    A simple working demo for your reference:

    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <!--Datatable jquery + javascript + CSS files-->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://www.datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
    <!--SPServices Javascript-->
    <script type="text/javascript" src="../SiteAssets/jquery.SPServices-2014.02.js"></script>
    <script type="text/javascript" src="../SiteAssets/jquery.SPServices-2014.02.min.js"></script>
     
    <!--SpServices JavaScript get items from list 'files'-->
    <script language="javascript" type="text/javascript">
    $(document).ready(function() {
      var myQuery = 
           "<Query>" +
    			"<OrderBy>" +
    				"<FieldRef Name='Created On' />" +
    			"</OrderBy>" +
           "</Query>";
      $().SPServices({
        webUrl: "http://sp/sites/dev",
        operation: "GetListItems",
        async: false,
        listName: "JerryList0527",
        CAMLQuery: myQuery,
        CAMLRowLimit: 100,
        completefunc: function (xData, Status) {
    	
    	 var liHtml ="<tbody>";
          $(xData.responseXML).SPFilterNode("z:row").each(function() {
             console.log(xData.responseXML);
             liHtml =liHtml+ " <tr><td>" + $(this).attr("ows_Title") + "</td><td>" + $(this).attr("ows_Created") + "</td><td>" + $(this).attr("ows_ContentType") + "</td></tr>";
         
          });
    	   liHtml +="</tbody>";
    	  $("#example").append(liHtml);
        }
      });
      $('#example').DataTable( {
            "dom": 'Rlfrtip'
        } );
    });
    </script>
     
    <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
                <tr>
                    <th>Title</th>
                    <th>Created Time</th>
                    <th>Content Type</th>
                </tr>
    </thead>
     
               </table>
    

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Friday, February 9, 2018 6:49 AM
  • The demo you provided is doing the exactly same thing.

    its loading the data twice in the table.

    Friday, February 9, 2018 2:00 PM
  • Hi,

    In the demo I provide is work fine, the data only load once, please check the screen capture above.

    As I don't have your data struct and detailed data,a troubleshooting suggest you can debug your code in your side by checking the XML returned with Console.log() and see data bind in html.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Friday, February 9, 2018 2:16 PM
  • I am using the EXACT same code as your sample with exception of changing the list name.

    Is your page within a sharepoint page?

    I created a page and I am using the Content Editor Webpart and I am pointing to an html file that has the code.

    Friday, February 9, 2018 2:25 PM
  • Hi,

    Yes, this is SharePoint page.

    I embed the code under <PlaceHolderMain> tag using SharePoint Designer and it works, only load data once:

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Friday, February 9, 2018 3:39 PM
  • Very strange because it loads twice for me...I put an alert box in the code and the alert fires off twice?

    What is going on?

    Friday, February 9, 2018 4:16 PM
  • Hi,

    Did you add code snippet twice, as your alert is in document ready function and there is no something like loop, please check this point.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Monday, February 12, 2018 1:40 AM
  • The code is exactly as how it shown above.

    The alert box prompts twice.

    All the code is in an html file, that I link to using the content editor webpart.

    Monday, February 12, 2018 2:15 PM
  • Hi,

    Not really sure about your code issue, please set a break point and debug in browser console to see how the code execute in your side.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Monday, February 12, 2018 2:19 PM
  • I figured out the issue.

    My web part was inside the content editor web part which SharePoint cannot handle it properly, once I added to web part zone it worked fine.

    • Marked as answer by CKMock Tuesday, March 6, 2018 6:45 PM
    Tuesday, March 6, 2018 6:45 PM