Qualtrics: Empty button appended by jquery refreshes page - javascript

I'm attempting to implement an experiment in Qualtrics, but I've run up against this wall.
A button appended to a qualtrics question using JQuery will refresh the page, regardless of whether or not .click or .event have been defined. In my design this has the effect of wiping all the responses a participant has given up until that point, which is probably the last thing I want to happen.
My code is too complicated (a.k.a. poorly written) to post here. However you can replicate the error by creating a new survey consisting of a single 'descriptive text' question and attaching this code. Here jq refers to Jquery
Qualtrics.SurveyEngine.addOnload(function(){
/*Place Your Javascript Below This Line*/
jq('.QuestionBody').append('<button>This shouldn\'t do anything</button>')
});
This link is an example of the above.
https://sydneypsy.qualtrics.com/SE/?SID=SV_1ZGMxfENT0ykxBr
Why does this happen? Does anyone know to prevent it?

Source: robbrit
This is the default behaviour of a button. If you want to change it, do something like this:
$("button selector").click( function(event) {
event.preventDefault();
});
In your case, I would give the button an ID to use for a selector.

Related

Custom action links in .PDF...write Javascript to alter the appearance of links when clicked?

I have a .pdf document that contains custom links which run Javascript code.
There is no issue with the actual functionality of the working portion of the JS, but I do have one formatting/display problem that I havent been able to solve:
Is it possible to write JS that will alter the appearance of individual links as they are clicked?
I know I can programmatically change the appearance of all links on a page by looping through the doc.getLinks result and applying formatting changes to each element of the getLinks array. But I don't know how to refer to a specific link, as/after it's clicked, either by referencing that link's index location within the getLinks array, or by referring to it by any other name, handle, etc.
I would think that this is probably possible to do, but I'm at a loss.
Thanks in advance for any pointers!
EDIT: One thing to clarify...I can do everything I need to do for a single button. That is, I can manually find the button name, and manually enter the JS code to change the appearance of that particular button. To do this, I need to physically look up the name of the button using a few mouse clicks, and then hard code that button's name in my JS getField command. This requires different code for each and every button.
Is it possible to accomplish the same function using the same code for each and every button?
My ultimate objective is to be able to reproduce this function on a series of .pdf files that will, jointly, have thousands of individual buttons. So any manual component of this process will make implementation impractical.
I should have originally phrased the question in terms of, is it possible to write JS code that can automatically detect the name of the button which is calling the code? (ie, how would I implement a self-referential feature for a generic button?)
As wished by the OP…
When a script should refer to the field on which it is running, the field object to use is event.target.
An example:
You have a button which, when clicked, should change the width of the border between 1 and 3. The mouseUp event would containt this piece of code:
if (event.target.lineWidth == 1) {
event.target.lineWidth = 3 ;
} else {
event.target.lineWidth = 1 ;
}
Or another example: when the number in the calculated text field is negative, it should be in red, otherwise in black:
In the Format event of that field, you would add:
if (event.value*1 < 0) {
event.target.textColor = color.red ;
} else {
event.target.textColor = color.black ;
}
And that should give an idea on how to use event.target.

Keep cell color changed with checkbox on refresh

I have cells changing background color on checkbox check and I worked out how to keep the checkboxes checked on refresh (though looking back I don't think that works anymore), but I don't know how to keep the color change on refresh. I don't actually know Javascript at all and this is all from other questions but I want it to work. If I've done something completely wrong please correct me and don't assume I did it on purpose because I have absolutely no idea what I'm doing.
$(document).ready(function() {
$(".colourswitcher").click(function() {
if($(this).is(":checked")) {
$(this).closest("td").css("background","#ff3333");
}else {
$(this).closest("td").css("background","#202020");
}
});
});
$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});
$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});
Since you're new to javascript, I'm going to ask the dumb question: Have you included jQuery?
This code that you've pulled makes use of jQuery, a very useful library (not built-in to javascript) that has become so commonplace that people often don't even state its name when asking or answering a question involving it. But anytime you see that $ notation, you're probably dealing with jQuery.
You need to include the library file in your html file so it knows what those special symbols and syntax are:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
If you're testing this stuff in Google Chrome, press F12 and view the developer console. You will see "undefined" errors in red when you are missing things like this.
Here's another answer assuming you have a better working knowledge than my first answer:
The first bit of your code runs when the html document has loaded and attaches an event listener to change the nearest cell background color accordingly when the checkbox is clicked. Note two things here though. 1) that behavior will be attached to all html elements with the class "colourswitcher", not just inputs. 2) that behavior assumes that what was clicked has a property "checked", which only a checkbox does.
The middle bit I presume is supposed to run once, when the page is first loaded, to get the saved state of the checkbox from localStorage. This bit could be moved into the document ready bit.
The third bit of your code attaches an event listener to every input element (not just checkboxes) such that every time one is clicked, a checked true/false state will be saved in localStorage.
localStorage is a convenient way to save information between browser refreshes. You can save anything you want, ie. localStorage.CandyCanes = 7 and that variable will be stored in the user's browser and can be recalled later. Note that your above code will only work as intended if there's a single checkbox, because you're using one slot, or one variable, in localStorage to save: localStorage.input.
That's all I'm going to elaborate on this for now. If this is more than you expected, then it's time to hunker down and learn, or get a professional involved.

