Develop Reference

using capybara, i'm unable to read custom data- attribute from an href

I have some HTML that looks generally like:
X
it's a delete link and i'm encoding the ID of the item being deleted in the href.
Then I have some javascript that looks generally like:
$('.myclass').click(function(){
var id = $(this).data('id');
$.ajax({ url: 'correct_url', data: {id: id}, type: 'DELETE'});
}
and this all works fine when I'm using the app.
However, I'm trying to test it with capybara (capybara-webkit driver)
and it falls apart: the DELETE request goes to the server without the id field! not only is there no value for it, it just isn't sent. However the request is made, so it seems the js is being executed, just minus the lines that use this and include the extra data hash.
any ideas? It needs to be a variable because there's really a list of things and each one needs its own delete link. Am I missing a better pattern for accomplishing this whole thing? Is capybara busted? thanks...

It's a limitation of QtWebkit - see https://github.com/thoughtbot/capybara-webkit/issues/427 - If you're not using the Qt 5.5.1 with capybara-webkit, theres a possibility support may have been added, so you might want to try upgrading.

Delicious JSON List Issue

I need some help with adding a dynamic list of links from Delicious.com to my site. The idea is to show all the newest links with a certain tag (in this case the tag is "flyfishing").
What I did so far is I put the following link in a script tag in my page header to get a JSON list of links with the matching tag:
<script type="text/javascript" src="http://feeds.delicious.com/v2/json/tag/flyfishing?count=20?callback=getDelicious">
The function I wrote called getDelicious is the callback function. Here is the function :
function getDelicious(){
$(function() {
var _el = $("#dynaList");
var out="<ul>";
for (var y in Delicious.posts) {
out+="<li>" + Delicious.posts[y]+"</li>";
}
out+="</ul>";
return _el.html(out);
});
}
Now this doesn't seem to work. Does anyone know what I'm doing wrong?
Is the problem in the way I'm getting the JSON data or is there something wrong with the code I wrote? I'm not sure if I'm accessing the Delicious site correctly. Is the array I'm trying to parse through actually what is being returned by the link in my script tag? I'm not getting any errors in the console so I really have no idea what's wrong.
Any help would be appreciated since I'm pretty new to JQuery and I only just started with Ajax and JSON.

You URL in your <script> tag is incorrect. The callback param should have an ampersand character (&) before it, not a question mark.
http://feeds.delicious.com/v2/json/tag/flyfishing?count=20?callback=getDelicious
^
Must be "&" not "?"
Furthermore, with JSONP the result of the request is given as an argument to your callback:
function getDelicious(data) {
// ...
}

Dotnet Return Url Missing Parameter

Here's a head-scratcher:
I have a Dotnet Application which signs a user out after a certain inactive time period. A JavaScript function using an action defined in the relevant CSHTML sends the user to a certain controller method which will sign them out.
When the JavaScript code decides that the user should be signed out, it uses the following line to do so:
location.href = settings.actions.expireSession + '?returnUrlString=' + currentUrl;
where settings.actions.expireSession is defined as:
expireSession: '#Url.Action("Expire", "Session")'
and the return url string getting into the location.href looks like this:
http://localhost:49574/Report/ReportWithUserIdAndCaseId?userId=84&caseId=173
which is correct, and the entire string assembled together with the url action looks like this:
"/Session/Expire?returnUrlString=http://localhost:49574/Report/ReportWithUserIdAndCaseId?userId=84&caseId=173"
I set up a breakpoint at the point of entry in the relevant method, but what arrives in the string parameter named "returnUrlString" there is missing the "caseId":
http://localhost:49574/?returnUrl=http%3A%2F%2Flocalhost%3A49574%2FReport%2FReportWithUserIdAndCaseId%3FuserId%3D84
consequently, when I enter my username and password to log back in, I get redirected to the following url:
http://localhost:49574/Report/EntrySummaryReportWithPatientIdAndVisitId?userId=84
which fails because it's missing a crucial parameter.
Have I missed anything obvious? Is there something else in the automated background of Dotnet's addressing/redirection system that could be contributing to this mysterious disappearance?
A huge thanks to everyone for reading this, and a gargantuan thanks for contributors!
- Ilia

You need to escape the Url before it is sent to the Session/Expire page.
See this previous question for information on encoding it in Javascript:
Encode URL in JavaScript?
Once you have returnUrlString on your Session Expire page, you should then unescape it and direct the user to it.
The problem is that the Url to the Session/Expire page would be:
"/Session/Expire?returnUrlString=http://localhost:49574/Report/ReportWithUserIdAndCaseId?userId=84&caseId=173"
What the server sees is:
Page: "/Session/Expire?, QueryString ReturnUrlString: returnUrlString=http://localhost:49574/Report/ReportWithUserIdAndCaseId?userId=84, QueryString CaseId: &caseId=173"
It is interpreting your &caseId as part of the /Session/Expire URL. This is why it disappears.

Question mark in script breaks html

I have inserted a block of javascript in then body of a Joomla 2.5 article.
What I want to achieve is to open a default client email engine in order to send some information there.
The code looks like this:
var sendForm = function() {
...
window.open('mailto:admin#admin.com?subject=mailSubject&body=mailBody');
};
What happens actually, when I load the page is that whatever is after the "?" is broken and appears as plain text in the UI.
For example, I have the following stuff in the UI:
?subject=mailSubject&body=mailBody'); }; window.onload = getTotal();
What is wrong? Can you help me to spot the stuff that I am doing it wrong?
Thanks

It seems that this is a Joomla specific problem. I managed to get over it by using the {emailcloak=off}syntax before the actual email address.
Therefore the code looks like this mailto:{emailcloak=off}some#email.com?subject....

You might want to use ? instead of ?, and & instead of &. If you wish, you can refer to the HTML character numbers and names here.
It will not only solve your problem, but also pass the W3C validator.

Store very small amount of data with javascript

I have one of those websites that basically gives you a yes or no response to a question posed by the url. An example being http://isnatesilverawitch.com.
My site is more of an in-joke and the answer changes frequently. What I would like to be able to do is store a short one or two word string and be able to change it without editing the source on my site if that is possible using only javascript. I don't want to set up an entire database just to hold a single string.
Is there a way to write to a file without too much trouble, or possibly a web service designed to retrieve and change a single string that I could use to power such a site? I know it's a strange question, but the people in my office will definitely get a kick out of it. I am even considering building a mobile app to manipulate the answer on the fly.
ADDITIONAL:
To be clear I just want to change the value of a single string but I can't just use a random answer. Without being specific, think of it as a site that states if the doctor is IN or OUT, but I don't want it to spit out a random answer, it needs to say IN when he is IN and OUT when he is out. I will change this value manually, but I would like to make the process simple and something I can do on a mobile device. I can't really edit source (nor do I want to) from a phone.

If I understand correctly you want a simple text file that you change a simple string value in and have it appear someplace on your site.
var string = "loading;"
$.get('filename.txt',function(result){
string = result;
// use string
})

Since you don't want to have server-side code or a database, one option is to have javascript retrieve values from a Google Spreadsheet. Tabletop (http://builtbybalance.com/Tabletop/) is one library designed to let you do this. You simply make a public Google Spreadsheet and enable "Publish to web", which gives you a public URL. Here's a simplified version of the code you'd then use on your site:
function init() {
Tabletop.init( { url: your_public_spreadshseet_url,
callback: function (data) {
console.log(data);
},
simpleSheet: true } )
}

Two ideas for you:
1) Using only JavaScript, generate the value randomly (or perhaps based on a schedule, which you can hard code ahead of time once and the script will take care of the changes over time).
2) Using Javascript and a server-side script, you can change the value on the fly.
Use JavaScript to make an AJAX request to a text file that contains the value. Shanimal's answer gives you the code to achieve that.
To change the value on the fly you'll need another server-side script that writes the value to some sort of data store (your text file in this case). I'm not sure what server-side scripting (e.g. PHP, Perl, ASP, Python) runtime you have on your web server, but I could help you out with the code for PHP where you could change the value by pointing to http://yoursite.com/changeValue.php?Probably in a browser. The PHP script would simply write Probably to the text file.

