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>
Related
I Have the following code cshtml
<div class="container-fluid" id="dvUserData">
<div class="tab-pane fade" id="documentos" role="tabpanel" aria-labelledby="documentos-tab">
#Html.Partial("Documentos")
<div class="col-md-3">
<button type="submit" class="btn btn-primary botao-vert" data-bind="click: editData">SALVAR</button>
</div>
</div>
and the following binding
ko.applyBindings(model, document.getElementById("dvUserData"));
But my data-bind="click: editData" does not work, the click is not performed. But if i put the div class="col-md-3" before the #Html.Partial("Documentos") the bindings work.
I have no idea why, I looked for posts here but could not find anything similar.
Thanks in advance for any help.
---EDITED
The Partial
<div class="row" id="dvDocument">
<form role="form">
<div class="row">
<div class="col-12">
<table class="table tabela-documentos">
<tbody data-bind="foreach: documentsReturn().documentTypes">
<tr class="bg-cinza">
<td>
<div class="aviso-sucesso" data-bind="visible : hasAllDocuments()"></div>
<div class="aviso-critica" data-bind="visible : !hasAllDocuments()"></div> <span data-bind="text: Description"></span>
</td>
<td>
<span class="d-none" data-bind="value: IdTypeDocument"></span>
<a class="btn btn-secondary" data-bind="click: function () { $parent.saveTypeDocument(IdTypeDocument); $('.alerta-form2').hide();}" data-toggle="modal" data-target="#modalDocumento">
ADICIONAR
</a>
</td>
</tr>
<!-- ko foreach: DocumentsArray() -->
<tr>
<td><i class="fa fa-file-text-o" aria-hidden="true"></i> Inclusão: <span data-bind="text: NewDate"></span></td>
<td>
<i class="fa fa-times pointer" data-toggle="modal" data-target="#modal-confirmation" aria-hidden="true" data-bind="visible : !frombase(),
, click: function(){ #*if (confirm('Deseja realmente deletar o documento?')) {*# $parent.savePath(Path); #*}*# }"></i>
</td>
</tr>
<!-- /ko-->
</tbody>
</table>
</div>
</div>
<div class="alert-button">
</div>
</form>
</div>
I forgot to mention that i have another javascript file that bindings the div document with a different model.
Press the F12 and check for any knockout js init (ko.applyBindings) error.
If there is any, fix it and try.
If no error exist, then make sure you have set a value to the model.Name() property by debugging the code.
and check your partial view and see whether you have narrow down the scope/ binding context to another complex property of you model which also has the Name property.
It would be better if you could give more info about partial view binding declaration and the how you are setting / loading the initial values to your model.
After looking for the solution and talk with some friends i found out what was the problem. I was binding the major div, that had the div id "documentos", and another information, and this was the problem.
I remove the binding of dvUserData, and put the binding in all the div that i had, including creating a new div just for the button.
This is how my div "documentos" is now.
<div class="tab-pane fade" id="documentos" role="tabpanel" aria-labelledby="documentos-tab">
#Html.Partial("Documentos")
<div class="alert-button mb-3">
<div id="dvDocumentValidate">
<button type="submit" class="btn btn-primary botao-vert" data-bind="click: editData">SALVAR</button>
</div>
</div>
</div>
And my bindings
ko.applyBindings(model, document.getElementById("dvLoading"));
ko.applyBindings(model, document.getElementById("personaldata"));
ko.applyBindings(model, document.getElementById("address"));
ko.applyBindings(model, document.getElementById("databank"));
ko.applyBindings(model, document.getElementById("dvDocumentValidate"));
ko.applyBindings(model, document.getElementById("corporatedata"));
<div id="mainDiv">
<div class="col-md-3">
<div style="padding-top: 25px">
<button class="btn btn-default" onclick="removeFunction()" >Delete</button>
</div>
</div>
</div>
function removeFunction(){
var parent_id = $(this).parent().parent().parent().attr('id');
console.log(parent_id);
alert(parent_id);
$('#'+parent_id).remove();
}
by the upper code i want to get id of div in which button is present and delete it but in console log and in debugger the value i get is 'undefined'
You need to pass this (it was missing in your code) and you need to use that in your removeFunction function instead of this:
function removeFunction(elem) {
var parent_id = $(elem).parent().parent().parent().attr('id');
console.log(parent_id);
alert(parent_id);
$('#' + parent_id).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
<div class="col-md-3">
<div style="padding-top: 25px">
<button class="btn btn-default" onclick="removeFunction(this)">Delete</button>
</div>
</div>
</div>
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();
I'm pretty new to angular and I'm kind of stuck with an issue. I have an ng-repeat that shows items. In the items I have a "show more info" button, which when you click it should cause the a new view to replace the current one (including the show more info button). The new view would then have a "go back" button which will switch back to the original state.
Unfortunately I can't seem to figure out how to get this to work.
This is as far as I've gotten...
<article ng-repeat="item in items" class="items">
<div ng-switch on="view">
<div ng-switch-default>
<p>Default State for {{item}}</p>
<div class="btn">More Info
</div>
<div ng-switch-when="info">
<p>Info for {{item}}</p>
<div class="btn">Go back</div>
</div>
</div>
</article>
If someone could help me out here I would appreciate it. Thank you.
You can set the value of view when button is clicked. I would advise you to use item.view instead of view, it will prevent view of other elements to be toggled.
<article ng-repeat="item in items" class="items">
<div ng-init="viewDefaultValue = item.view;" ng-switch on="item.view">
<div ng-switch-default>
<p>Default State for {{item}}</p>
<div class="btn" ng-click="item.view = 'info';">More Info</div>
</div>
<div ng-switch-when="info">
<p>Info for {{item}}</p>
<div class="btn" ng-click="item.view = viewDefaultValue;">Go back</div>
</div>
</div>
</article>
Here is an working example.
(function() {
angular
.module('myApp', [])
.controller('myController', function($scope) {
$scope.items = [{
view: '',
text: 'item1'
}, {
view: '',
text: 'item2'
}]
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div ng-repeat="item in items" class="items">
<div ng-init="viewDefaultValue = item.view;" ng-switch on="item.view">
<div ng-switch-default>
<p>Default State for {{item.text}}</p>
<div class="btn" ng-click="item.view = 'info';">More Info
</div>
</div>
<div ng-switch-when="info">
<p>Info for {{item.text}}</p>
<div class="btn" ng-click="item.view = viewDefaultValue;">Go back</div>
</div>
</div>
</div>
use ng-hide and ng-show instead of ng-switch
<article ng-repeat="item in items" class="items">
<div ng-show="isviewvisible">
<div>
<p>Default State for {{item}}</p>
<div class="btn" ng-click="more()">More Info
</div>
<div ng-hide="isviewvisible">
<p>Info for {{item}}</p>
<div class="btn" ng-click="goBack()">Go back</div>
</div>
</div>
</article>
now in angularjs
$scope.isviewvisible = true;
$scope.more = function(){
$scope.isviewvisible = false;
}
$scope.goBack = function(){
$scope.isviewvisible = true;
}
when you clicked the more() it will hide the view and will show the moreinfo
when you click the goBack() it will hide the moreifo and will show the view
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.