could really use some help right about now! I'm brand new to javascript and am totally stuck. I would REALLY appreciate someone taking the time to help me out here with some javascript.
I'm creating a mobile app using JQUERY and PhoneGap. I have a "create your own" ToDo list feature. Basically someone selects the options on one page and then they are added to the ToDo list which is another page.
Here's some example HTML:
<div data-role="page" id="CreateChecklist">
<div ="header">
<div class="logo"></div>
</div>
<div data-role="header">
<h1>ToDo Checklist</h1>
</div>
<div data-role="content">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a">
<div data-role="collapsible" class="checklist1" id="checklist1">
<h3> Support Network </h3>
<p><fieldset data-role="controlgroup" name="checklist1" class="checklist2">
<input type="checkbox" name="checklist1" id="checklist1_0" class="checklistA" `enter code here`value="1" />
<label for="checklist1_0">Create and mobilize support network</label>
<input type="checkbox" name="checklist1" id="checklist1_1" class="checklistA" value="1" />
<label for="checklist1_1">Set up meeting to discuss intervention logistics</label>
<input type="checkbox" name="checklist1" id="checklist1_2" class="checklistA" value="1" />
<label for="checklist1_2">Assign a "detail person"</label>
<input type="checkbox" name="checklist1" id="checklist1_3" class="checklistA" value="1" />
<label for="checklist1_3">Designate the Intervention Facilitator</label>
<input type="checkbox" name="checklist1" id="checklist1_4" class="checklistA" value="1" />
<label for="checklist1_4">Make clear to not alert the person of concern</label>
<input type="checkbox" name="checklist1" id="checklist1_22" class="checklistA" value="1" />
<label for="checklist1_22">Chair person creates an "opening" and "closing" dictation</label>
<input type="checkbox" name="checklist1" id="checklist1_24" class="checklistA" value="1" />
<label for="checklist1_24">Create a list of personal support options (Al-Anon, therapy, etc)</label>
</fieldset>
After the person has selected their checkboxes they click the button:
<a href="#ToDoChecklist" id="add">
<button>Submit</button></a>
I then need the selected checklists to be added to the other page:
<div data-role="page" id="ToDoChecklist">
<div ="header">
<div class="logo"></div>
</div>
<div data-role="header">
<fieldset data-role="controlgroup" name="checklist2" class="checklist2" id="checklist2">
</fieldset>
</div>
<div data-role="content">
<h3> Content </h3>
</div><a href="#TakingAction">
<div data-role="footer">
<h1>Back - Taking Action</h1>
</div></a>
</div>
as far as I know theres no way to "move" elements from the current page to one that is yet to be loaded in javascript (without having some sort of callback on the jquery changePage method). instead consider passing the information in the
href="#ToDOChecklist&checkbox1=selected&checkbox2=selected"
then use this information the populate the checkboxes in the new page
Related
I have multiple checkboxes for a question.Atleast one checkbox needs to be selected.If none of the checkboxes get selected form should through validation error.Did i miss anything. Any ideas on how I would be able to achieve this behaviour?
My .JS code:
$scope.onCheckBoxSelected=function(){
var flag=false;
for(var key in selectedOptions){
console.log('Key -' +key +' val- '+selectedOptions[key]);
if(selectedOptions[key]){
flag=true;
}
}
if(!flag){
selectedOptions=undefined;
}
};
below is my html code :
<div class="grid">
<div class="col flex-10 mandatoryField" ng-class="{error: (!selectedOptions && formMissingFields)}">Hello please select atleast one</div>
<div class="col flex-2">
</div>
<div class="col flex-5">
<div style="padding-top: 2px">
<input type="checkbox" name="apple" title="Select type" value="apple" ng-model="apple" ng-change="onCheckBoxSelected()">apple
</input>
</div>
<div style="padding-top: 2px">
<input type="checkbox" name="orange" title="Select type" value="orange" ng-model="orange" ng-change="onCheckBoxSelected()">orange
</input>
</div>
<div style="padding-top: 2px">
<input type="checkbox" name="banana" title="Select type" value="banana" ng-model="banana" ng-change="onCheckBoxSelected()">banana
</input>
</div>
</div>
</div>
You can keep it simpler, without the need of the ngChange event.
<div ng-class="{error: !apple && !orange && !banana">Hello please select atleast one</div>
It's best practice to use the AngularJS forms for checkbox validation - it will also help you if you intend on extending your form. You will have to refactor your code to use this functionality.
<ng-form name="myForm">
<span style="color:red;" ng-show="myForm.$invalid">Please select one</span>
<br />
<!-- your checkbox values will be in "choices" -->
<p ng-repeat="choice in choices">
<label class="checkbox" for="{{choice.id}}">
<input type="checkbox" value="{{choice.id}}" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="{{choice.id}}" ng-required="value.length==0" /> {{choice.label}}
</label>
</p>
<input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
</ng-form>
See this fiddle - note that it uses underscore.js. Also, this question may help.
I can hide a list item (the first one in this example) in Qualtrics with regular JavaScript. The screenshot below shows my question.
This is the code that I entered into the javascript window belonging to the question:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your JavaScript Here*/
$(this.questionId).getElementsByClassName("ChoiceStructure")[0].getElementsByTagName("li")[0].style.display = "none";
});
I was wondering how the same could be achieved with jQuery?
I have successfully installed jQuery thanks to this handy guide by adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
in the source view of the header. Additionally, I added var jq = jQuery.noConflict(); at the top of the javascript window belonging to this question.
By inspecting the source code further I found that the ID of the question is QID2. Based on this answer I therefore tried
$("#QID2 .ChoiceStructure ul li:eq(0)").hide();
but without success.
Please note that ideally I would not want to specify the question ID manually, but instead refer to the question as I have with regular JavaScript.
Edit: the html for the qualtrics question is:
<div class="QuestionOuter BorderColor MC QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed">
<div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div> <div class="Inner BorderColor SAVR">
<div class="InnerInner BorderColor TX">
<fieldset>
<!-- BEGIN PARTIALS -->
<!-- Partial for defining the ControlContainerContent -->
<!-- END PARTIALS -->
<h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2>
<div class="QuestionBody">
<!-- Begin Choices w/o choice groups -->
<ul class="ChoiceStructure">
<li class="Selection reg"> <input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected"><label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected"> <span>a (0)</span></label></span> <div class="clear"></div> </li>
<li class="Selection alt"> <input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected"><label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected"> <span>a (1)</span></label></span> <div class="clear"></div> </li>
<li class="Selection reg"> <input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected"><label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected"> <span>b (2)</span></label></span> <div class="clear"></div> </li>
<li class="Selection alt"> <input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected"><label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected"> <span>b (3)</span></label></span><div class="clear"></div> </li>
</ul>
<!-- End Choices w/o choice groups -->
<div class="clear zero"></div>
</div>
</fieldset>
</div>
</div>
</div>
You can use prototypejs (which Qualtrics already uses) to do it quite simply:
Qualtrics.SurveyEngine.addOnload(function()
{
$(this.questionId).down('li').hide();
});
Maybe some of rules that you added in JQuery request ( i mean inside the brackets $(here)) is not valid and JQuery returns wrong link to node element (or returns "undefined"). I guesting that a problem in last construction with .class ul li (because u added class to ul).
So you need to use
$("#QID2 ul li:eq(0)")
or
$("#QID2 ul.ChoiceStructure li:eq(0)"
About refer to the question - you can use variables as in normal JS and add value in JQuery using simple concatenation like
$("#QID"+variableWithQuestionNumber+" li:eq(0)")
(function(){
var counter = 0;
$(".myButton").click(function(e){
if (counter===0){
$("#QID2 ul li:eq(0)").hide();
counter++;
}else{
$("#QID2 ul li:eq(0)").show();
counter--;
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="QuestionOuter BorderColor MC QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed">
<div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div>
<div class="Inner BorderColor SAVR">
<div class="InnerInner BorderColor TX">
<fieldset>
<!-- BEGIN PARTIALS -->
<!-- Partial for defining the ControlContainerContent -->
<!-- END PARTIALS -->
<h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2>
<div class="QuestionBody">
<!-- Begin Choices w/o choice groups -->
<ul class="ChoiceStructure">
<li class="Selection reg">
<input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected"> <span>a (0)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection alt">
<input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected"> <span>a (1)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection reg">
<input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected"> <span>b (2)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection alt">
<input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected"> <span>b (3)</span>
</label>
</span>
<div class="clear"></div>
</li>
</ul>
<!-- End Choices w/o choice groups -->
<div class="clear zero"></div>
</div>
</fieldset>
</div>
</div>
</div>
<input type="button" class="myButton" value="Push me"/>
I have form with input fields, radio buttons, and select boxes.
How I can show all inputted data on another page or on modal window of this page?
For radio boxes, I want to show text inside getWord, but the form has 2 languages.
<div class="form-group">
<div class="col-sm-offset-1">
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="newpat" ng-model="isNewpat" value="true"><span>{{getWord('New')}}</span></label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="existpat" ng-model="isNewpat" value="false"><span>{{getWord('Exist')}}</span></label>
</div>
</div>
</div>
I also want to be able to see the information inputted in input fields and chosen datepicker.
For example, I used this, but it did not work:
<div class="modalwindow text-center">
<h1>{{getWord.appoitmentmessage}}</h1>
<p>{{message}}</p>
<div>{{user.name}}</div>
<div>{{user.email}}</div>
</div>
As much I understand your question. I think this will work for you. If you want to show value of radio-box selection in modal. Please elaborate more so in can help further
Change this
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="newpat" ng-model="isNewpat" value="New"><span>New</span></label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="existpat" ng-model="isNewpat" value="Exist"><span>Exist</span></label>
</div>
And this Also
<div class="modalwindow text-center">
<h1>{{isNewpat}}</h1>
<p>{{message}}</p>
<div>{{user.name}}</div>
<div>{{user.email}}</div>
</div>
I am using the below code to check my checkbox in handlebars.
<fieldset>
<div class="control-group">
<div class="control-label">{{#t "display_creators_name"}}Display Creator's name{{/t}}</div>
<div class="controls">
<label class="checkbox" for="creators_name">
{{checkbox "creators_name"
checked=creators_name}}
{{#t "allow_creators_name"}}{{/t}}
</label>
</div>
</div>
</fieldset>
But the checkbox is not checked.
Can someone please help me for the same.
Within a jquery mobile page I have a page with a nested fieldset.
I need to dynamically add an input and button field anytime a certain button is clicked.
My first step has been trying to find the id of the last dynamically added control group.
That is where I am stuck.
I have tried a lot of different ways to get to the div but haven't had any luck so I was hoping I could get some help from the experts.
My latest attempt...
$('#ServicePage #ServiceArticle #ServiceList #collapse #btnaddOther').on('click', function () {
var ct = $('#ServicePage #ServiceArticle #ServiceList #collapse');
getLastId(ct);
});
function getLastId(ct) {
var id = $(ct.last).attr('id');
addOtherItem(id);
}
Below is an example of the page. The div i'm trying to reach is below the 2nd fieldset and has an id of collapse. I need to get the last child div within the collapse div i.e. I need to return the id= addOther_1.
I hope that makes sense.
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
How would I go about accessing this nested div?
Thanks
function getLastId() {
var $x = $('fieldset:last-of-type > div:first-of-type > div:first-of-type')
// addOtherItem($x.attr("id"));
// Just to show we got the id, I am putting it in a div.
// Remove when done and un-comment line 3
$('#tmpDiv').html($x.attr("id"))
}
$('#btn').on('click', function(){
getLastId();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TMP -->
<div id="tmpDiv"></div>
<button id="btn">Click Me</button>
<!-- / TMP -->
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
I like the "last-of-type" and "first-of-type" selectors
$('fieldset:last-of-type > div:first-of-type > div:first-of-type')
http://api.jquery.com/last-of-type-selector/
The above will select the last fieldset, then the first direct child div, then the first div after that (which is the one you want).
Why not keep track of the last one using an id.. For example: id = 'LastOne', now, when you add a new item, remove the attribute from the actual last one, and then just place it on the one you're about to add. Basically, something like this:
$(document).ready(function(){
$('.add').click(function(){
var nvar = $('#lo').removeAttr('id').clone();
nvar.attr('id','lo');
nvar.insertAfter($('.mydiv').last());
});
});
You click on an ADD button (with the class .add) and then it looks for the LasOne (LO for short), removes it attr, makes a clone of it and then places it below the last one. Of course, you can also remove the attr AFTER you insert. That way, you wouldn't need to use "LAST".. since you don't really know what the last one is.
Check the fiddle working here: http://jsfiddle.net/lrojas94/v26fk8yd/
I was making this wayyyyy to difficult. I got the answer by trying something that charlietfl said "Since it has an ID just use that $('#collapse') since by definition ID's are unique – charlietfl"
Because I am using jquery mobile I did have to include the page name so it was simply
$addOther = $('#ServicePage #collapse');
The name of the jquery mobile page and the id of the div I need to look into.
Thanks everyone for your help.
I forgot to add how I found the last div within that div...
$('#ServicePage #collapse').find('.a').last();
This found the last div withing a div. The div I would looking in has the id #collapse.