Develop Reference

Adding Country FormHelper Bootstrap inside js not working

I am trying to add
<span class="bfh-countries" data-country="US" data-flags="true"></span>
inside my js script, but it does not show anything. If I add it in my HTML it works fine, but when I added in some several ways one of this is
var flag = document.createElement("span");
flag.setAttribute("class", "bfh-countries" );
flag.setAttribute("data-country", "US" );
flag.setAttribute("data-flags", "true" );
I think is possible that the css and js needed for data-countries are not loaded yet when this script is running, but both scripts are above this code.

you need to add your node to the body
document.body.append(flag)

I think you need to select your element.
Try this -
var flag = document.createElement("span");
var tag = document.getElementsByTagName("span");
tag.setAttribute("class", "bfh-countries" );
tag.setAttribute("data-country", "US" );
tag.setAttribute("data-flags", "true" );
Not tested, hope it will work.
Note that this technique will select all the span.

Check this working code.
function addNew() {
var flag = document.createElement("SPAN");
flag.setAttribute("class", "bfh-countries");
flag.setAttribute("data-country", "US");
flag.setAttribute("data-flags", "true");
document.getElementById('result').appendChild(flag);
$("form select.bfh-countries, span.bfh-countries, div.bfh-countries").each(function () {
var b;
b = $(this),
b.hasClass("bfh-selectbox") && b.bfhselectbox(b.data()),
b.bfhcountries(b.data())
})
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.min.js"></script>
<button onclick="addNew()">Add Flag</button>
<div id="result"></div>

Using a Javascript Date Selector in Qualtrics survey - carry date to the survey field

I'm trying to input a date selector tool so that a survey respondent can input a date by clicking on the field, a calendar will pop up, they can select the date, and the date will be inputted to the Qualtrics question text box.
Qualtrics has their own calendar tool available, but the issue is that the calendar is always visible. I only want the calendar to be visible when they either click the text box itself or a calendar icon (either would be fine). Here's the Qualtrics code:
Enter a date:
<link href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/calendar-min.js"></script> <script>
Qualtrics.SurveyEngine.addOnload(function ()
{
var qid = this.questionId;
var calid = qid + '_cal';
var y = QBuilder('div');
$(y).setStyle({clear:'both'});
var d = QBuilder('div',{className:'yui-skin-sam'},[
QBuilder('div', {id:calid}),
y
]);
var c = this.questionContainer;
c = $(c).down('.QuestionText');
c.appendChild(d);
var cal1 = new YAHOO.widget.Calendar(calid);
cal1.render();
var input = $('QR~' + qid);
$(input).setStyle({marginTop: '20px',width: '150px'});
var p =$(input).up();
var x = QBuilder('div');
$(x).setStyle({clear:'both'});
p.insert(x,{position:'before'});
cal1.selectEvent.subscribe(function(e,dates){
var date = dates[0][0];
if (date[1] < 10)
date[1] = '0' + date[1];
if (date[2] < 10)
date[2] = '0' + date[2];
input.value = date[1] +'-'+date[2]+'-'+date[0];
})
});
</script>
Here's the calendar tool that I'd like to use, but I can't figure out how to get the date to feed into the Qualtrics field text box.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Your problem is that in Qualtrics $ refers to prototypejs, not jQuery. So, you need to do something like:
$j = jQuery.noconflict();
$j( function() {
$j( "#datepicker" ).datepicker();
} );
However, that may not work if the datepicker code is itself using $ to refer to jQuery.
I've used https://github.com/joshsalverda/datepickr successfully with Qualtrics.
EDIT:
To implement datepickr in Quatrics:
Add datepickr script to Qualtrics header (you can upload the file to Qualtrics then get the url of the file to add to the header in a script tag)
Add datepickr CSS to Qualtrics custom CSS
Add JavaScript to your question to add datepickr to an input element (e.g., datepickr($(this.questionId).down('.InputText')), {dateFormat: 'm/d/Y'});

Add this JavaScript to the field to use a plain HTML date input (no jQuery required).
Qualtrics.SurveyEngine.addOnload(function() {
var textInputs = this.questionContainer.querySelectorAll('input[type="text"]');
if (typeof textInputs[0] !== 'undefined') {
textInputs[0].type = 'date';
}
});

Pretty Diff Usage

I want to use this fantastic Javascript Library on my little web project.
http://prettydiff.com/
I've downloaded PrettyDiff.js and ViewDiff.js
I've been researching on how to use it and I can't seem to find any examples on how to get the output for Javascript/Jquery
This is what I have so far.
<script xmlns="http://www.w3.org/1999/xhtml" type="application/javascript" src="prettydiff.js"></script>
<script xmlns="http://www.w3.org/1999/xhtml" type="application/javascript" src="diffview.js"></script>
<link xmlns="http://www.w3.org/1999/xhtml" href="diffview.css" media="all" rel="stylesheet" type="text/css" />
<script type="application/javascript">
$(document).ready(function () {
var pd = new prettydiff();
var dv = new diffview();
});
</script>
I have the two text areas and the button placed but I just don't seem to find the function to start the show.
Any documentation or code would be much appreciated.
Cheers

var str = "<html><body><h1>hello</h1></body><html>";
// Options can be viewed at:
// http://prettydiff.com/documentation.xhtml#function_properties
var options = {
source: str,
mode : "beautify", // beautify, diff, minify, parse
lang : "html",
wrap : 100,
inchar : "\t", // indent character
insize : 1 // number of indent characters per indent
}
var pd = prettydiff(options); // returns and array: [beautified, report]
var pretty = pd[0];
var report = pd[1];
console.log(pretty);
console.log(report);

Don't exactly know what you want to accomplish, but there are several examples on the site itself.
https://prettydiff.com/2/samples.xhtml
Also, documentation.
https://prettydiff.com/documentation.xhtml

Javascript : External Functions won't work

I have been using javascript for the last couple of days and have decided to use it for my website. I also decided to use external functions in a single .js file
function imageLoad() {
var path,domain,cut;
path = window.location.pathname;
domain = "WEBSITE DOMAIN ADDRESS";
cut = path.substring(domain.length,path.length);
/* Still in progress */
}
function pageStart() {
var image-on = 0;
var imgArray = new Array();
alert("boo"); /* Used to check the script will run */
}
Now that's a simple process. Nothing too complex. And I have done the following (it is a code extract of my template)
<script type="text/javascript" src="main_script.js"></script>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Grandpa Pixel</title>
</head>
<body onload="pageStart();">
Now that should do the trick. On body loading, it should cause an alert "boo". But it doesn't. It just loads the page normally. However If I make the external script ONLY contain the line alert("boo"), it works perfectly. Can I ask why this is the case? Does this mean you can only have one function per external file?

check this:
function pageStart() {
var image_on = 0;
var imgArray = new Array();
alert("boo"); /* Used to check the script will run */
}
HTML
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Grandpa Pixel</title>
<script type="text/javascript" src="main_script.js"></script>
</head>
<body onload="pageStart();">

recommended using Firebug or other debuggers.
ERRORS
SyntaxError: missing ; before statement
var image-on = 0;
main_script.js (line 12, col 13)
ReferenceError: pageStart is not defined
pageStart();
SOLUTION
change
var image-on = 0;
with
var imageOn = 0;
it would be cleaner to put the <script> tag into the <header> tag.

jquery to run in iframe when created on the fly

I am trying to first create an iframe and then inject into it jQuery library and then have an alert to say that jQuery has loaded.
The jQuery library is being inserted into the iframe head as expected and the alert on jQuery load into the body.
The problem is, it does not show the alert and instead says jQuery is not defined.
Can anyone suggest anything?
Here is the code
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<title>iFrame Test</title>
</head>
<body>
<script>
var insertScript = function(src){
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = false;
script.src = src;
$('iframe').contents().find('head')[0].appendChild(script);
}
var insertScriptContent = function(code){
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = false;
script.innerHTML = code;
$('iframe').contents().find('body')[0].appendChild(script);
}
$(function(){
$('iframe').load(function(){
var contents = $('iframe').contents();
insertScript('https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
insertScriptContent('jQuery(function(){ alert("loaded"); });');
});
});
</script>
<div class="output">
<iframe></iframe>
</div>
</body>
</html>

You're loading jQuery asynchronously (despite the script.async=false) and then loading your alert script immediately after that. jQuery is not yet loaded when that script runs, so you get the undefined jQuery reference.
As a quick fix, I added a setInterval() that waits until jQuery is defined. I also made these other changes:
Removed the script.async = false; both places because it doesn't do any good.
Removed the $('iframe').load() wrapper. When I tested your code, the callback function in that wrapper never gets called at all. That's not surprising since nothing is being loaded into the iframe at that point.
Changed the two places where you use document.createElement() to use the iframe document (called iframedoc in my version) instead. It works OK using document, but I'm a bit more comfortable creating those scripts under the document they will be loaded into.
Changed two instances of ...find(something)[0].appendChild(); to the simpler ...find(something).append();.
Here's the working code:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
</script>
<title>iFrame Test</title>
</head>
<body>
<script type="text/javascript">
$(function() {
var $contents = $('iframe').contents();
var iframedoc = $contents[0];
var insertScript = function(src) {
var script = iframedoc.createElement('script');
script.type = 'text/javascript';
script.src = src;
$('iframe').contents().find('head').append(script);
}
var insertScriptContent = function(code) {
var script = iframedoc.createElement('script');
script.type = 'text/javascript';
script.innerHTML = code;
$('iframe').contents().find('body').append(script);
}
insertScript('https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
insertScriptContent(
'var timer = setInterval( function() {' +
'if( typeof jQuery == "undefined" ) return;' +
'clearInterval( timer );' +
'jQuery(function(){ alert("loaded"); });' +
'}, 50 )'
);
});
</script>
<div class="output">
<iframe></iframe>
</div>
</body>
</html>
That was good for a first pass, but there's a simpler way to do it. I tried replacing the two script functions with jQuery code, so here is another working version:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
</script>
<title>iFrame Test</title>
</head>
<body>
<script type="text/javascript">
$(function() {
var $contents = $('iframe').contents();
$contents.find('head').append(
'<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>'
);
$contents.find('body').append(
'<script>' +
'jQuery(function(){ alert("loaded"); });' +
'<\/script>'
);
});
</script>
<div class="output">
<iframe></iframe>
</div>
</body>
</html>
Oddly enough, this one works OK without the setInterval() timer, so I took that code out. I'm not sure exactly why this works - which is not a comforting feeling - but it does seem to be consistent in the browsers I tested it in.
And finally, here is a non-working experiment. In the past I've used document.write() targeting an iframe to good effect. So I thought I would try that:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
</script>
<title>iFrame Test</title>
</head>
<body>
<script type="text/javascript">
$(function() {
var $contents = $('iframe').contents();
var iframedoc = $contents[0];
iframedoc.write(
'<!doctype html>',
'<html>',
'<head>',
'<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"><\/script>',
'</head>',
'<body>',
'<script>',
'debugger;',
'jQuery( function(){ alert("loaded"); } );',
'<\/script>',
'</body>',
'</html>'
);
});
</script>
<div class="output">
<iframe></iframe>
</div>
</body>
</html>
This version does load jQuery and the inline script into the iframe, and it executes the jQuery() call in the inline script. But it never calls the callback function with the alert() in it. This actually relates to something I'm working on, so I'll probably take another look at it tomorrow, but in the meantime I left the experimental code in case you're curious. I changed it to use the uncompressed jQuery inside the iframe for easy debugging, and left a debugger; statement in there.