Transclude creates a separate scope - javascript

I am using an accordion angularjs library. It has transclude:true on it.
I have a scope variable that I display using the interpolation {{variable}}. When I click on the radio buttons, the value it displays is supposed to change.
I set a default radio button and default variable value on load. But it does not show the respective values in the interpolation when I click on other radio buttons.
This worked before using it with the library. I read that transclude creates a new scope.
How do I make this work?
<collapsible-item item-title="Configure Maintenance Bill">
<div class="col-md-3">
<!-- Group of material radios - option 1 -->
<div class="form-check">
<input type="radio" class="form-check-input" id="x" name="groupOfMaterialRadios" ng-checked="maintenance_bill_rate_type ==='3' && maintenance_bill_rate_type==='4'"
ng-model="type" value="expense" ng-change="setCorpusFundDetFn('expense')">
<label class="form-check-label" for="materialGroupExample1">Expenses</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<label>
<input type="radio" name="optradio" ng-model="maintenance_bill_rate_type" ng-disabled="type!='expense'"
value="3" ng-change="setCorpusFundDetFn()">
</label>
<span class="align-middle">Per Flat</span>
</div>
<div class="col-md-3">
<label>
<input type="radio" name="optradio" ng-model="maintenance_bill_rate_type" value="4" ng-disabled="type!='expense'"
ng-change="setCorpusFundDetFn()">
</label>
<span class="align-middle">Per Sqft</span>
</div>
<div class="col-md-4">
<div ng-class="{'has-error': maintenanceBillForm.corpusFundnm.$invalid && maintenanceBillForm.$submitted}">
<div class="input-group mb-3">
<input type="text" class="form-control" ng-model="carpus_fund" ng-pattern="/^(\d)+$/" placeholder="Enter Corpus Fund"
aria-describedby="basic-addon2 " name="corpusFundnm" required >
<div class="input-group-addon">
<span class="input-group-text" id="basic-addon3">{{corpusFundDet || 'wt'}}</span>
</div>
</div>
</div>
</div>
</div>
<collapsible-item>

Related

How to put condition on button (Ex: Next button ) in HTMl/JS application?

