How to change position of element using jquery - javascript

I have html stuff as below:
<div class="field-group">
<label for="customfield_10102">select list</label>
<select class="select" name="customfield_10102" id="customfield_10102">
<option value="-1">None</option>
</select>
</div>
<div class="field-group">
<label for="customfield_10103">select list1</label>
<select class="select" name="customfield_10103" id="customfield_10103">
<option value="-1">None</option>
</select>
</div>
any number of option as per configured.
query:
change the position of <select class="select" name="customfield_10103" id="customfield_10103"> to append with <select class="select" name="customfield_10102" id="customfield_10102"> (with 40 px margin) and also have to change both select list's width.
After that, remove <div class="field-group"><label for="customfield_10103">select list1</label></div>
Any one can suggest me , how i could achieve this using JQUERY?
NOTE: just for reference, i need such customization in JIRA custom field which can be achievable using jquery.
Another related query:
Below is HTML stuff:
<li id="rowForcustomfield_10102" class="item">
<div class="wrap">
<strong title="select list" class="name">select list:</strong>
<div id="customfield_10102-val" class="value type-select editable-field inactive"
data-fieldtype="select" title="Click to edit">
final2 <span class="overlay-icon icon icon-edit-sml" />
</div>
</div>
</li>
<li id="rowForcustomfield_10103" class="item">
<div class="wrap">
<strong title="select list1" class="name">select list1:</strong>
<div id="customfield_10103-val" class="value type-select editable-field inactive"
data-fieldtype="select" title="Click to edit">
1 <span class="overlay-icon icon icon-edit-sml" />
</div>
</div>
</li>
I want to remove "rowForcustomfield_10103" and just it's contained a element "customfield_10103-val" place at next to "customfield_10102-val" with some margin.
so, after that it will look as below:
`<li id="Li1" class="item">
<div class="wrap">
<strong title="select list" class="name">select list:</strong>
<div id="Div1" class="value type-select editable-field inactive"
data-fieldtype="select" title="Click to edit">
final2 <span class="overlay-icon icon icon-edit-sml" />
</div>
<div id="Div2" class="value type-select editable-field inactive"
data-fieldtype="select" title="Click to edit">
1 <span class="overlay-icon icon icon-edit-sml" />
</div>
</div>
</li>`
Please also let me know on this.
have tried below but unable to change position:
if(AJS.$("rowForcustomfield_10102").length > 0)
{
AJS.$("customfield_10102-val").after( AJS.$('customfield_10103-val'));
AJS.$('customfield_10103-val').css({ 'margin-left': '40px','width':'80px' })
AJS.$('customfield_10102-val').css({ 'width': '80px' });
AJS.$("#rowForcustomfield_10102 .name").html(null);
AJS.$("#rowForcustomfield_10103 .name").html(null);
}

try this
$("#customfield_10102").after($('#customfield_10103'));
$('#customfield_10103').css({ 'margin-left': '40px','width':'200px' })
$('#customfield_10102').css({ 'width': '200px' });
$('[for="customfield_10103"]').closest('.field-group').remove();

Here is one approach:
var $customfield_10103 = $('#customfield_10103'), $parent = $customfield_10103.parent();
$customfield_10103.appendTo($('#customfield_10102').parent()).css('marginLeft', '40px');
$parent.remove();
FIDDLE

Related

Vue js watch vue pretty checkbox values

