We have a big list in SharePoint 2010. I'm gonna query SharePoint 2010 list item in the web part based on country. I used CAML and JS. I have got errors in different browser"
Internet explorer says
"Object doesn't support property or method 'getElementsByTagNameNS'"
chrome says
"500 (Internal Server Error)".
Here is my Code:
<input type="text" style="width:350px" id="txtSearch" />
<input type="button" style=" font-size:15px;font-family:'Segoe UI
Light','Segoe UI','Segoe',Tahoma,Helvetica,Arial,sans-serif; background-
color:#0072C6; color:white" id="btnSearch" value="Search" onclick="return
search(); return false" />
<style>
.highlight {
background-color: #FFFF88;
}
</style>
<script type="text/javascript" src="https://.../SiteAssets/jquery-
1.12.4.min.js"></script>
<script type="text/javascript">
/*
*This is jQuery Highlight plugin to highlight the result text
*/
jQuery.extend({
highlight: function (node, re, nodeName, className) {
if (node.nodeType === 3) {
var match = node.data.match(re);
if (match) {
var highlight = document.createElement(nodeName || 'span');
highlight.className = className || 'highlight';
var wordNode = node.splitText(match.index);
wordNode.splitText(match[0].length);
var wordClone = wordNode.cloneNode(true);
highlight.appendChild(wordClone);
wordNode.parentNode.replaceChild(highlight, wordNode);
return 1; //skip added node in parent
}
} else if ((node.nodeType === 1 && node.childNodes) && // only element
nodes that have children
!/(script|style)/i.test(node.tagName) && // ignore script and
style nodes
!(node.tagName === nodeName.toUpperCase() && node.className ===
className)) { // skip if already highlighted
for (var i = 0; i < node.childNodes.length; i++) {
i += jQuery.highlight(node.childNodes[i], re, nodeName,
className);
}
}
return 0;
}
});
jQuery.fn.unhighlight = function (options) {
var settings = { className: 'highlight', element: 'span' };
jQuery.extend(settings, options);
return this.find(settings.element + "." + settings.className).each(function
() {
var parent = this.parentNode;
parent.replaceChild(this.firstChild, this);
parent.normalize();
}).end();
};
jQuery.fn.highlight = function (words, options) {
var settings = { className: 'highlight', element: 'span', caseSensitive:
false, wordsOnly: false };
jQuery.extend(settings, options);
if (words.constructor === String) {
words = [words];
}
words = jQuery.grep(words, function(word, i){
return word != '';
});
words = jQuery.map(words, function(word, i) {
return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
});
if (words.length == 0) { return this; };
var flag = settings.caseSensitive ? "" : "i";
var pattern = "(" + words.join("|") + ")";
if (settings.wordsOnly) {
pattern = "\\b" + pattern + "\\b";
}
var re = new RegExp(pattern, flag);
return this.each(function () {
jQuery.highlight(this, re, settings.element, settings.className);
});
};
</script>
<select id="CountryChoice">
<option selected value="Select" >Select</option>
<option value="Global/Other" >Global/Other</option>
<option value="A">A</option>
<option value="B" >B</option>
<option value="C">C</option>
<option value="D" >D</option>
<option value="E">E</option>
</select>
<script type="text/javascript">
function search()
{
var Countryqry= document.getElementById("CountryChoice").value;
$("#tasksUL").empty();
var qry= document.getElementById("txtSearch").value
var soapEnv =
"<soapenv:Envelope
xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems
xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>Project Inventory</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
<FieldRef Name='ID' /> \
<FieldRef Name='Modified' /> \
<FieldRef Name='Last Name' /> \
<FieldRef Name='First Name' /> \
<FieldRef Name='Age' /> \
<FieldRef Name='Country' /> \
</ViewFields> \
</viewFields> \
<query> \
<Query> \
<Where> \
<And> \
<Eq> \
<FieldRef Name='Country' /> \
<Value Type='Choice'>"+Countryqry+"</Value> \
</Eq> \
<Or> \
<Contains> \
<FieldRef Name='Title' /> \
<Value Type='Text'>"+qry+"</Value> \
</Contains> \
<Or> \
<Contains> \
<FieldRef Name='LastName' /> \
<Value Type='Text'>"+qry+"</Value> \
</Contains> \
<Or> \
<Contains> \
<FieldRef Name='First Name' /> \
<Value Type='Text'>"+qry+"</Value> \
</Contains> \
<Contains> \
<FieldRef Name='Age' /> \
<Value Type='Text'>"+qry+"</Value> \
</Contains> \
</Or> \
</Or> \
</Or> \
</And> \
</Where> \
</Query> \
</query> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
$.ajax({
url: "https://.../sb1/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
}
function processResult(xData, status) {
// show searching text and image when search button is clicked
var loadhtml="<div id='loading' class='ms-dlgLoadingTextDiv'><span
style='padding-top: 6px; padding-right: 10px;'><img width='24' height='24'
title='This animation indicates the operation is in progress. Click to
remove this animated image.' src='/_layouts/15/images/gears_anv4.gif?
rev=36'/></span><span class='ms-core-pageTitle ms-accentText'>Searching...
</span></div>";
//var totalRows = $(xData.responseXML).find("rs\\:data").attr("ItemCount");
var totalRows = getZRows(xData.responseXML);
if(totalRows=="0")
{
$("#loading").remove();
$("#tasksUL").before("<div id='loading' style='color:red;font-
size:15px'>No matching records found. Please refine your search.</div>");
return true;
}
$("#tasksUL").before(loadhtml);
$(xData.responseXML).find("z\\:row, row").each(function() {
F
// creating hyperlink for each item to display form of that list item
var lnk="<a href='https://ABC/Lists/Project%20Inventory/DispForm.aspx?ID=" +
$(this).attr('ows_ID') + "&source=https://ABC/SitePages/Home.aspx'>"+
$(this).attr("ows_Title") +"</a>";
var liHtml = "<li>"+ lnk+"</li>";
// 2 second delay and show searching text and image also highlight the
result with the searched keyword
setTimeout(function(){
$("#loading").remove();
$("#tasksUL").append(liHtml);
$("#tasksUL > li").highlight(document.getElementById("txtSearch").value);
}, 2000);
});
}
$(document).ready(function(){
// check if enter button is pressed and then search button clicked event is
called
$('#txtSearch').keypress(function(e){
if(e.keyCode==13)
{ $('#btnSearch').click();return false;}
});
});
</script>
<script type="text/javascript">
function getZRows(rXML) {
var rows;
var itemCount = $(rXML).find("rs\\:data").attr("ItemCount");
if (rXML.getElementsByTagName("z:row").length == 0 && itemCount ==
undefined) {
rows = rXML.getElementsByTagNameNS("*", "row");
} else {
rows = rXML.getElementsByTagName("z:row");
}
return rows.length;
}
</script>
<div id="search_result">
<ul id="tasksUL"/>
</div>