I am creating one HTML/JS application in which there are two tab in one of the tab there is input text field and other is having radio button questionnaire.I am using next button to go one tab to another tab ... i want to put condition in next button if input field is empty next button should move to next tab and also show the warning.But i am not able to do it
HTML for input field:-
<div class="form-group">
<label for="fullName">Team/Project Name </label>
<input type="name" required class="form-control" name="TeamName" id="fullName" aria-describedby="nameHelp" placeholder="Enter full project name" >
<small id="nameHelp" class="form-text text-muted">Please enter your team/project name.</small>
</div>
<a class="btn btn-primary btnNext" >Next</a>
HTML for Radio button field:-
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 1:</legend>
<div class="col-sm-10">
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1">
<label class="form-check-label" for="gridRadios1">1</label>
</div>
<div class="form-check section-1">
<input class="form-check-input " type="radio" name="question1" id="gridRadios2" value="2">
<label class="form-check-label" for="gridRadios2">2</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3">
<label class="form-check-label" for="gridRadios3">3</label>
</div>
</div>
</div>
</fieldset>
Js for next button :-
$('.btnNext').click(function() {
$('.nav-tabs .active').closest('li').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function() {
$('.nav-tabs .active').closest('li').prev('li').find('a').trigger('click');
});

jQuery: show Div when check first radio button

In the example below, I'm trying to show a specific div only when i check the radio button "yes".
It's ok for one div but when I try to do this for two separate panes, checking the second radio button also expands the first field.
How can I fold/unfold each container separately?
https://jsfiddle.net/vsf7mph8/3/
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||$('.form-radio input:nth-child(2)').val() == $(this).val())
$('.otherRowinput').toggle('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>
Your mistake is that $('.otherRowinput').toggle('fast'); applies to all text fields. However, you only want to apply it to the nearest text field.
For this, don't use the $(selector) function which applies to all objects in the DOM, but traverse the DOM starting from the checkbox that was modified. Starting from the currently checked box, traverse the DOM upwards until you find a common parent of the checkbox and the textarea, then traverse it downwards to the text area and toggle that.
You find the parent that includes both the checkbox and the text field with $(this).closest(selector). Then, starting from that parent object, select the text area that is a child of that element using find(selector). In total:
$(this).closest(".row").find(".otherRowinput").toggle('fast');
Below is your updated example.
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||
$('.form-radio input:nth-child(2)').val() == $(this).val()){
$(this).closest(".row").find(".otherRowinput").toggle('fast');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>

Get radio button label from different radio button groups and append to division

There are 3 radio button groups for user to select.
Division '#targetOption' will get whenever the user checked radio button label to be displayed. Below my code which is able to get the first checked radio button.
Example if user click on the first radio button group, #targetOption will show A. Then if user click on the second radio button group, #targetOption will show A B.
<div id="options">
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="a">
A
</label>
</div>
<div class="radio">
<label> <input type="radio" value="b">
B
</label>
</div>
<div class="radio">
<label> <input type="radio" value="c">
C
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="d">
D
</label>
</div>
<div class="radio">
<label> <input type="radio" value="e">
E
</label>
</div>
<div class="radio">
<label> <input type="radio" value="f">
F
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="g">
G
</label>
</div>
<div class="radio">
<label> <input type="radio" value="h">
H
</label>
</div>
<div class="radio">
<label> <input type="radio" value="i">
I
</label>
</div>
</div>
</div>
<div id="targetID"></div>
$('#options').click(function() {
$('#targetID').html('');
$("input[type='radio']:checked").each(function() {
var optiontext = $(this).parent().text();
console.log(optiontext);
$('#targetID').html(optiontext);
});
});
$('#targetID').html(optiontext); set #targetID to the current radio value in the loop instead of appending it to #targetID.
Use $('#targetID').html($('#targetID').html() + optiontext); instead.
Or you can create an array to store the checked values and update #targetID later

Jquery function after Ajax submit not working

Here is my situation, It's giving me lot of trouble..
I have an ajax submit form, on submit, id like an action to happen.
I'm quite dependant as this is on squarespace, so i dont have acess to much code.
On submit of the form ( when sucessfull), I can see a 'hidden' class is added.
So i would like to use this for my action as:
if ( $("input.button").hasClass("hidden") ) {
$("#block-yui_3_17_2_2_1515660345355_6688").fadeIn();
};
But nothing seems to happen !! event alert is not working as well, I believe this is due because its not reloading the page as the hidden class appear only when the form has been submitted.
Is there any other method which could work to achieve this ?
Thanks a lot for your help, it will be a life saving !!!
--update --
BElow the all form html:
<form autocomplete="on" action="https://website.squarespace.com" method="POST" onsubmit="
return (function(form) {
Y.use('squarespace-form-submit', 'node', function(Y){
(new Y.Squarespace.FormSubmit({
formNode: Y.Node(form)
})).submit('5a568ac053450ad102451bc4', '5a568a42c8302558efde1ae7', 'page-5a568a42c8302558efde1ae7');
});
return false;
})(this)" data-form-id="5a568ac053450ad102451bc4">
<div class="field-list clear">
<div id="text-yui_3_17_2_1_1515620880734_20061" class="form-item field text required">
<label class="title" for="text-yui_3_17_2_1_1515620880734_20061-field">FULL NAME
<span class="required">*</span>
</label>
<input class="field-element text" type="text" id="text-yui_3_17_2_1_1515620880734_20061-field">
</div>
<div id="email-yui_3_17_2_3_1515620880734_11301" class="form-item field email required">
<label class="title" for="email-yui_3_17_2_3_1515620880734_11301-field">E-MAIL ADDRESS
<span class="required">*</span>
</label>
<input class="field-element" name="email" x-autocompletetype="email" type="text" spellcheck="false" id="email-yui_3_17_2_3_1515620880734_11301-field">
</div>
<div id="radio-yui_3_17_2_1_1515620880734_21108" class="form-item field radio required">
<div class="title" for="radio-yui_3_17_2_1_1515620880734_21108-field">GENDER
<span class="required">*</span>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21108-field" value="MALE">
<div id="check"></div> MALE</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21108-field" value="FEMALE">
<div id="check"></div> FEMALE</label>
</div>
</div>
<div id="radio-yui_3_17_2_1_1515620880734_21855" class="form-item field radio required">
<div class="title" for="radio-yui_3_17_2_1_1515620880734_21855-field">SHOE SIZE (EU SIZE)
<span class="required">*</span>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="36">
<div id="check"></div> 36</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="37">
<div id="check"></div> 37</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="38">
<div id="check"></div> 38</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="39">
<div id="check"></div> 39</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="40">
<div id="check"></div> 40</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="41">
<div id="check"></div> 41</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="42">
<div id="check"></div> 42</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="43">
<div id="check"></div> 43</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="44">
<div id="check"></div> 44</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="45">
<div id="check"></div> 45</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="46">
<div id="check"></div> 46</label>
</div>
</div>
</div>
<div class="form-button-wrapper form-button-wrapper--align-center">
<input class="button sqs-system-button sqs-editable-button" type="submit" value="Submit">
</div>
<div class="hidden form-submission-text">Thank you!</div>
<div class="hidden form-submission-html" data-submission-html=""></div>
If I understand this right, you want a block to appear with a fade-in once the form is submitted.
A few things here:
First, attaching to an arbitrary class change to make something happen feels very fragile. Why not try attaching this action to the form submit event?
Second, the javascript you put as an example will never make it unless the button was hidden on page load. You would need to attach this code to an actual dom event to execute it.
Here is my proposed solution. Note that this solution assumes the block with the ID you provide is already mounted on the DOM:
Since you seem to want to listen for a submit event and then make something appear, and your code was generic enough, you could:
$('form').onSubmit(function() {
$("#block-yui_3_17_2_2_1515660345355_6688").fadeIn();
});
There are simpler css transitions as well, again assuming the block is already on the DOM when the page loads.
Only final gotcha might be that you don't have jquery loaded on your site. I recommend adding jQuery from a Google CDN.

Why my numbers are not updating by themselves?

So, I am using the jquery-calx to calculate the price of some items. I have a different price depending on the base choise and the quantity. If the user chooses a 100 peaces of a full color base the price is different from 100 pieces of a One Side Monochromatic pattern. This is all working in my code, but there is a thing; If I choose One Side Monochromatic and them 100 pieces, the price in Total area is ok, but if I change the base to Full Color, for example, the price doesn't update. In this case, if I click again in the quantity the price does update. I would like to know if it is possible to make that update smoothly. Maybe create a button to update, I don't know. Would appreciate the help! Below Follows my code:
<form class="form-horizontal" id="meishi" data-calx-identifier="CALX1452836013763">
<div class="form-group">
<label class="col-lg-1 topic text-left">Base</label>
<div class="col-lg-2">
<label class="radio-inline">
<input type="radio" name="design" data-cell="A1" value="10800">One Side Monochromatic
</label>
</div>
<div class="col-lg-3">
<label class="radio-inline">
<input type="radio" name="design" data-cell="B1" value="14040">One Side Color
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input type="radio" name="design" data-cell="C1" value="16200">Full Color
</label>
</div>
<div class="col-lg-2 col-lg-offset-2 text-right">
<label data-cell="F1" data-formula="SUM(A1:C1)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Quantity</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuA" type="radio" name="quantity" data-cell="A3" value="">100
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuB" type="radio" name="quantity" data-cell="B3" value="">200
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuC" type="radio" name="quantity" data-cell="C3" value="">300
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuD" type="radio" name="quantity" data-cell="D3" value="">400
</label>
</div>
<div class="col-lg-1">
<label class="radio-inline">
<input class="maisuuE" type="radio" name="quantity" data-cell="E3" value="">500
</label>
</div>
<div class="col-lg-2 text-right">
<label data-cell="F3" data-formula="SUM(A3:E3)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Total</label>
<div class="col-lg-3 text-right col-lg-offset-8">
<label data-cell="F6" data-format="$ 0,0" data-formula="SUM(F1:F5)">$ 0</label>
</div>
</div>
</form>
Script:
$('#meishi').calx();
$('input:radio[name="design"]').change(
function() {
if ($(this).is(':checked') && $(this).val() == '10800') {
$('.maisuuA').val('2160');
$('.maisuuB').val('2484');
$('.maisuuC').val('3132');
$('.maisuuD').val('2808');
$('.maisuuE').val('3456');
} else if ($(this).is(':checked') && $(this).val() == '14040') {
$('.maisuuA').val('2808');
$('.maisuuB').val('3132');
$('.maisuuC').val('3780');
$('.maisuuD').val('3456');
$('.maisuuE').val('4104');
} else if ($(this).is(':checked') && $(this).val() == '16200') {
$('.maisuuA').val('3240');
$('.maisuuB').val('3564');
$('.maisuuC').val('4212');
$('.maisuuD').val('3888');
$('.maisuuE').val('4536');
}
});
Thank you!
I've never used jquery-calx but it really isnt necessary for something like this. If it were me, I'd do it like this:
store an array of values on the design inputs
give all of the inputs a class of update
when a any input is changed, get the array from the selected design input and the index of the selected "maisuu" input tells us which value to use from that stored array
get the quantity from the value of the selected "maisuu" elemet
do your math and set the total
Like this:
*Note that you may need to tweak the math, not 100% sure the calculations are what you intended. Also, if you insist, I'm sure you could merge this technique with the use of jquery-calx
Here's a jsFiddle with comments explaining the code
$('.update').change(function() {
var $design = $('input[name="design"]:checked');
var $maisuu = $('input.maisuu:checked');
var curMaisuu =$('.maisuu').index($maisuu);
var maisuuArr =$.map($design.data('values').split(','), function(e, i) {
return Number(e);
});
var base = $design.val() * 1000;
var upcharge = maisuuArr[curMaisuu] * 1000
var qty = $maisuu.val();
var cost = ((base + upcharge)* qty ) / 1000
if (base && qty) $('#total').text('$' + cost.toFixed(2))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="form-horizontal" id="meishi" data-calx-identifier="CALX1452836013763">
<div class="form-group">
<label class="col-lg-1 topic text-left">Base</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="A1" value="108.00" data-values="21.60,24.84,31.32,28.08,34.56">One Side Monochromatic
</label>
</div>
<div class="col-lg-3">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="B1" value="140.40" data-values="28.08,31.32,37.80,34.56,41.04">One Side Color
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="C1" value="162.00" data-values="32.40,35.64,42.12,38.88,45.36">Full Color
</label>
</div>
<div class="col-lg-2 col-lg-offset-2 text-right">
<label data-cell="F1" data-formula="SUM(A1:C1)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Quantity</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="A3" value="100">100
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="B3" value="200">200
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="C3" value="300">300
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="D3" value="400">400
</label>
</div>
<div class="col-lg-1">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="E3" value="500">500
</label>
</div>
<div class="col-lg-2 text-right">
<label data-cell="F3" data-formula="SUM(A3:E3)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Total</label>
<div class="col-lg-3 text-right col-lg-offset-8">
<label id="total">$ 0</label>
</div>
</div>
</form>

Categories

Resources