Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a button element that is hidden at the beginning.
However, I have to display it on certain trigger using JavaScript. But when its triggered it gets pushed to next line. See the Image below :-
What I actually want is :-
Here is my Html code:-
<div id="toolbar">
Launch Access Log Report <a href="#" style="display: none" class="btn btn-secondary" type="button" id="fresh" >Refresh Table Updated</a>
</div>
and my JavaScript code which push it to next line:-
function check(data)
{
if (data === 'no')
{ document.getElementById("fresh").style.display='block';}
}
What is messing it up please explain and how can I fix this issue.
display: block will start on a new line and will take up the full width available. Use display: inline-block or display: inline instead.
Using display: block
<button onclick="show()">Show</button>
<div>
Launch Access Log Report
Refresh Table Updated
</div>
<script>
function show() {
document.getElementById("fresh").style.display = "block";
}
</script>
Using display: inline-block
<button onclick="show()">Show</button>
<div>
Launch Access Log Report
Refresh Table Updated
</div>
<script>
function show() {
document.getElementById("fresh").style.display = "inline-block";
}
</script>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a table where when clicking a button, I need to disable the button if the status from the backend is approved. I added the disable property to the button based on the condition but the condition is not working.
If I use the condition .receiptStatus=='APPROVED' it's not working.
this.receipt = this.dataSource.data;
this.receipts = this.receipt.forEach(element => {
this.receivableStatus = element.status
console.log(this.receivableStatus);
});
// this.receivableStatus has the response from the backend.
.disable {
cursor: not-allowed;
pointer-events: none;
}
<button mat-raised-button mat-button-sm class="table-action-btn" color="orange"
[disabled]="this.receiptStatus=='APPROVED'"
[ngClass]="{'disable':this.receiptStatus=='APPROVED'}" (click)="openCreateReceipt(row)">
<mat-icon class="size-16" color="white">edit</mat-icon>
</button>
you should not use this in HTML.
<button mat-raised-button mat-button-sm class="table-action-btn" color="orange"
[disabled]="receiptStatus=='APPROVED'"
[ngClass]="{receiptStatus=='APPROVED' ? 'disable' : ''}" (click)="openCreateReceipt(row)">
<mat-icon class="size-16" color="white">edit</mat-icon>
</button>
Hope this helps
i found the solution for this , i have done it on another way .since iam using matatable datasource to display the status in the status column i used that
<button mat-raised-button mat-button-sm class="table-action-btn"
color="orange"[disabled]="row.status=='APPROVED'"
[ngClass]="{'disable':row.status=='APPROVED'}"
(click)="openCreateReceipt(row)">
<mat-icon class="size-16" color="white">edit</mat-icon>
</button>
it works fine.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
<!DOCTYPE html>
<html>
<body>
<h1>Change an HTML element</h1>
<p id="msg">Now you see me.</p>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Gone!'">
Click Me!</button>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Back again!'">
Bring me back!</button>
</body>
</html>
Can someone explain what this does?
When you click on the first button it fires an onclick event attribute. You've told the event to find an element by the ID of 'msg'. Which is the <p> tag above.
It finds it and then replaces the innerHTML value of "Now you see me" with the string 'Gone!'. Pretty much the same thing happens with the second button.
You can learn more about it at the web address below.
http://www.w3schools.com/tags/ev_onclick.asp
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
i have simple jquery code on my page for show and hide two panels. it works clearly Firefox, but not in Chrome and Explorer.
when i click "Next" button later "Back" button, All the design of the page is distorted .
And i added "show alert" button. When alert is show page is distorted again.
$(function() {
$("#button").click( function()
{
alert('button clicked');
}
);
});
plaese refer problems link: http://bit.ly/1v982qc
<script>
$(function () {
$("#adm2").hide();
$("#adm3").hide();
});
$('#button1').click(function () {
if ($('#year1').prop('checked') == false && $('#year2').prop('checked') == false) { }
else {
$('#adm1').hide(); $('#adm2').show()
if ($('#year1').prop('checked')) {
$("#ruckpanel").show();
}
else {
$("#ruckpanel").hide();
}
}
});
</script>
Thank You!
INITIAL - From start the page look like this:
After clicking "Next" button it looks like this:
After clicking "Back" button it looks like this:
There are probably multiple errors, but this is too big for a comment:
The click handlers in one block look like this:
<span class="pull-left"><div style="width:100px"> <button type="button" class="btn btn-default btn-block" onclick="$('#adm3').hide();$('#adm2').show();"> Back <i class="fa fa-arrow-circle-left fa-lg"> </i></button></div></span>
<span class="pull-right"><div style="width:150px"> <button type="button" class="btn btn-primary btn-block" onclick="$('#adm2').hide();$('#adm3').show();">Next <i class="fa fa-check fa-lg"> </i> </button></div></span>
i.e. the relevant part looks like:
onclick="$('#adm3').hide();$('#adm2').show();"> Back <
onclick="$('#adm2').hide();$('#adm3').show();">Next <
That first one should probably be:
onclick="$('#adm2').hide();$('#adm1').show();"> Back <
as it makes no sense to hide the next page and show the current one!
Suggestion:
I imagine there are many other maintenance problems in this type of coding, so I strongly suggest you unload the gun you have pointed at your own head and stop using onclick= attributes for event handlers! Use jQuery instead for all of them as per your example (you obviously know how to use them that way).
once your code is all in one place error like that will become obvious and you will spot much simpler ways to code the page behavior.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I'm developing a CMS using metronic and also making some modifications. I have a weird problem with jquery.
I have a html syntax like this :
<div id="remove">
Remove
</div>
Then I coded the click event function in Jquery like this :
$("#remove a[id='remove_img_127']").live('click',function(){
alert('test1');
});
Strangely, when the other button using anchor tag - let say 'show picture' button - clicked, it also triggered the click event function i coded above. FYI, This 'show picture' button display an html page which this html syntax
<div id="remove">
Remove
</div>
inside the page.
I have tried many things, but still they trigger click event function.
Do you guys have the same problem and how to solve it.
Thank you
I recommend you to use on instead of live.
$("#remove #remove_img_127").on('click',function(e){
e.stopPropagation();
alert('test1');
});
Regards.
My "Show Picture" button has HTML syntax like this :
<a class="btn mini green-stripe btn-show-picture" ref="17">
Show Picture
</a>
This "Show Picture" button trigger to display this form :
<div class="portlet box blue" id="form_add_1" style="display:none;">
<form enctype="multipart/form-data" method="post" class="horizontal-form" id="form1">
.........
<div id="remove">
Remove
</div>
......
</form>
</div>
the "Show Picture" button triggered this Jquery syntax :
$(".btn-show-picture").live('click', function(){\
$("#form_add_1").show();
});
Whenever i clicked the 'Show Picture' button, it also triggered the Remove click event function
$("#remove a[id='remove_img_127']").live('click',function(){
alert('test1');
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
i'm still new to this. . i want the value to display in a div that i already defined in css when i click a button. but the only thing that come out is the button. i just can't get the right result that i wanthere's what i've done.
<?php
var $val=001;
function increase(){
echo "<div id='display' >$val++</div>" ;
}
?>
<body>
<div id="display">
<button type="button" onclick="increse()">click me!!</button>
</div>
</body>
---------------------my #display in css-------------
.display{
height: 200px;
width: 500px;
background-color:#CECECE;
}
please help. or maybe refer me to something useful. thank you :)
<body>
<div id="display">
<button type="button" onclick="increase()">click me!!</button>
</div>
</body>
you should use javascript with this
`
function increase()
{
var val=001;
document.getElementById('display').innerHTML=val++;
}
</script>`
if you want to do this in php:
<body>
<div id="display">
<button type="button" onclick="<?php increase(); ?>">click me!!</button>
</div>
</body>
but this will not give the wanted results as this will append another div with same id display
HTML
<div class="likes">13</div>
<button class="btn">Increment</button>
jQuery
$('.btn').click(function() {
var num = parseInt($('.likes').text());
$('.likes').text(num+1);
});
JSFIDDLE DEMO
Now you can modify it according to your needs