How is possible to change button on click in command column? In my case, there should be "Validate" and "Reset" button that should be displayed as different buttons depending on Status. Function for validating works normally, but there is a problem with applying another class to the button, there is always .valid class. Here is a problem, I don't know where to apply .reset class. Thanks
template:
'<kendo button class = "k-primary button button-valid"ng-click="OnChangeStateMaterialDefinitionHeaders($event)"> #= Status == ' + STATUS_MDH_VALIDATE + ' ? " ' + kendo.htmlEncode(txt.TXT_VALIDATE) + '" : "' + kendo.htmlEncode(txt.TXT_RESET) + '" #</kendo button> ' +
'<button ng-click="OnRemoveMaterialDefinitionHeaders($event)">' + kendo.htmlEncode(txt.TXT_SET_VALIDATED) + ' </button>',
The other button is not important now, but is a part of this command column.
Related
Hey guys I'm making a little email app as a personal project for me and I had an issue when I'm appending a button element onto a div using Javascript.
Apparently, the button is displaying but it's almost invisible.
So I tried to change the value of it to "Archive" but it's remaining just a small sliver of a button that I can barely see.
How can I change the value of the button with javascript?
Thanks! Below is my code:
fetch('/emails/' + id)
.then(response => response.json())
.then(email => {
document.getElementById("message-view").innerHTML = "From: " + email.sender + "<p>To: " + email.recipients + "</p>" + "<p>Sent at: " + email.timestamp + "<p>Subject: " + email.subject + "</p>" + "<p>" + email.body + "</p>";
const archiveButton = element.appendChild(document.createElement('button'));
archiveButton.value = "Archive";
});
The value attribute doesn't set the button content. Use the textContent attribute instead : archiveButton.textContent = "Archive"
The value attribute works with input tags
Example :
<input type="button" value="Click Me">
In that case it would work
but if you had :
<button> Click Me </button>
It would not work.
You would have to use textContent or innerText
Example :
const button = document.querySelector("button")
button.textContent = "Archive"
So I got into this tricky situation. I have a variable which present table data:
row += '<td>' + c + '<button class="btn btn-success" id="' + callId + ' " onclick="handleCall()">Call</button>' + '<button class="btn btn-danger" id="' + hangupId + ' " onclick="handleHangUp()">Hangup</button>' + '</td>' ;
Latter on I will append that into my table. Now, when I click Call button, I want to get the button's Id. I have tried this way:
function handleClick() {
console.log(this);
}
but it refer to window object. Can anybody show me the way to achieve my goal? Thanks
Simply pass the elements ID as a parameter to keep it simple,
Change,
onclick="handleCall()"
to,
onclick="handleCall(this.id)"
this referring to the button in question the user is pressing.
then,
function handleClick(id) {
console.log(id);
}
Finally don't use inline event handlers as they are a pain to work with in the long run, make use of the addEventListener method.
row += '<td>' + c + '<button class="btn btn-success" id="' + callId + ' " onclick="handleCall(this)">Call</button>' + '<button class="btn btn-danger" id="' + hangupId + ' " onclick="handleHangUp()">Hangup</button>' + '</td>' ;
function handleClick(element) {
console.log(element);
//here you will have all element properties
}
There are two ways you can do this, you can do it via jQuery by using attr or if you are wanting to stay vanilla Javascript then you can use .id.
For jQuery please see code below:
console.log(jQuery('element').attr('id'));
For Javascript please see code below:
console.log(element.id);
I have an angularJS app, and on one of the pages, there are a number of widgets displayed. When the user click a 'Settings' button on that page (the button is separate to the widgets), the 'toolbar' for each widget is displayed on the widgets, with a number of buttons on each one (different buttons depending on which widget the toolbar belongs to).
I am currently trying to add a new button to the widget toolbars, which would take the user to the relevant page that each widget is showing information from.
The directive in which the widgets' HTML is rendered is:
.directive('umwWizard', function($q, $route, $modal, $timeout, $compile, ultUI,
umWidget, DialogMgr) {
var wizardTmpl = '<section ng-click="addWidget($event)" ' +
'class="glyphicon-clickable"><div data-ng-hide="swapTo != undefined">' +
'<span class="ti-widget"></span><p data-i18n="Click to add an item">' +
'</p></div></section>';
// Overlay editing panel template
var editPanelTmpl = '<div class="widget-preview-edit-panel">' +
'<span class="glyphicon glyphicon-transfer glyphicon-clickable" ' +
'data-ng-click="toggleSwapMode()" ' +
'data-ng-hide="!swap() || swapTo != undefined"></span>' +
'<span class="glyphicon glyphicon-cog glyphicon-clickable" ' +
'data-ng-click="editWidget()" ' +
'data-ng-hide="swapMode || swapTo != undefined"></span>' +
'<span class="glyphicon glyphicon-remove glyphicon-clickable"' +
' data-ng-click="deleteWidget()" ' +
'data-ng-hide="swapMode || swapTo != undefined"></span></div>'; /* +
/*ERF(28/07/2017 # 1030) Add 'naviateToPage' button to the widget toolbar
'<span class="ti-layers" ' +
'data-ng-click="goToWidgetRoot()" ' +
'data-ng-hide="swapMode || swapTo != undefined"></span></div>'; */
// Swap me button template
var swapMeBtnTmpl = '<button type="button" data-ng-click="swapMe()" ' +
'class="btn btn-sm btn-w-sm btn-gap-v btn-round wiz-swap-me" ' +
'data-ng-show="swapTo != undefined"><span data-i18n="Swap with me" ' +
'data-ng-show="swapTo != region"></span><span data-i18n="Cancel" ' +
'data-ng-show="swapTo == region"></span></button>';
return {
restrict: 'E',
// functions defined here
...
})
When I 'inspect' the toolbar element of one of the widgets when viewing the page in a browser, I can see that the toolbar icons are displayed by the section underneath the comment:
Overlay editing panel template.
I tried adding in the markup for the button that I want to add to the widget toolbar:
'<span class="glyphicons glyphicons-more-windows">' +
'data-ng-click="goToWidgetRoot()" ' +
'data-ng-hide="swapMode || swapTo != undefined"></span>' +
But for some reason, when I now view the page in the browser, the button that I've added to the widget toolbar is not displayed.
When I 'inspect' the toolbar in the browser, I can see the markup for the other buttons that were already there, but can't see the markup for the button that I've added...
Can anyone tell me why this is? What am I doing wrong here?
I'm unsure if your copypaste of the snippet for the button being added is accurate to what you intended to put on here, but it looks like you're closing the span prematurely in the first line.
It looks like it should be:
'<span class="glyphicons glyphicons-more-windows" ' +
'data-ng-click="goToWidgetRoot()" ' +
'data-ng-hide="swapMode || swapTo != undefined"></span>' +
document.getElementById("roster").innerHTML += "<button onclick=\"doSomething()\">+</button>\n" +
"<span onClick=\'$(this).remove();" +
"$(this).prev().remove();" +
"oiDelete(\"" + str + "\");" +
"removeCost(\"" + str + "\");" +
"selectedItem(\"" + str + "\");" +
"frDelete(\"" + str + "\")\';>" +
str + "</span><br>";
So this goes inside a Javascript function I'm working on. What it's supposed to do is create clickable text regions (spans) that disappear when clicked as well as generate a button right before the clickable text that is supposed to be removed when the text is clicked. I can get the text to disappear just fine, but I can't get the darn button to go away.
The code being generated is:
<button onclick="doSomething()">+</button>
<span onclick="$(this).remove();
$(this).prev().remove();
oiDelete("Marneus Calgar");
removeCost("Marneus Calgar");
selectedItem("Marneus Calgar");
frDelete("Marneus Calgar")" ;="">Marneus Calgar</span>
Why is it generating ="" at the end of the opening span tag? why is the button not deleting properly? is $(this).prev().remove() not the correct option?
If we cast aside best practice, this is the working code.
document.getElementById("roster").innerHTML += "<button onclick=\"doSomething()\">+</button>\n" +
"<span onClick=\'$(this).prev().remove();" +
"$(this).remove();" +
"oiDelete(\"" + str + "\");" +
"removeCost(\"" + str + "\");" +
"selectedItem(\"" + str + "\");" +
"frDelete(\"" + str + "\")\'>" +
str + "</span><br>";
The reason why your code doesn't work is because you are removing the span which has onclick function on the fly. It means it can't reach the $(this).prev().remove() bit.
I hope it makes sense.
If you want to go an extra mile, you should put $(this).remove(); after the frDelete() function. Otherwise those 4 functions that you call will never be called.
You messed up quotation marks and of course - call self-remove code at the end (!)
And one tip - encapsulate these additional function in one procedure - it help to keep code cleaner.
document.getElementById('roster').innerHTML += '<button onclick=\'doSomething()\'>+</button>' +
'<span onClick="doCalls(); $(this).prev().remove(); $(this).remove(); ">' + str + '</span><br>';
I am sending attachments in email, while sending user can actually add multiple attachments. My code is keep displaying the browse button for every time. I want to display only one button and let the user opens the file picker for any no of attachments.
Please tell me whats wrong with my code.
Also see the attached image. Which is something I don't want that behavior.
What I want is on clicking the attach more button it should automatically open the file picker. Currently it is displaying the
Thank you.
<div class="col-sm-10">
<div class="element">
<label>Attachment</label>
<span class="upload_file_button"><input type="file" name="upload_file1" id="upload_file1"/></span>
</div>
<div id="moreImageUpload"></div>
<div id="moreImageUploadLink" style="display:none;margin-left: 10px;">
Attach More
</div>
</div>
</div>
</div>
javascript
<script type="text/javascript">
// onclick browse button attach the file id and show the attachmore link
$(document).ready(function() {
$("input[id^='upload_file']").each(function() {
var id = parseInt(this.id.replace("upload_file", ""));
$("#upload_file" + id).change(function() {
if ($("#upload_file" + id).val() != "") {
$("#moreImageUploadLink").show();
}
});
});
var upload_number = 2;
$('#attachMore').click(function() {
//add more file. Everytime clicking on attachmore link show the browse button also attach more as well.
var moreUploadTag = ''
moreUploadTag += '<div class="element"><label for="upload_file"' + upload_number + '>Upload File ' + upload_number + '</label>';
moreUploadTag += '<span class="upload_file_button"><input type="file" id="upload_file' + upload_number + '" name="upload_file' + upload_number + '"/></span>';
moreUploadTag += ' Delete ' + upload_number + '</div>';
$('<dl id="delete_file' + upload_number + '">' + moreUploadTag + '</dl>').fadeIn('slow').appendTo('#moreImageUpload');
upload_number++;
});
});
function del_file(eleId) {
var ele = document.getElementById("delete_file" + eleId);
ele.parentNode.removeChild(ele);
}
</script>
On click + Attach More it is displaying the browse button. Instead I want to open the file picker right away upon clicking + Attach more.
Just add this line
$('#upload_file' + upload_number).trigger('click');
before
upload_number++;
in order to have the "Attach more" button to trigger the opening of the file pickup.
Then you could hide the input file tag with CSS.