I have a list of containers and I want to add a button that display a terminal on the container where we clicked on the terminal logo.
But I don't how to catch the index of the container in the list.
My HTML is :
<li class="liContainer">
<div>
<h3>{{nameContainer}}</h3>
</div>
<div id="idContainer">
<span>ID: {{idContainer}}</span>
</div>
<div id="stateContainer">
<span class="state">State: {{stateContainer}}</span>
</div>
<div id="terminalContainer" class="hidden">
<div class="terminal hidden"></div>
</div>
<button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button>
<button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button>
<button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button>
<button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button>
<button type="button" class="cmdLogs"> terminal </button>
</li>
And my JS :
'click .cmdLogs'(event) {
Session.set("displayCmdLogs",true);
//here I need to do something to get the ID with the event and then I could do...
setTimeout(function(){
var term = new Terminal();
console.log("term: " + term);
//.. the getElement on the right one
term.open(document.getElementsByClassName('terminal')[idFromEvent]);
//term.fit();
term.write('Hello from container.js');
},200);
}
I'm assuming the id you want to catch is "idContainer". I'd modify your HTML as follows :
<li class="liContainer">
<div>
<h3>{{nameContainer}}</h3>
</div>
<div id="idContainer">
<span>ID: {{idContainer}}</span>
</div>
<div id="stateContainer">
<span class="state">State: {{stateContainer}}</span>
</div>
<div id="terminalContainer" class="hidden">
<div class="terminal hidden"></div>
</div>
<button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button>
<button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button>
<button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button>
<button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button>
<button type="button" class="cmdLogs" id="{{idContainer}}"> terminal </button>
</li>
And you js :
'click .cmdLogs'(event, template) {
Session.set("displayCmdLogs",true);
var id = event.currentTarget.id; //The id is here
setTimeout(function(){
var term = new Terminal();
console.log("term: " + term);
//.. the getElement on the right one
term.open(document.getElementsByClassName('terminal')[idFromEvent]);
//term.fit();
term.write('Hello from container.js');
},200);
}
Related
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
<button
class="button-default button-m panel-heading-margin"
type="button"
ng-if="!$last"
ng-click="deleteButton();"
>
<i class="icon16 icon-delete v-sub di-block mr-0"></i>
</button>
<div class="modal-footer mt-10 p-0">
<div
id="deleteview"
class="bg-gray-light row"
ng-show="$scope.displayModal"
>
<div class="col-md-9">
<h4 class="p-15 text-left">
You are going to <b>Delete</b> the <b>Mapping</b> you have
selected. Are you sure you want to continue?
</h4>
</div>
<div class="col-md-3">
<div class="pt-25 text-right pr-5">
<button class="button-cancel button-m">Cancel</button>
<button id="deletesinglemap" class="button-m button-primary">
Delete
</button>
</div>
</div>
</div>
<div id="addview" class="pull-right p-20" ng-hide="$scope.displayModal">
<span class="button-cancel" data-dismiss="modal">Cancel</span>
<button id="addmapping" class="button-m button-primary" type="button">
Add
</button>
</div>
</div>
Controller:
$scope.slideUpModal = function () {
$scope.displayModal = true;
$("#deleteview").show();
$("#addview").hide();
};
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
I have six buttons and I want to have all in one function. For each button is a different div available and if I click for example the third button, then should pop up the div for the third button.
javascript:
function kfunc(){
var x = document.getElementById("id1"||"id2"||"id3"||"id4"||"id5" || "id6")
x.style.display = 'block';
x;
}
function closefunc(){
document.getElementById("id1"||"id2"||"id3"||"id4"||"id5" || "id6").style.display = 'none';
}
function testfunc(){
alert("test");
}
HTML:
<button id="btn1" onclick="kfunc()">Küche</button>
<button id="btn2" onclick="kfunc()">Bad</button>
<button id="btn3" onclick="kfunc()">Wohnzimmer</button>
<button id="btn4" onclick="kfunc()">Melina</button>
<button id="btn5" onclick="kfunc()">Kleines Bad</button>
<button id="btn6" onclick="kfunc()">Schlafzimmer</button>
<!-- Küche -->
<div class="frame_kueche" id="id1">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">ab</button>
</div>
<!-- Bad -->
<div class="frame_bad" id="id2">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Wohnzimmer -->
<div class="frame_wohnzimmer" id="id3">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Melina -->
<div class="frame_melina" id="id4">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- kleines Bad -->
<div class="frame_kleines_bad" id="id5">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Schlafzimmer -->
<div class="frame_schlafzimmer" id="id6">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
It works almost! Logically when there is id1 available, it will use id1 and not the others. How can I fix it? Like I said: When btn3 is clicked then the div with id3 should show up but it always shows id1.
Look at your javascript. Actually you don't need to set id attribute for your buttons.
Just add your frame id as parameter to kfunc and closefunc function. Like this:
function kfunc(id) {
console.log(id)
document.getElementById(id).style.display = 'block'
}
function closefunc(id) {
console.log(id)
document.getElementById(id).style.display = 'none'
}
Usage:
onclick="kfunc('id1')"
onclick="closefunc('id1')"
Note: My solution is not tested. Hope you get the idea.
If you change your html to include a data attribute in the buttons, and to also pass 'this' in your onClick function call
<button id="btn1" data-div="id1" onclick="kfunc(this)">Küche</button>
<button id="btn2" data-div="id2" onclick="kfunc(this)">Bad</button>
And then in your function you can check which button was pressed, and display the appropriate div.
function kfunc(thispass) {
let fish = thispass.getAttribute('data-div');
document.getElementById(fish).style.display = 'block';
}
As for the close button. If you give all of the divs a common class, you can hide them all at once.
You can't use getElementById like this. you should use getElementByClassName or you can use the code below:
function kfunc(id){
var btn = id;
document.getElementById(id).style.display = 'block';
}
function closefunc(id){
var selectedDiv = id;
document.getElementById(id).style.display = 'none';
}
function testfunc(){
alert("test");
}
div[class^= "frame"]{
display: none;
}
<button id="btn1" onclick="kfunc('id1')">Küche</button>
<button id="btn2" onclick="kfunc('id2')">Bad</button>
<button id="btn3" onclick="kfunc('id3')">Wohnzimmer</button>
<button id="btn4" onclick="kfunc('id4')">Melina</button>
<button id="btn5" onclick="kfunc('id5')">Kleines Bad</button>
<button id="btn6" onclick="kfunc('id6')">Schlafzimmer</button>
<!-- Küche -->
<div class="frame_kueche" id="id1">
<div class="buttons_close">
<button onclick="closefunc('id1')">X</button>
</div>
<button onclick="testfunc()">ab</button>
</div>
<!-- Bad -->
<div class="frame_bad" id="id2">
<div class="buttons_close">
<button onclick="closefunc('id2')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Wohnzimmer -->
<div class="frame_wohnzimmer" id="id3">
<div class="buttons_close">
<button onclick="closefunc('id3')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Melina -->
<div class="frame_melina" id="id4">
<div class="buttons_close">
<button onclick="closefunc('id4')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- kleines Bad -->
<div class="frame_kleines_bad" id="id5">
<div class="buttons_close">
<button onclick="closefunc('id5')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Schlafzimmer -->
<div class="frame_schlafzimmer" id="id6">
<div class="buttons_close">
<button onclick="closefunc('id6')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
I've got a page with multiple div elements of class 'container', ie:
<div class="container">
<div class="data">
<a class="myclass" href="foo" origin="internal"> 123456789 </a>
</div>
<div class="actions">
<button class="save" role="add" add="Save" remove="Remove"> Save </button>
<button class="delete" role="add" remove="Discard" rel="nofollow"> Discard </button>
</div>
</div>
How can I select all buttons of class 'delete', but only if the a element had origin="internal"?
The common ancestor of both elements is the div of class "container".
Besides, how can I programmatically click on all those buttons on page load?
You can select all the buttons with class="delete" and then you can use an if else statement. For example:
$('.delete').on('click',function(){
if($(this).parent().data('origin') == 'internal'){
//do something
}else{
//do something else
}
})
Filter and map all containers:
const result = Array.from(document.querySelectorAll(".container"))
.filter(c => c.querySelector("a[origin=internal]"))
.map(c => c.querySelector("button.delete"));
console.log(result);
<div class="container">
<div class="data">
<a class="myclass" href="foo" origin="internal"> A </a>
</div>
<div class="actions">
<button class="save" role="add" add="Save" remove="Remove"> Save </button>
<button class="delete" role="add" remove="Discard" rel="nofollow"> Discard A </button>
</div>
</div>
<div class="container">
<div class="data">
<a class="myclass" href="foo" origin="external"> B </a>
</div>
<div class="actions">
<button class="save" role="add" add="Save" remove="Remove"> Save </button>
<button class="delete" role="add" remove="Discard" rel="nofollow"> Discard B </button>
</div>
</div>
<div class="container">
<div class="data">
<a class="myclass" href="foo" origin="internal"> C </a>
</div>
<div class="actions">
<button class="save" role="add" add="Save" remove="Remove"> Save </button>
<button class="delete" role="add" remove="Discard" rel="nofollow"> Discard C </button>
</div>
</div>
(Furthermore, i believe that jQuery should never be used.)
<div class="panel">
<div class="panel-heading item-name">T-shirt1</div>
<div class="panel-body"><img src="img/shirt1.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$15.32</span></h5>
<h4>$17.56</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt2</div>
<div class="panel-body"><img src="img/shirt2.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$21.67</span></h5>
<h4>$23.15</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt3</div>
<div class="panel-body"><img src="img/shirt3.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$16.69</span></h5>
<h4>$16.80</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
What I really want is to retrieve the value of each item-name when I click on the Add to cart button. If I click on the first button, I should get T-shirt1, second button should alert T-shirt2, third button => T-shirt3.
Here is my jQuery script.
<script>
$('.add-to-cart').click(function() {
var itemName = $('.item-name', this).text();
alert(itemName);
});
</script>
You can try this:
$('.add-to-cart').click(function() {
var itemName = $(this).closest('.panel').find('.item-name').text();
alert(itemName);
});
Usage of the closest method: closest
Go from clicked button up in parents chain until you find .panel and then down in children tree until you find .item.name:
$('.add-to-cart').click(function() {
var itemName = $(this).parents('.panel').children('.item-name').first().text();
alert(itemName);
});
I am using InitalFileList to load files from previous session. My uploaded files will have additional s3 metadata value, which I need to show part of InitialFileList. In the server-side I do add additional metadata to jason object, which I can see in the console output(response).
My question is....
How to set new metadata/property(qq-edit-caption is input field in my template) to HTML display. I do not see any parameter in below callback to get handle on dom. Any help is much appreciated.
onSessionRequestComplete(response, success, xhrOrXdr) {
//
}
My HTML template:
<script type="text/template" id="qq-template-manual-trigger-section1">
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="buttons">
<div class="qq-upload-button-selector qq-upload-button">
<div>Select files</div>
</div>
<button type="button" id="trigger-upload-section1" class="btn btn-primary">
<i class="icon-upload icon-white"></i> Upload
</button>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
<li>
<div class="qq-progress-bar-container-selector">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<div>
<img class="qq-thumbnail-selector" qq-max-size="80" qq-server-scale>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon qq-editable" aria-label="Edit filename"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
</div>
<span class="qq-upload-caption-selector qq-upload-caption"></span>
<span class="qq-edit-caption-icon-selector qq-edit-caption-icon kk-editable" aria-label="Edit caption"></span>
<input class="qq-edit-caption-selector qq-edit-caption kk-editing" placeholder="Caption here ..." tabindex="0" type="text">
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-update-caption" onclick="captionUpdate(true);">Update Caption</button>
<button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete" onclick="captionUpdate(false);">Delete</button
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
If your onSessionRequestComplete callback handler, you can:
Iterate over the entries.
Map each entry to a Fine Uploader file ID using the getUploads API method.
Get a handle on each container element in the DOM using the getItemByFileId API method.
Select the caption input and update it with the desired value.
For example:
onSessionRequestComplete: function(response, success) {
if (success) {
var uploader = this
response.forEach(function(item) {
var id = uploader.getUploads({uuid: item.uuid}).id
var fileEl = uploader.getItemByFileId(id)
fileEl.querySelector('.qq-edit-caption').value = item.caption
})
}
}