I have buttons which are creating dynamically after form submission.
<template name="workflow">
{{#each newaction}}
<div class="btn-box" >
{{> actioncardsubcontent}}
<button type="button" class="cancelsub" >New Action</button>
<button type="submit" class="createbtnsub" >Show Options</button>
</div>
{{/each}}
</template>
When I click on "Show Options" button the two buttons should hide and displays the content in the below template.
<template name="actioncardsubcontent">
<div class="subcontent" id={{_id}} >
<div class="modulepath"><div>{{module_list}}</div></div>
<div class="linkto"><div>Linked To: <div class="linkto-color">{{link}}</div></div></div>
<div class="description"><div>Notes:<br>{{description}}</div></div>
<div class="btn-box showoption">
<button type="button" class="hideoption">Hide Options</button>
<button type="submit" class="requestextension">Request Extension</button>
</div>
</div>
</template>
and My JS is:
Template.workflow.events({
"click .createbtnsub" : function(){
$("#"+this._id).show();
$('.createbtnsub').hide();
$('.cancelsub').hide();
With the above Js it is hiding for all the cards buttons when I click on particular card. So can anyone correct me. How to write dynamic id for those buttons to make it work for particular card.
please try it :
Template.workflow.events({
"click .createbtnsub" : function(){
$('.createbtnsub').hide();
$('.cancelsub').hide();
$(this).show();
Related
I have a Modal with some contents on it. When i click the cancel button, I want to clear and reset the contents of the modal. But the problem i face is, When i click the cancel button and reopen the modal, the contents still remain on the Modal.
I have attached the image of the Modal:
Before clicking Cancel Button:
After Clicking Cancel Button and reopening the modal, the contents still remain inside modal from the previous time, the image below shows it:
I have attached the code below:
HTML:
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<div id="imagearea" class="imagearea">
<div class='dynamic_text' style='display:none;'></div>
<img class="modal-content" id="img01" src="fashion.jpg">
</div>
<div class="text_container">
<br>
<div class="img_text">
</div>
<div class="input_tag">
<span class="right_sec_text">Select a region from the picture</span>
<div class="error"></div>
<div class="tags" id ="tags"></div>
<div class="input_box">
<input type="text" name="tags" id="name_tag" class="input_textbox">
<button id="settag" class="btn_settag">Set Tag</button>
</div>
<div class="footer_btn">
<p><button class="btn_success" id="btn_add" value="add areas">Confirm Selection</button>
<p><button class="btn_cancel" onclick="$('#myModal').hide()">Cancel</button>
</div>
</div>
</div>
</div>
this is the code for the cancel button:
<p><button class="btn_cancel" onclick="$('#myModal').hide()">Cancel</button>
I have included this code :
Javascript:
$('.modal').on('hidden.bs.modal', function() { $(this).removeData(); });
Can someone help me to fix this problem to reset and close the modal window.
I want to add button on my page. When we click that button, above generates div where we can add photo. When we click twice, we have two divs etc. The problem is that my code is not generating... How I can achieve this?
And another question. How I can add +1 to identifier while adding another div?
<div class="row" v-for="row in rows">
<div class="col-3">
<photo :upload_url="" :parent="this" identifier="image01" :value="row.photo">
</photo>
</div>
</div>
<button type="button" class="button btn-primary" #click="addRow">Add row</button>
addRow: function(){
this.rows.push({photo: ""});
},
To add +1 to div you can have index var in v-for:
<div class="row" v-for="(row, index) in rows">
And your code just works perfect if remove photo component, are you sure that you dont have any errors in console?
var vm = new Vue({
el:'#app',
data: {
rows: []
},
methods:{
addRow: function(){
this.rows.push({photo: ""});
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js">
</script>
<div id=app>
<div :id="'photo'+index" class="row" v-for="(row,index) in rows">
<div class="col-3">
{{row.photo+index}}
</div>
</div>
<button type="button" class="button btn-primary"
#click="addRow">Add row</button>
</div>
I have a row made of three buttons, and I need these three buttons to remain on the same row.
With that said, I am trying to make it so that each time one of these buttons is clicked, hidden content is displayed underneath them. Each button would show hidden content that is different from the other.
Is there anyway I can accomplish such a task using $(this) or must I assign a unique ID to each button and the relevant content it's supposed to show?
I have tried placing each button within a superclass called .items and the relevant content within this class as a child, called .description--so that I can access it using jQuery's .children() function--but this tends to mess up the row that my buttons are on (so that they are not all on the same row). Is there anyway to get around this?
What would be the simplest way to go about this?
Edit to show code:
<div class="displayers">
<div class="items">
<button type="button" class="btn btn-custom">Button 1</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
<div class="items">
<button type="button" class="btn btn-custom">Button 2</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
<div class="items">
<button type="button" class="btn btn-custom">Button 3</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
</div>
In order to make the buttons fit on the same row, I changed the ".items" class to have the property of "inline-block". The ".description" class is hidden, and I have some jQuery to reveal it.
var main = function() {
$('.items').click(function() {
$('.description').hide();
$(this).children('.description').show();
});
};
$(document).ready(main);
The problem with this is that my buttons are no longer on the same row.
I like to use data attributes and css selectors (easy to change later on), so I would use:
$('[data-show]').on('click', function(e) {
var toShow = $( $(this).data('show') );
toShow.siblings().hide();
toShow.show();
});
li {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
<button data-show=".content > *:nth-child(1)">Open 1st</button>
<button data-show=".content > *:nth-child(2)">Open 2nd</button>
<button data-show=".content > *:nth-child(3)">Open 3rd</button></p>
<ul class="content">
<li>1st Container</li>
<li>2nd Container</li>
<li>3rd Container</li>
</ul>
Looks pretty simple to me, but does not mean others would agree. It really depends on your needs.
You can just toggle the elements which is next to your button with just class added to each element as below:
$('.btnshowdes').on('click',function(){
$(this).next('.desc').toggle();
});
.desc{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 1</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 2</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 3</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 4</div>
</div>
<br/>
</div>
FIDDLE DEMO
UPDATE
Based on your updated question to make it in the same row you just need to put an extra style to your .items as below:
.items{
display:inline-table; //helps to keep it in same row
padding:10px;//Just to make it feel good
}
Your js according to your html structure will be:
$('.btn-custom').on('click',function(){
$(this).next('.row').find('.description').toggle();
});
DEMO FIDDLE HERE
To solve your problem i would split my elements. Why don't you put each button in a different container (a div for instance), each container having his own id and his own content.
So when you click on a button you display the content inside of one div and the style of other buttons will not be affected.
Something like
<div class="container" id="1">
<button id="btn1"> Button one </button>
<!-- your content here linked to the script you use to display -->
</div>
<div class="container" id="2">
<button id="btn2"> Button two </button>
<!-- your content here linked to the script you use to display -->
</div>
<!-- etc... -->
So you don't have to worry and use complicated scripts, and each style will not be affected by the others modifications.
I have following DIV which shows some controls:
<div id="buttonrow" class="buttonrow">
<div class="Add" title="Add">
<div class="AddButton">
<input id="images" name="images" title="Add Photos" multiple="multiple" type="file">
</div>
<div class="AddText">
Add
</div>
</div>
<div class="Upload" title="Upload">
<div class="UploadButton">
<button id="start" type="submit" title="Upload Photos">
</button>
</div>
<div class="UploadText">
Upload
</div>
</div>
<div class="Clear" title="Clear">
<div class="ClearButton">
<button id="reset" type="reset" title="Clear Photos">
</button>
</div>
<div class="ClearText">
Clear
</div>
</div>
<div class="Delete" title="Delete">
<div class="DeleteButton">
<button id="delete" type="button" title="Delete Photos">
</button>
</div>
<div class="DeleteText">
Delete
</div>
</div>
<div id="SelectAll">
<input title="Select All Images" id="selectAllCB" type="checkbox">
</div>
<div id="dragandrophandler">
Drag & Drop Your Photos Here
</div>
<div id="ImagesCount">
</div>
<div id="Loading" class="Loading">
<img alt="loading" src="../customcontrol/progress.gif">
<div>
Loading...</div>
</div>
</div>
I need to know how can I disable this entire DIV using Javascript/JQuery function?
EDIT: To disable DIV means user should not be able to interact with DIV controls. They must be in read-only state (non-clickable). I dont want to hide DIV!
in Javascript, you can use:
<script lnaguage="javascript">
document.getElementById('buttonrow').style.display='none';
</script>
use:
$("#buttonrow *").attr("disabled", "disabled").off('click');
Try this with .prop():
$("#buttonrow :input").prop("disabled", true);
:input will select all input elems including text, textarea, button, select etc.
$("button, input",$("#buttonrow")).attr("disabled", "disabled");
Can you please try this:
$("#buttonrow").each(function()
{
$(this).prop('disbaled',true);
});
Hope this helps..
$('#buttonrow').on('click', function(){
$(this).css({ 'opacity': 0.7 });
return false;
})
I am trying to target all buttons, that are children of a div with the class 'actions'.
I want my function to take the values from onclick, filter out letters and special chars, and add the numbers to an array.
The function works, when i try to target the buttons OUTSIDE the div, but not when i try to target .actions button.
Anyone have any ideas?
Fiddle: http://jsfiddle.net/Teilmann/wN79n/5/
html:
<div class="actions">
<button onclick="addToCart(1337, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1338, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1339, 'something');" />
</div>
js:
var products = new Array();
jQuery('.actions button').each(function(){
var id = jQuery(this).getAttribute('onclick');
products.push(id.replace(/[^0-9]/g, ''));
});
alert(products);
Your html is incorrect <button/> it needs to be <button></button> and getAttribute has to be .attr()
HTML
<button onclick="str1" ></button> <!--changed html here from <button/>-->
<button onclick="2" ></button> <!--changed html here from <button/>-->
<button onclick="addToCart(1234, 'something');" ></button> <!--changed html here from <button/>-->
<div class="actions">
<button onclick="addToCart(1337, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1338, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1339, 'something');" />
</div>
jQuery
var products = new Array();
jQuery('.actions button').each(function(){
var id = jQuery(this).attr('onclick');
products.push(id.replace(/[^0-9]/g, ''));
});
alert(products);
DEMO
If you don't close the button with </button> the html will automatically generate this markup
<button onclick="str1"></button>
<button onclick="2"></button>
<button onclick="addToCart(1234, 'something');">
<div class="actions"></div>
</button>
<button onclick="addToCart(1337, 'something');">
<div class="actions"></div>
</button>
<button onclick="addToCart(1338, 'something');">
<div class="actions"></div>
</button>
<button onclick="addToCart(1339, 'something');"></button>