We Keep Coding

Client Side Taxonomy Picker For SharePoint

On Premise SharePoint 2013, Implementing a Client Side Taxonomy Picker For SharePoint using below blogs:
https://www.c-sharpcorner.com/UploadFile/93cb27/client-side-taxonomy-picker-for-sharepoint-app/
https://blogs.msdn.microsoft.com/richard_dizeregas_blog/2014/03/13/taxonomy-picker-in-sharepoint-provider-hosted-app/
Added the code using a Script Editor, and the control shows only on Edit Mode - when I save the page, the control disappears and throws the following error "b.get_path is not a function"
Tried many combinations however it looks like a bug as the same code works fine in SharePoint Online.
<link href="https://server/sites/TeamSite/SiteAssets/CodeLibrary/styles/taxonomypickercontrol.css" rel="stylesheet"/>
<script type="text/ecmascript" src="https://server/sites/TeamSite/SiteAssets/CodeLibrary/jquery-1.9.1.js"></script>
<script type="text/ecmascript" src="https://server/sites/TeamSite/SiteAssets/CodeLibrary/taxonomypickercontrol.js"></script>
<script type = "text/javascript" src = "https://server/sites/TeamSite/SiteAssets/CodeLibrary/taxonomypickercontrol_resources.en.js"></script>
<script type = "text/javascript" src = "https://server/sites/TeamSite/_layouts/15/sp.core.js" ></script>
<script type = "text/javascript" src = "https://server/sites/TeamSite/_layouts/15/sp.runtime.js" ></script>
<script type = "text/javascript" src = "https://server/sites/TeamSite/_layouts/15/sp.taxonomy.js" ></script>
<script type = "text/javascript">
if (myStronglyTypedObj === undefined) {
var myStronglyTypedObj = {};
}
myStronglyTypedObj = {
// Object Globals
"g": {},
// Pre-initialization functions ensure scripts SharePoint dependencies are loaded
"preinit": function() {
// Load necessary libraries
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
// Register what you need from SharePoint (in this case the sp.runtime)
SP.SOD.registerSod('sp.runtime.js', SP.Utilities.Utility.getLayoutsPageUrl('sp.runtime.js'));
// Register what you need from SharePoint (in this case the term store)
SP.SOD.registerSod('sp.taxonomy.js', SP.Utilities.Utility.getLayoutsPageUrl('sp.taxonomy.js'));
// Load the registered items
SP.SOD.executeFunc('sp.taxonomy.js', 'SP.Taxonomy.TaxonomySession', myStronglyTypedObj.init());
});
},
// The main Initialization function
"init": function() {
/* Check if SP.Taxonomy actually exists yet
* PLEASE NOTE that it's common that these objects aren't available, even if you've properly loaded them in the "preinit" function.
* This bit of code checks if the object is available, and if it's not, waits for 200ms and then tries again until this object is loaded
*/
if (SP.Taxonomy) {
console.log("SP.Taxonomy ready... continuing scripts...");
myStronglyTypedObj.therest();
} else {
console.log("SP.Taxonomy not ready... set timeout and try again after 200ms");
setTimeout(myStronglyTypedObj.init, 200);
}
},
"therest": function() {
// Continue with your code here...
try {
var context = new SP.ClientContext()
$('#taxPickerKeywords').taxpicker({ isMulti: true, allowFillIn: true, termSetId: "63858201-dd9b-46b1-b1bb-b6a054fa7cb7" }, context);
}
catch(err) {
alert(err.message);
}
}
}
$(document).ready(function(){
myStronglyTypedObj.preinit();
});
</script>
<div>
<input type="hidden" id="taxPickerKeywords" />
</div>

As stated it works in SharePoint Online, though I checked the version of our Farm and it seems that our dev box was not up to date.
After patching, it worked fine.
Thanks for your valuable help.

Run javascript function on loaded page

Very new to Javascript, so working on my first project. Attempting to run a script that gathers listing numbers, opens them in a URL and clicks an element on the loaded page. I can't get .click() to run on the resulting loaded page.
I've tried to set the logIn function to only run once the resulting page has loaded, but it doesn't seem to be doing the trick. AM I missing something basic?
var listingNum = prompt("Listing numbers").split(" ");
logIn = function(){
if(document.readyState === "complete"){
document.getElementById('SignInAsMemberLinkHeader').click();
}
};
for(i = 0; i < listingNum.length; i++){
window.open("http://www.website.com" + listingNum[i],"_self");
setInterval(logIn(), 4000);
};

