var innerHtml = $(detail24).html();
var replacementHtml = "<select id=";
replacementHtml = replacementHtml + $(innerHtml).find('INPUT').attr('id');
replacementHtml = replacementHtml + " name=";
replacementHtml = replacementHtml + $(innerHtml).find('INPUT').attr('name');
replacementHtml = replacementHtml + "><option value=''>--make a selection--</option>
</select>"
$(detail24).html(replacementHtml);
retrieveVisnItems();
In the first line of code above, I the scrape the contents out of a table detail. If I were to put the HTML to the screen with a JavaScript alert it would look like so:
In the next few lines of code I then make a select list with the same id and name as the text input in the blob of html I scraped. I next replace the contents of the table detail I scraped with the html for my select list. The last line is retrieveVisnItems(); which will allow me to reach into a different SharePoint SPWeb (assuming I have appropriate permissions) and grab the contents of a list there to populate my own select list with content from this somewhat external source.
function retrieveVisnItems() {
var clientContext = new SP.ClientContext('/sites/whatever');
var oList = clientContext.get_web().get_lists().getByTitle('VISN');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query></Query></View>');
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this,
this.onVisnQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onVisnQuerySucceeded(sender, args) {
var formtablerows = $(".ms-formtable").attr('rows');
var localeselect = $(formtablerows[24]).find('select:first');
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
$(localeselect).append($('<option>
</option>').val(oListItem.get_item('VISN')).html(
oListItem.get_item('VISN') + " " + oListItem.get_item('FriendlyName')));
}
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
This is a way of changing a SharePoint form field with jQuery. In this example I change a number type field (input type=text) to a select list to constrain the possible numbers entered to those in a list in another source. I have to scrape the id and name of the input I wish to reshape (replace) because it will vary from deployment to deployment as SharePoint is like that. Note that it is easy to fish for attributes within a string holding HTML with jQuery. I was no effort at all to get at what I wanted.
In another place in code I make sure that a user cannot submit the form without picking something other than the default value from the select list I made:
if($(locationselection+":selected").text().indexOf("make a selection") >= 0)
{
emptyIfAllIsWell = donotreturnemptystring(emptyIfAllIsWell, "You must specify a
Location Number!");
}
I tried to solve this same problem before by making a select list next to the number field which I planned to hide and then to populate a value into the number field whenever the select list changed. ...Too much work and I couldn't get it working. I also thought to just use a lookup or other canned drop down list in SharePoint but then the values I added from an external source wouldn't jive with what SharePoint expected the possibilities to be.
No comments:
Post a Comment