I am using vue pretty checkbox to display a checkbox. However, based on if one of the checkboxes is checked or not my content has to change! So, I need something like a listener on those vue pretty checkbox components.
However, because vue pretty checkbox is a package I cannot modify the code. My question now is, how can I listen on those checkboxes if they have changed from another component.
Because the products-manager component gets the values. So, whenever the values of the checkboxes of the p-check inside the product-filter changes, I need to pass that to the products-manager component in order to reload the data!
Any ideas on how I can do this? I have already tried this and this but those aren't working for me...
Very important: The number of checkboxes is dynamically as you can see below. The first two checkboxes are always there but the checkbox below gets genereated by a v-for!
This is my sourcecode so far (home template):
<div id="home" class="row">
<div class="col-xl-12" id="product-sort-and-filter">
<products-filter ref="productsFilter" :product-types-prop="{{ json_encode($productTypes) }}"></products-filter>
</div>
<div class="col-xl-9">
<div class="products">
<products-manager ref="productsManager" :products-prop="{{ json_encode($products) }}" auth="{{ \Illuminate\Support\Facades\Auth::check() }}" :userprop="{{ json_encode(\Illuminate\Support\Facades\Auth::user()) }}" route="{{ route('product.index') }}"></products-manager>
</div>
</div>
<div class="col-xl-3">
<sidebar-manager ref="SidebarManager" :top-products-today-prop="{{ json_encode($products) }}" :top-products-week-prop="{{ json_encode($products) }}" :top-products-month-prop="{{ json_encode($products) }}"></sidebar-manager>
</div>
</div>
products filter component:
<template>
<div class="product-sort-and-filter-wrapper d-flex">
<div class="col-xl-9 product-sorting no-padding">
<ul class="list-inline">
<li class="list-inline-item">Highlights</li>
<li class="list-inline-item">Aktuell</li>
<li class="list-inline-item">Diskutiert</li>
</ul>
</div>
<div class="col-xl-3 product-filter no-padding text-right">
<div class="dropdown d-inline-flex">
<i class="fas fa-filter"></i>FILTERN
<div class="dropdown-menu" style="margin-top: 0px">
<div class="productTypesBoxes dropdown-item pretty-checkbox-wrapper">
<p-check name="productExpiredCheckbox" class="p-svg p-plain p-bigger p-smooth" ref="showExpired" toggle true-value false-value>
<span class="checkbox-label on rubik-medium">Abgelaufene anzeigen</span>
<label slot="off-label"><span class="checkbox-label off rubik-medium">Abgelaufene anzeigen</span></label>
<span slot="extra" class="svg"><i data-feather="check-square"></i></span>
<span slot="off-extra" class="svg"><i data-feather="square"></i></span>
</p-check>
</div>
<div class="dropdown-divider"></div>
<div class="productTypesBoxes dropdown-item pretty-checkbox-wrapper">
<p-check name="productTypeCheckbox" class="p-svg p-plain p-bigger p-smooth" ref="showAllProductTypes" toggle true-value false-value checked>
<span class="checkbox-label on rubik-medium">Alle anzeigen</span>
<label slot="off-label"><span class="checkbox-label off rubik-medium">Alle anzeigen</span></label>
<span slot="extra" class="svg"><i data-feather="check-square"></i></span>
<span slot="off-extra" class="svg"><i data-feather="square"></i></span>
</p-check>
</div>
<div class="productTypesBoxes sub dropdown-item pretty-checkbox-wrapper" v-for="productType in productTypes">
<p-check name="productTypeCheckbox" :value="productType.id" class="p-svg p-plain p-bigger p-smooth" :ref="'productType' + productType.id" toggle>
<span class="checkbox-label on ">{{ productType.label }}</span>
<label slot="off-label"><span class="checkbox-label off ">{{ productType.label }}</span></label>
<span slot="extra" class="svg"><i data-feather="check-square"></i></span>
<span slot="off-extra" class="svg"><i data-feather="square"></i></span>
</p-check>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ProductsFilter",
props: ['productTypesProp'],
data() {
return {
highlights: true,
aktuell: false,
diskutiert: false,
showExipredDeals: false,
productTypes: this.productTypesProp
}
}
}
</script>
<style scoped>
</style>

JQuery basic text replacement on click/change using .parent() and .closest()

