in this fiddle,under appointments tab,there is a add timing button.When this button is clicked then a new row is added along with another add timing button.But I did not want another add timing buttons so i made this fiddle
added a class timing
<button class="btn btn-primary timing" type="button" data-bind="click: $parent.addSlot" value="Add">Add Timing</button>
and
in js
self.addSlot = function () {
//self.schedules.push(new Model.Schedule(null));
console.log('added');
self.doctor.schedules.push(new Schedule(null));
$('.timing:last').hide();
};
now the problem in the above fiddles there is one JSON so initally only one add timing button is added but if the JSON is 2 then 2 add timings button are added like this fiddle
so can any body please tell me how will I have only on add timings button.
You can move the Add Timing button outside the table and access the $root context instead of the $parent context
<!-- ... -->
</table>
<button class="btn btn-primary timing" type="button" data-bind="click: $root.addSlot" value="Add">Add Timing</button>
This way the Add Timing button will not be duplicated with every entry. You must also remove the
$('.timing:last').hide();
Otherwise, the button will be hidden on your first adding.
See updated JSFiddle
Update:
According to Binding context, $data works equally well in this case
data-bind="click: $data.addSlot"
See another JSFiddle
Related
I have such a small javascript code (I use it in Markdown):
<button title="Click to show answer" type="button" class="btn btn-primary"
onclick="if(document.getElementById('spoiler') .style.display=='none')
{document.getElementById('spoiler') .style.display=''}
else{document.getElementById('spoiler') .style.display='none'}">
show/hide
</button><div id="spoiler" style="display:none">
***
Hidden Text
***
</div>
The problem is that if I want to make several buttons on one page to hide the text, then I need to rename spoiler to spoilerN 4 times
Questions:
(Minimum) Is it possible to compactly output Id to a separate variable in this piece of code?
(Maximum) Is it possible to automatically generate a variable? So that the code itself reuses the variable every time a new button is declared?
You would be better doing away with inline style AND javascript, and doing this in css with some javascript to control adding.removing css classes.
Assuming the button is always a sibling of the spoiler div, you can do this by having just a class on the spoiler div and attaching it automatically to every instance on a page:
document.querySelectorAll(".spoiler").forEach(s => {
s.previousSibling.addEventListener("click", () => {
s.classList.toggle("show");
});
})
.spoiler{
display:none
}
.show{
display:block
}
<button title="Click to show answer" type="button" class="btn btn-primary">
show/hide
</button><div class="spoiler">
***
Hidden Text
***
</div>
Jamie's answer turned out to be very similar to the truth! Thanks!
But in Markdown, my colleagues and I made a number of small edits, because the solution did not work right away. The working version looks like this:
First chunk (One, at the beginning of the document (or in style.css for all Rmd files in bookdown)):
.spoiler{
display:none
}
.show{
display:block
}
The second piece (actually hidden texts)
<button title="Click to show answer" type="button" class="btn btn-primary">
show/hide
</button><div class="spoiler">
***
Hidden Text
***
</div>
<button title="Click to show answer" type="button" class="btn btn-primary">
show/hide
</button><div class="spoiler">
***
Hidden Text2
***
</div>
The third piece (one, at the very end of the Rmd file)
Changed previousibling to previousElementSibling
document.querySelectorAll(".spoiler").forEach(s => {
s.previousElementSibling.addEventListener("click", () => {
s.classList.toggle("show");
});
})
Thank you for your help!
So I have a project where I had sets of buttons created dynamically. Each set has two buttons, and when one is clicked it's collapsible content appears. If you click the other button in the set, the first button's content disappears, and the second button's content appears. (For the sake of brevity I figured I'd exclude the content). The total sets can be determined by simply changing the value of a variable called totalSetsOfButtons. Right now, it is set to the number 8, so there will be eight sets of two buttons.
In the first button's collapsible content, there is an image upload that the user can interact with. If the user interacts with this, I want the second button to disable. When the user loads an image, a variable called isImageAdded is switched from null to true, which tells the disabled attribute to trigger in the second button as you can see below. The problem is, if an image is added, this disables ALL of the second buttons in every set.
<div *ngFor="let item of totalSetsOfButtons; let i = index">
<h5 class="set-num">Set #{{i+1}}</h5>
<div class="set-btns">
<div class="set{{i}}-btn1" id="set-btn1">
<p>
<button class="btn btn-primary btn-light question-btn1" type="button" data-toggle="collapse" [attr.data-target]="'#collapseExample' + i" aria-expanded="false" [attr.aria-controls]="collapseExample1"> Add New Question
</button>
</p>
</div>
<div class="set{{i}}-btn2" id="set-btn2">
<p>
<button class="btn btn-primary btn-light question{{i}}-btn2" [disabled]="isImageAdded" type="button" data-toggle="collapse" [attr.data-target]="'#collapseExample2' + i" aria-expanded="false"
[attr.aria-controls]="collapseExample2">Add Pre-existing Question
</button>
</p>
</div>
</div>
</div>
How do I only disable the second button in the set the user is interacting with? Any help is appreciated!
The problem is that you have set the [disabled] property to isImageAdded which is a global property in the component. So setting it to true/false will affect the disabled state of all the buttons bound to it.
In it's place, you might prefer to set a variable in the totalSetsOfButtons array, and use that to enable/disable the corresponding button.
For example:
totalSetsOfButtons = [
{ ...yourEarlierArgs, isImageAdded: false },
{ ...yourEarlierArgs, isImageAdded: false },
... more 6 similar items
];
And when you interact with the application, you can update the value of the isImageAdded in the array item, and use it.
<button [disabled]="item.isImageAdded">Add Pre-existing Question</button>
I have my simple Phonegap app, which is based on tabbed layout. On one of these tabs I have list of tags (more than one). All of these have buttons to edit and delete. Its like this:
<div class="tag-buttons" uid="TAG_ID">
<button class="edit-tag btn btn-default btn-sm">Edit</button>
<button id="aaa" class="remove-tag btn btn-danger btn-sm" onclick="removeTag()">Remove</button>
</div>
Now I want do handle this removeTag() function. So I have in my JS file this function:
function removeTag()
{
//controller.removeTag($(this).parent().attr("uid"));
console.log($(this));
}
Console.log and commented line are only samples. I want to know which button was clicked (I need uid value). All of buttons have this same class. $(this) is returning Window object.
Any ideas?
I had made stupid error. Now everything is working.
I had to change onclick="removeTag()" to onclick="removeTag(this)" and then in JS function was quite good. I changed function declaration to use additional argument like this:
function removeTag(button)
{
var id = $(button).parent().parent().attr("uid");
controller.popTag(id);
}
I am new to javascript. Please find the below code for button,
<p class="actions">
<button class="button primary" type="submit">Login</button>
Sign Up
</p>
I need code to click this button. Anyone please help me. Thanks in advance.
Can you provide the rest of your code including the script section so we can see what you have there?
Basically however, if you just need the button to register a click I would change the button Id to an element since it's a unique element. Let's call it id =button1 . Then in your script section you would type
document.getElementById("button1").onclick=function(){
}
And type what you want to happen inside the {}
I have to render a html page residing in templates/home.html
I have a button in index.html as:
<div id="browse_app">
<button class="btn btn-large btn-info" type="button">Browse</button>
</div>
All I want to do is when I click on Browse, it takes me to home.html
I tried to write jQuery as:
// onClick on 'Browse' load the internal page
$(function(){
$('#browse_app').click(function(){
$.load('templates/home.html');
});
});
But this doesn't work since load needs to put data somewhere in current page
How do I get to the home.html on button click?
As far as I can tell you are using Twitter Bootstrap. The documentation for Buttons addresses your point:
Default buttons
Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.
This is what you want:
<div id="browse_app">
<a class="btn btn-large btn-info" href="templates/home.html">Browse</a>
</div>
In the worst case scenario, this way the rendering of the button won't look nice but the link will work. Using JS, your worst case scenario will render the link useless.
Use: onclick="window.location='INSERT HTML FILE HERE'" in your button tag
One I prepared earlier:
<button class="btn" style="text-align:inherit" onclick="window.location='./Learn/'">« About HerdMASTER 4</button>
I wanted to go to the directory Learn from another directory in the same folder
It's a more elegant solution using the bootstrap class that is included, meaning you don't have to hack code into your page. I wish there was a bit more functionality documentation about the various classes for bootstrap as I figured this out from the above code rather than finding it by a google search.
Use this:
$(function(){
$('#browse_app').click(function(){
window.location='templates/home.html'
});
});
Use onclick="window.open('YourPage.aspx','_self');"
For Example:
<button type="submit" onclick="window.open('YourPage.aspx','_self');" class="btn btn-default">Your Page</button>