OnClick event triggering javascript function only after clicking twice

I'm fairly new to this web-programming thing, and I'm having some trouble with an onclick event. I don't even know if using "onclick()" is the best thing to do, but it has been working so far for me.
At this moment, I have a page with a div in which I load another page. This content varies depending on hash changed when I select options from a toolbar, using this piece of js
function loadcontent(toload){
$('#browsediv').load("content/addimagecontent.php?"+toload);
}
Every js function is called from the main page, not the content one.
Now, my problem is that, in the loaded content, I have several pages of results, and I have a div with the word Next printed into it, and an onclick event that should make the page change its page attribute:
echo "<div onClick='loadcontent(\"page=".$nextpage."\")'>Next</div>";
I also have the same thing to lead you to the previous page.
Once I go to the page, I see everything as should, but if I click either on "Next" or "Previous", it doesn't do anything the first time.
Any subsequent times I click on any of those, it works perfectly, even if the first thing I click is Next and then I click Previous or viceversa.
I've been looking around but no-one seems to have answered anything that adjusts to my issue, if someone has, please forgive me, as English is not my mother tongue and I sometimes don't know the best way to look for something.
Thanks for reading :)
Instead of adding an onclick, add an id attribute. Then with jquery you can do something like this:
<div id="yourDiv">Next</div>
$("#yourDiv").click(function() {
loadcontent(toload)
})
I'm not quite sure if this is "legal" but you can add the $nextPage variable as an attribute too.
<div id="yourDiv" data-page="<?php echo $nextPage;?>">Next</div>
Then you would use the following
$("#yourDiv").click(function() {
var page = $(this).attr('data-page');
loadcontent(page);
})

onclick event - call a button using something other than id

I am trying to rerun a block of javascript when the user clicks on a button. The site was created in a CMS so I do not have access to the button to give it an id. However, in firebug I noticed it has these values ->
<input type="submit" value="Continue">
Is there anyway I can call to this by using the value of 'Continue'?
FYI: the button is coded with php and I want to rerun the following
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function resizePole(){
var ht=($('#LayoutColumn2').height() > $('#LayoutColumn3').height()) ?
$('#LayoutColumn2').height() : $('#LayoutColumn3').height(); $('#lightPole').height(ht); }); </script>
and I am attempting to call this using:
onclick="return resizePole();"
Oh and I know next to nothing about javascript :)
Link to page working on - you may have to create a customer account. Enter some jibberish and I can delete it later
link to site
What the problem is: Ok let me explain what should be happening. I have created a div called 'lightpole' this div contains a background image of a lightpole that is coded with javascript to match the height of the 'content' div when the page loads. On the checkout_express page the creators of the CMS system have created expanding and collapsible divs that guide the user through the checkout process. On the third step 'Shipping Method' the user clicks on the 'Continue' button which expands the 'Order Confirmation Step'. This div causes the 'content' div to be longer than on initial loading but the lightpole was only sized to match the inital height of the content, not the added height of the Order Confirmation Step so it causes the lightpole to be shorter than it actually needs to be.
This will work.
$('[type="submit"][value="Continue"]').click(function () {
{
return resizePole();
});
EDIT
As pointed out in the comments, there is a more concise way to do this. I typically use the method above out of habit (makes it easier to add future logic to the click event).
$('[type="submit"][value="Continue"]').click(resizePole);
EDIT 2
To answer the question in the comments - yes, you can filter by the div ID as well. This will attach to the click event of all submit buttons inside a div with an id of DivIdHere and a value of Continue.
$('#DivIdHere [type="submit"][value="Continue"]').click(resizePole);
EDIT 3
This is a bit dirty, but after looking at your updated requirments, this should do the trick. Basically, it adds the click event to the last submit button on the page that has a value of continue (which appears to be the shipping section based on the link you provided).
$('[type="submit"][value="Continue"]:last').click(resizePole);

Possible to manipulate javascript generated elements?

I have a page dynamically generated with javascript and it contains several input fields and a button. When I click the button, nothing happens...Is it because it is a javascript object and not a "real" dom object? If so, is there a way to interact with the object?
I just wrote a simple alert to see if the button is even working.
jQuery("#button").click(function() {
alert("yes it's working");
});
On first page load this works...I believe on first page load it is PHP generated and when I click to another section, this same button will show up BUT the page does not refresh so this leads me to believe when I click on to another section, it is dynamically re-generated with JS.
Now if I click the button, nothing happens...no errors or no alerts...
You need to use .live because at the point in time when you assign the handler the element doesn't exist.
$('#button').live('click', function() {
});
You should also look into delegate if you're doing this with multiple elements for efficiency purposes.
I think I get what you're saying.
When you run jQuery('#button'), it searches for the elements then and there. The event is attached to the button itself, not to the query string #button.
jQuery does, however, offer the behavior you want.
jQuery('#button').live('click', function () { /* on click event */ });
live attaches to the query string, not the elements, so it will apply to any #button ever generated in the future.

Categories