I have this dropdown styled with ul and I need to replace the heading with the very first content inside the <span class="parent">some text</span>
The <ul> contains different sections with each section different headings. Such as locations, provinces, languages etc.
I have figured out how to do this, but each time it only grabs the first heading even if the heading of the chosen option changes.
So for example if I select something from let's say Provinces, the heading of my label doesn't change to Provinces but it stays on Country.
What am I doing wrong here?
Screenshot
/* Destination selection */
$('.field-destination').each(function() {
var parent = $(this);
var dropdown_menu = $('.dropdown-menu', parent);
$('li', dropdown_menu).on('click', function() {
$('.destination', parent).text($(this).find('span').text());
//$('label', parent).text($(this).closest('.parent_li').find('span.parent').text());
$('label', parent).text($(this).parent().find('.parent_li').closest('li').find('.parent').first().text());
$('input[name="location_name"]', parent).val($(this).find('span').text());
$('input[name="location_id"]', parent).val($(this).data('value'));
if (window.matchMedia('(max-width: 767px)').matches) {
$('label', parent).hide();
$('.render', parent).show();
}
dropdown_menu.slideUp(50);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-extra-field dropdown clearfix field-destination has-icon">
<i class="input-icon field-icon fa"></i>
<div class="dropdown" data-toggle="dropdown" id="dropdown-destination">
<label>Locatie</label>
<div class="render">
<span class="destination">Kies een plaats</span>
</div>
</div>
<input type="hidden" name="location_name" value="">
<input type="hidden" name="location_id" value="">
<ul aria-labelledby="dropdown-destination" class="dropdown-menu" tabindex="1">
<li class="item parent_li" data-country="" data-value=""><span class="parent">Country</span></li>
<li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">City</span></li>
...
<li class="item parent_li" data-country="" data-value=""><span class="parent">Provinces</span></li>
<li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">Province</span></li>
...
<li class="item parent_li" data-country="" data-value=""><span class="parent">Languages</span></li>
<li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">language</span></li>
</ul>
</div>
Can anyone help me out?

JS: Expand position:absolute parent when dynamically adding relative divs

I am using absolutely positioned containers to slide screens left and right on "Next" and "Back". You can see this here: http://opencdesign.herokuapp.com/offer
Click "Got it" to move to 2nd screen, which is where the problem lies. If you click "Add item or category" enough times, the inputs will expand past the footer.
What is the simplest way to expand the height of the window as I add inputs? I'm also open to an alternative method of sliding screens left and right than using absolute positioning.
HTML
<div id="offer-2">
<div class="row one-margin-bottom">
<div class="small-12 medium-11 small-centered columns">
<h5 class="">What share of purchases will you accept in Currents?</h5>
<!-- <a class="offer-info-popup_open"><i class="half-margin-right fa fa-lg fa-question-circle"></i>How it works</a> -->
</div>
</div>
<div class="row left">
<div class="small-12 medium-6 small-centered columns">
<div class="row">
<div class="input-left small-3 columns">
<p><strong><img class="" src="{% static 'img/symbol-navy.svg' %}"/> share</strong></p>
</div>
<div class="input-right small-9 columns">
<p id="item-title"><strong>Item or category</strong></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-6 small-centered columns">
<div id="item-1" class="row collapse">
<div class="input-left small-3 columns">
<div class="relative">
<input name="discount-amount-1" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/>
<span class="input-icon-right">%</span>
</div>
<!-- <span class="input-sizer"><select name="discount-type-1">
<option selected>% of</option>
<option>$ of</option>
</select></span> -->
</div>
<div class="input-right small-9 columns">
<div class="fit-left half-margin-top one-margin-right one-margin-left">of</div>
<div class="relative input-sizer">
<input name="item-name-1" type="text" placeholder="Item or category name" value="All products" class="good-cat" />
<i class="remove-input alert fa fa-times"></i>
</div>
</div>
</div>
<div id="item-2" class="row collapse">
<div class="input-left small-3 columns">
<div class="relative">
<input name="discount-amount-2" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/>
<span class="input-icon-right">%</span>
</div>
<!-- <span class="input-sizer"><select name="discount-type-1">
<option selected>% of</option>
<option>$ of</option>
</select></span> -->
</div>
<div class="input-right small-9 columns">
<div class="fit-left half-margin-top one-margin-right one-margin-left">of</div>
<div class="relative input-sizer">
<input name="item-name-2" type="text" placeholder="Item or category name" value="All services" class="good-cat" />
<i class="remove-input alert fa fa-times"></i>
</div>
</div>
</div>
<a id="add-item" class=""><i class="half-margin-top fa fa-plus-circle half-margin-right"></i>Add item or category</a>
<div class="row one-margin-top">
<a class="prev-offer button round secondary">Back</a>
<a class="next-offer button round">Next</a>
</div>
</div>
</div>
</div>
JS
var id = 3
$('#add-item').click(function(){
$(this).before('<div id="item-'+id+'" class="row collapse hidden"><div class="input-left small-3 columns"><div class="relative"><input name="discount-amount-'+id+'" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/><span class="input-icon-right">%</span></div></div><div class="input-right small-9 columns"><div class="fit-left half-margin-top one-margin-right one-margin-left">of</div><div class="relative input-sizer"><input name="item-name-'+id+'" type="text" placeholder="Item or category name" /><i class="remove-input alert fa fa-times"></i></div></div></div>');
$('#item-'+id+'').slideDown();
id ++
});
I think you could potentially target the div with a CSS rule and handle its overflow-y with scroll (or increase its size, if you want to expand it). For a quick example, using jQuery, you could have a condition followed by $('#mydiv').css("overflow-y", "scroll"); (though it doesn't look like that div currently has an ID or custom Classname, so feel free to change that to whatever works best).
Alternatively, you could use a second, hidden div which is a parent to this one, and expand the hidden div. By using a relative size, you'd be able to fill into the invisible parent =)
It looks good, though!

Semantic UI Dropdown Search - selecting with the enter key

I've been working with Semantic UI for a project. I'm using the Search Selection version of the dropdown (classes are 'ui fluid search selection dropdown'). Under each item, I have setup a custom data-dogs attribute, with either 0 or 1. If the selected item has a data-dogs value of 1, I need an item on my form to show, or hide if it's a 0.
It's working fine on the mouse click, but I'm rather rusty with JS, so I'm not sure if there is an easy way to get the same functionality with the enter key and up/down arrows).
The JS code I've made is below.
If anyone could give me some pointers, I'd very much appreciate it.
Many thanks in advance!
$('.item').on('click', function(){
if($(this).data('dogs')==1){
$('#dogCheckbox').removeClass('hidden');
console.log('Working?');
} else {
$('#dogCheckbox').addClass('hidden');
}
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="location" id="location_search">
<i class="dropdown icon"></i>
<div class="default text"></div>
<div class="menu">
<div class="item" data-value="1" data-dogs="0">A1</div>
<div class="item" data-value="2" data-dogs="0">A2</div>
<div class="item" data-value="3" data-dogs="0">A3</div>
<div class="item" data-value="4" data-dogs="0">A4</div>
<div class="item" data-value="5" data-dogs="0">A5</div>
<div class="item" data-value="6" data-dogs="0">A6</div>
<div class="item" data-value="7" data-dogs="0">A7</div>
<div class="item" data-value="8" data-dogs="0">A8</div>
<div class="item" data-value="9" data-dogs="1">A9</div>
<div class="item" data-value="10" data-dogs="1">A10</div>
<div class="item" data-value="11" data-dogs="1">A11</div>
<div class="item" data-value="12" data-dogs="0">A12</div>
<div class="item" data-value="13" data-dogs="1">A14</div>
<div class="item" data-value="14" data-dogs="1">A15</div>
<div class="item" data-value="15" data-dogs="1">A16</div>
</div>
</div>
<div class="ui checkbox hidden" id="dogCheckbox">
<input type="checkbox" tabindex="0" class="hidden" name="
form_dog">
<label>Dog friendly unit! Is a dog present?</label>
</div>
You can try this:
$(".item").keyup(function(event){
if(event.keyCode == 13){
$('.item').click();
}
});
13 is the Enter key code, so- when keyup event occurs, and the pressed key is Enter- do the click function.
Hope it helps

get div with specific class before form input

I have:
<div class="col-md-3 col-centered survey-kind-border">
<a class="lv-item" href="#">
<div class="media">
<label for="no" class="pull-left">
<div class="survey_kind_choice">
1.5
</div>
<input checked="checked" class="survey_kind_input" id="no" type="radio" value="no">
</label>
<div class="media-body">
<div class="lv-title">
No
</div>
<small class="lv-small">
I will Not
</small>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-centered ">
<a class="lv-item" href="#">
<div class="media">
<label for="yes" class="pull-left">
<div class="survey_kind_choice">
2.5
</div>
<input class="survey_kind_input" id="yes" type="radio" value="yes">
</label>
<div class="media-body">
<div class="lv-title">
Yes
</div>
<small class="lv-small">
I will
</small>
</div>
</div>
</a>
</div>
When someone goes to this page, one of the radio buttons will usually already be selected. If the button is selected, I want to grab the div that is associated with that form element and has the class "survey_kind_choice" and add a class to it. I am trying to do that with this code:
if($('.survey_kind_input').is(':checked')){
alert('there is a checked element');
$(this).prev('.survey_kind_choice').addClass('current_choice');
}
The alert is working, but I can't get the class to be added. What am I doing wrong and how do I fix it?
No if statement needed, just execute the selector on the checked input with:
$('.survey_kind_input:checked').prev('.survey_kind_choice').addClass('current_choice');
jsFiddle example

Categories