<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="text-align:left; direction:ltr;" bgcolor="#ffffff" text="#4c4c4c" link="#007aa6" vlink="#007aa6">
<div>Hi all,</div>
<div><br>
</div>
<div>We're trying to write a plugin to default the Notes section of the new and edit resources pages to being open (i.e. as if the "Add Note" button had been clicked automatically when the page loaded).</div>
<div><br>
</div>
<div>I've got a layout_head.html.erb file which loads the appropriate js file in the correct page, my difficulty just comes from getting the button to click without creating errors. Here are the contents of my js file:</div>
<div><br>
</div>
<blockquote type="cite" style="margin:0 0 0 .8ex; border-left:2px #729fcf solid;padding-left:1ex">
<div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
$(function () {</div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
</div>
</div>
<div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
var click_the_button = function () {</div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
var button = document.querySelector('.btn.btn-sm.btn-default.pull-right.add-note');</div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
button.click();</div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
};</div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
</div>
</div>
<div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
click_the_button();</div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
</div>
</div>
<div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
});</div>
</div>
</blockquote>
<div></div>
<div><br>
</div>
<div>When the page loads I get the error messages seen in my attached screenshot. I've also tried requiring notes.crud.js and simply running the createTopLevelNote function, but this gives precisely the same error messages. Note that the URL for creating a
new resource is <a href="https://arcspace-dev.lib.cam.ac.uk/staff/resources/new">
https://arcspace-dev.lib.cam.ac.uk/staff/resources/new</a>, but when the error messages appear this changes to
<a href="https://arcspace-dev.lib.cam.ac.uk/staff/resources">https://arcspace-dev.lib.cam.ac.uk/staff/resources</a>.</div>
<div><br>
</div>
<div>As a test I've changed the click_the_button function to perform another task instead:</div>
<div><br>
</div>
<blockquote type="cite" style="margin:0 0 0 .8ex; border-left:2px #729fcf solid;padding-left:1ex">
<div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
var click_the_button = function () {</div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
var button = document.querySelector('.btn.btn-sm.btn-default.pull-right.add-note');</div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
button.style.backgroundColor = 'green';</div>
<div style="caret-color: rgb(76, 76, 76); color: rgb(76, 76, 76); font-family: Ubuntu; font-size: 14.666666984558105px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
};</div>
</div>
</blockquote>
<div><br>
</div>
<div></div>
<div>This works exactly as expected, changing the button colour to green. No error messages appear and the URL stays as expected.</div>
<div><br>
</div>
<div>I haven't found any other plugins that do something like this (and I know very little Javascript!) so I'm at a loss here. Any advice or links to relevant documentation would be greatly appreciated.</div>
<div><br>
</div>
<div>Many thanks,</div>
<div>Nick</div>
<div><span>
<pre>-- <br></pre>
<div>
<div>
<div><i><font color="#000080" size="4">Nick Butler</font></i></div>
<div><i><font color="#000080" size="4">Software Developer</font></i></div>
<div><i><font color="#000080" size="4">Digital Services</font></i></div>
<div><i><font color="#000080" size="4">Cambridge University Library</font></i></div>
<div><i><font color="#000080" size="4">West Road</font></i></div>
<div><i><font color="#000080" size="4">Cambridge CB3 9DR, UK</font></i></div>
<div><i><font color="#000080" size="4"><br>
</font></i></div>
<div><a href="mailto:npwb2@cam.ac.uk"><i><font color="#000080" size="4">npwb2@cam.ac.uk</font></i></a></div>
<div></div>
</div>
<pre><pre></pre><pre></pre></pre>
<pre><i><font face="monospace" color="#000080" size="4"></font></i></pre>
<pre><i><div><i style="font-family: Ubuntu; font-size: 14.666666984558105px;"><font color="#000080" size="4">Internal tel: 33067</font></i></div></i></pre>
</div>
<div></div>
<div></div>
</span></div>
</body>
</html>