Okay, the following test harness worked for me. I had to change your _self reference to _blank, so that each page loads separately and doesn't overwrite the operation of the parent page. You then just handle the load event of each window that is instantiated using window.open(). This was the part you were missing. You weren't handling the load events of the loaded windows.
You may wish to check that the SignInAsMemberLinkHeader element exists prior to calling click() on it, but I'll leave that up to you to implement.
NB this will not work if cross site scripting restrictions apply.
Hope this helps :)
<!DOCTYPE HTML>
<html>
<head>
<title>External Page Opener Test</title>
<meta charset="UTF-8">
<style>
body {
background-color:cornflowerblue;
color:white;
font-family:Tahoma,Arial,sans-serif;
}
</style>
<script>
window.addEventListener('load', init, false);
function init(event) {
var listings = prompt("Listing numbers:");
if (listings) {
var listingNum = listings.split(" ");
for (i = 0; i < listingNum.length; i++) {
// I used my local desktop and 3 test HTML files,
//each with a button click and handler on them.
var url = "file:///C:/Users/******/Desktop/" + listingNum[i];
var handle = window.open(url, "_blank");
handle.addEventListener('load', extPageLoaded, false);
}
} else {
console.log('No listings were entered.');
}
}
function extPageLoaded(event) {
const TIME_TO_WAIT_IN_MILLISECONDS = 4000;
setTimeout(
function() {
event.target.getElementById('SignInAsMemberLinkHeader').click();
},
TIME_TO_WAIT_IN_MILLISECONDS
);
}
</script>
</head>
<body>
</body>
</html>

Trigger a script

I've a script (an ads one) and I'd like to to trigger him out only when a button on my site has been clicked for X times.
<script type="text/javascript" src="ADS_URL"></script>
Let's assume this is my script. This is what I've done to find when the button has been clicked 5 times, but after it I'm blocked. I don't know how to trigger the script out.
Where should I paste the script? Thank you for the help!
$("#button").click(function() {
nclick++;
if (nclick == 7) {
nclick = 0;
// Make something
};
});

The following code works fine for me:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
"use strict";
var nclick = 0;
$(document).ready(function() {
// ===== START OF QUESTION CODE =====
$("#button").click(function() {
nclick++;
if (nclick == 7) {
nclick = 0;
alert("Pretend that this is an ad.");
}
});
// ===== END OF QUESTION CODE =====
});
</script>
</head>
<body>
<a id="button" href="#">Click me!</a>
</body>
</html>
If your code is not running:
Check the browser console. Are there any errors?
Is jQuery included on your page?
Are you attaching the #button function when the page is ready? You might be attempting to add an event before the button is created.
Have you declared an nclick variable and initialised it to zero?
EDIT
Okay, the question has now been clarified - the ad script appears as soon as the page is loaded, but you want to delay it until a button has been clicked 7 times. The solution is basically the same as the above, though:
ads.js
alert("hello, world!");
example.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
"use strict";
var nclick = 0;
var ad_script = null;
$(document).ready(function() {
// ===== START OF QUESTION CODE =====
$("#button").click(function() {
nclick++;
if (nclick == 7) {
nclick = 0;
ad_script = document.body.appendChild(document.createElement("script"));
ad_script.src = "ads.js"
}
else if (ad_script)
{
document.body.removeChild(ad_script);
ad_script = null;
}
});
// ===== END OF QUESTION CODE =====
});
</script>
</head>
<body>
<a id="button" href="#">Click me!</a>
</body>
</html>
Simply add the script into the page once the counter reaches 7.

create script tag & remove script tag
cScript();
var nclick=0;
$("#button").click(function() {
nclick++;
if (nclick == 7) {
rScript();
nclick = 0;
// Make something
};
});
function cScript(){
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'ADS_URL';
$("#someElement").append( script );
}
function rScript(){
var html = $("#someElement");
html.find('script').remove();
}