Though javascript solution is possible it is discouraged. PHP is designed to do such things like changing pieces of sites randomly. Assuming you know that, I will jump to javascript solution.
Because you want to store word variation in a text file, you will need to download this file using AJAX or store it in .js file using array or string.
Then you will want to change the words. Using AJAX will make it possible to change the words while page is loaded (so they may, but do not have to, change in front of viewers eyes).
Changing page HTML
Possible way of changing (words are in array):
wordlist.js
var status = "IN"; //Edit IN to OUT whenever you want
index.html
<script src="wordlist.js"></script>
<div>Doctor is <span id="changing">IN</span></div>
<script>
function changeWord(s) { //Change to anything
document.getElementById("changing").innerHTML = s;
}
changeWord(status); //Get the status defined in wordlist.js
</script>
Reloading from server
If you want to change answer dynamically and have the change effect visible on all open pages, you will need AJAX or you will have to make browser reload the word list, as following:
Reloading script
function reloadWords() {
var script = document.createElement("script"); //Create <script>
script.type="text/javascript";
script.src = "wordlist.js"; //Set the path
script.onload = function() {changeWord(status)}; //Change answer after loading
document.getElementsByTagName("head")[0].appendChild(script); //Append to <head> so it loads as script. Can be appended anywhere, but I like to use <head>
}
Using AJAX
Here we assume use of text file. Simplest solution I guess. With AJAX it looks much like this:
http = ActiveXObject==null?(new XMLHttpRequest()):(new ActiveXObject("Microsoft.XMLHTTP"));
http.onloadend = function() {
document.getElementById("changing").innerHTML = this.responseText; //Set the new response, "IN" or "OUT"
}
http.open("GET", "words.txt")
http.send();
Performance of AJAX call may be improved using long-poling. I will not introduce this feature more here, unless someone is interested.