If i understood you correctly your JQuery event is not getting executed?
You need to add the JQuery's source first:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js? ver=1.4.2"></script>
<script type="text/javascript" src="ADS_URL"></script>
</head>
If you don't have the source for JQuery included it won't know what you mean. with $("#button").click

Calling functions from different javascript files causing "undefined is not a function"

I'm trying to make some small changes to an existing vb.net website that was written by someone who no longer works for the company, but every time a javascript function is called from a script file other than the one it's defined in, I see "Uncaught Reference Error: undefined is not a function" in Chrome's console.
Some of the scripts are being loaded in the master file:
<script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
<script type='text/javascript' src="Scripts/JSExtensions.js"></script>
<script type='text/javascript' src="Scripts/GlobalUtilityFunctions.js"></script>
<script language="javascript" type="text/javascript">
jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);
function resizeFrame() {
}
</script>
And the rest are loaded in the page itself:
<script type='text/javascript' src="Scripts/GridCalcFunctions.js"></script>
<script type='text/javascript' src="Scripts/InputEventHandlers.js"></script>
<script type='text/javascript' src="Scripts/FocusHandlers.js"></script>
<script type='text/javascript' src="Scripts/ProjectPageFunctions.js"></script>
<script type="text/javascript">
$(document).ready(function () {
});
$(window).unload(function () {
SaveOnExit();
});
function setPIDNumberLabel(ctlID, strVal) {
var val = strVal;
var ctl = top.$get(ctlID);
if (ctl != null) {
ctl.innerHTML = val;
}
}
</script>
GlobalUtilitesFunctions has no trouble accessing JSExtensions on other pages, but does here even though both are loaded in the master. I thought that must mean that the problem is caused by one of the files loaded on this page, but commenting them all out doesn't fix the issue.
As a specific example, GlobalUtilitiesFunctions contains this:
function GetAttributeSelector(attName, attValue, attOperator,attNot) {
attOperator = String.deNullValue(attOperator, "=");
[more code]
}
And I get an error that String.deNullValue is undefined, but over in JSExtenstions is:
String.iifValueIsNullOrEmpty = function (val, trueVal,falseVal) {
falseVal = String.getArgValue(falseVal, val);
if (String.isNullOrEmpty(val)) {
return trueVal;
}
else {
return falseVal;
}
}
String.deNullValue = function (val,defaultVal) {
var ret = "";
defaultVal = String.iifValueIsNullOrEmpty(defaultVal,"");
ret = String.iifValueIsNullOrEmpty(val,defaultVal);
return ret;
}
I've also tried running the site on a server (instead of inside Visual Studio) without solving the problem. Does anyone have an idea what might be causing this?

Here you can see this:
"A variable declared (using var) within a JavaScript function becomes LOCAL to the function.
The variable gets a local scope: It can only be accessed from within that function."
try to define functions like
function deNullValue(val,defaultVal) {
var ret = "";
defaultVal = String.iifValueIsNullOrEmpty(defaultVal,"");
ret = String.iifValueIsNullOrEmpty(val,defaultVal);
return ret;
}

the value is not inserting into the textbox, it was working two days ago?

<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function insertParamIntoField(anchor, param, field) {
var query = anchor.search.substring(1, anchor.search.length).split('&');
for(var i = 0, kv; i < query.length; i++) {
kv = query[i].split('=', 2);
if (kv[0] == param) {
field.val(kv[1]);
return;
}
}
}
$(function () {
$("a.reply").click(function (e) {
console.log("clicked");
insertParamIntoField(this, "replyto", $("textarea"));
e.preventDefault();
return false; // prevent default action
});
});
</script>
</head>
<body>
<textarea></textarea>
<a class="reply" href="?replyto=you">TEST</a>
</body>
</html>
what im trying to is when i click the link, the replyto parameter is inserted into the textarea, in this example "you"it was working 2 days ago! i dnt know whats wrong

Edit: I falsely assumed you were using firebug, from comments I see you weren't and that installing it resolved your issue. This line:
console.log("clicked");
Will blow up if firebug isn't installed and always in IE, when testing in an environment without a console, be sure to remove any calls to it...it'll throw a JavaScript error otherwise.

Is your internet connection working ok? You're using jQuery from google API, so what happens if you reference a local version?
Also, what happens when you click: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?