I was tried to add forms using jQuery and it succeeded.
This time I'm trying to show and hide some buttons(#remove_form, #add_form)
but always not working:(
my jQuery codes(referred this question's answer):
$(document).ready(function(){
var index_num = 1;
var max_num = 7;
$("#add_form").click(function(e){
e.preventDefault();
if(index_num < max_num){
index_num++;
$("#event").each(function(){
$(this).clone().insertAfter(this).attr("id","event" + index_num);
$("#add_form" + index_num).css("display","none");
$("#remove_form" + index_num).css("display","inline");
});
}
});
$("#remove_form" + index_num).click(function(e){
e.preventDefault(); $(this).parent(".row collapse").remove(); index_num--;
});
});
+) I did not wrote "#add_form" button's css code. just this:
#remove_form{
display: none;
}
HTML codes:
<div class="row collapse" id="event">
<div class="small-2 large-2 columns">
<h7>example</h7>
</div>
<div class="small-2 large-2 columns">
<form>example</form>
</div>
<div class="small-2 large-2 columns">
<form>example</form>
</div>
<div class="small-1 large-1 columns">
<h7>example</h7>
</div>
<div class="small-2 large-2 columns">
<form>example</form>
</div>
<div class="small-1 large-1 columns">
<h7>example</h7>
</div>
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny alert" id="remove_form"></button>
</div>
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny" id="add_form"></button>
</div>
</div>
+) HTML codes after clicking '#add_form' button:
<div class="row collapse" id="event">...</div>
<div class="row collapse" id="event7">...</div>
<div class="row collapse" id="event6">...</div>
<div class="row collapse" id="event5">...</div>
<div class="row collapse" id="event4">...</div>
<div class="row collapse" id="event3">...</div>
<div class="row collapse" id="event2">
...
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny alert" id="remove_form"></button>
</div>
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny" id="add_form"></button>
</div>
</div>
How can I solve this problem?
You have to use the id attribute only when you know your item is unique.
If you have multiple id="event" then you need to use class="event" instead and $(".event").each instead of $("#event").each.
If my assumptions are correct, you are trying to make a copy of event form when you click on #add_form button. Then, it's advised to provide a remove button inside the #event form so that every clone has his own remove button and a single add button outside of the #event element.
If you put it that way it's not about Show/Hide rather Add/Remove DOM elements.
<div id="to_clone" style="display:none">
<div class="row collapse" class="event">
...
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny alert" class="remove_form"></button>
</div>
</div>
</div>
<div id="events_container">
<button type="submit" class="button tiny" id="add_form"></button>
</div>
Jquery
$('#add_form').click(function(){
event=$("#to_clone").html();
$(this).before(event);
});
$(document).on('click', '.remove_form', function(){
$(this).closest(".event").remove();
return false;
});
In case you're wondering how to submit those forms you can add a function that translate inputs into json.
function getEventsJson()
{
var json='[';
$('.event').each(function()
{
json=json+'{ "field1": "'+$(this).find('.field1class').val()+'","field2": "'+$(this).find('.field2class').val()+'"},';
});
json=json.replace(/,\s*$/, "");
json=json+']'
return json;
}
Or provide for each event it's own form and submit them one by one.
$('.event').each(function()
{
var form=$(this).find('form');
$.ajax({
type:"POST",
url: "/events",
data: {
'event' : form.serialize(),
},
dataType: 'json',
success: function(data) {
},
error: function(data){
}
});
}
Related
This is probably a simple task for you Jquery Guru's but I am really battling to do this.
I have two links and I want them to hide and show two forms.
Initially both forms must be hidden, and when you click on button 1 it must show form 1 and when you click the same button again, it must hide form 1. However if Form 1 is shown, and you click on BTN 2 it must hide Form 1 and show Form 2 and similarly if Form 2 is shown, and you click on BTN 2 again it must hide Form 2.
Sort of like Toggling between the two forms but being able to also hide the other form is if it visible.
This is as far as I have gotten. But it is not working like I want, and moreover it seems to be conflicting with the scripts on Bootstrap 4.
$(document).ready(function() {
$("#btn1").click(function() {
$("#form1").toggle(300);
$("#form2").hide(300);
});
$("#btn2").click(function() {
$("#form2").toggle(300);
$("#form1").hide(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Btn 1
Btn 2
<div id="form1" style="display: none;">
<div class="col-lg-12 text-center">
<h4>Advanced Search Leather</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Form 1</h4>
</div>
</div>
<div id="form2" style="display: none;">
<div class="col-lg-12 text-center">
<h4>Advanced Search Gumboots</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Form 2</h4>
</div>
</div>
I also tried this. This works by changing between the forms, but if a form is opened, clicking the same button doesnt close (toggle) the form. By the way, this script works in Bootstrap 4.
$("#leather").click(function() {
var id = $(this).attr("id");
$("#pages div#gumboots").css("display", "none");
$("#pages div#" + id + "").css("display", "block");
});
$("#gumboots").click(function() {
var id = $(this).attr("id");
$("#pages div#leather").css("display", "none");
$("#pages div#" + id + "").css("display", "block");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="leather">leather</button>
<button type="button" id="gumboots">gumboots</button>
<div id="pages">
<div id="leather" class="mydivshow" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Leather</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
<div id="gumboots" class="mydivhide" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Gumboots</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
</div>
Simply change the css() function to toggle() function. css() function will not toggle.
$("#leather").click(function() {
var id = $(this).attr("id");
$("#pages div#gumboots").css("display", "none");
$("#pages #" + id + "").toggle();
});
$("#gumboots").click(function() {
var id = $(this).attr("id");
$("#pages div#leather").css("display", "none");
$("#pages #" + id + "").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="leather">leather</button>
<button type="button" id="gumboots">gumboots</button>
<div id="pages">
<div id="leather" class="mydivshow" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Leather</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
<div id="gumboots" class="mydivhide" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Gumboots</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
</div>
I encountered a strange problem with my *ngIf on one particular variable isAdmin (which should allow me to display the list of users in userList). I'm not sure why its behaving different from all the other *ngIf statements in the same component.
heres a snippet of my js code for the component. This is where isAdmin is being switched from false to true if the user is an Admin.
_initAutorun(): void {
this.autorunComputation = Tracker.autorun(() => {
this.zone.run(() => {
this.usersList = Meteor.users.find({}).fetch(); //update the users list automatically
this.currentUser = Meteor.user(); //update the current user automatically
this.isLoggingIn = Meteor.loggingIn();
this.isLoggedIn = !!Meteor.user();
this.checkAndSub();
});
});
}
checkAndSub(){
if(this.isLoggingIn){
Meteor.call('checkAdmin', function(error, result) {
if (error) {
this.errors.push(error.reason || "call from server has an error");
}
this.isAdmin = result;
console.log(this.isAdmin);
if(this.isAdmin){
Meteor.subscribe("userList");
}
else console.log("User is not admin");
});
}
}
Heres the corresponding HTML
<span *ngIf="viewDetails">
<div class="pizza_details" id="pizza_details" [ngClass]="{'show' : viewDetails, 'hide' : !viewDetails}">
<div class="row">
<!--PIZZA DESCRIPTION PANEL-->
<div class="pizza_description col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="panel" id="description_panel">
<div class="panel-body">
<div>
{{error}}{{message}}
<span *ngIf="isAdmin">
<p><h2>User List</h2></p>
<ul>
<li *ngFor="let iterate of usersList">
_id: {{iterate._id}}
<p>Emails: {{iterate.emails}}</p>
<p>username: {{iterate.username}}</p>
<p>isadmin: {{iterate.isAdmin}}</p>
</li></ul>
</span>
</div>
<h1>Description: </h1>
{{currentPizza.description}}
<p><button type="button" class="btn active" role="button" (click)="toggle()">Toggle</button></p>
</div>
</div>
</div><!--&&&&pizza description collapes&&&&-->
<!--STARTING THE "SECOND PANEL" FOR PICTURES, STYLE, VOTES, AND MODS-->
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="row">
<div class="pizza_picture col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel" id="picture_panel">
<div class="panel-body" style="padding:0px;">
<img src="{{currentPizza.imageUrl}}" class="img-rounded" style="max-height: 400px; width:100%;">
</div>
</div>
</div><!--&&&&pizza picture collapse&&&&-->
</div>
<div class="row">
<div class="pizza_style col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel" id="style_panel">
<div class="panel-body">
<h4>Style:</h4>{{currentPizza.style}}
<h4>Location:</h4>
<span *ngIf="currentPizza.location.state">
{{currentPizza.location.state}} ,
</span>
{{currentPizza.location.country}}
<h4>Brand: </h4>{{currentPizza.brand}}
</div>
</div>
</div><!--&&&&pizza style collapse&&&&-->
<div class="pizza_votes col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel" id="vote_panel">
<div class="panel-body">
<h3>Pizza Spectrum Score: </h3>
{{currentPizza.votes}}
</div>
</div>
</div><!--&&&&pizza votes collapse&&&&-->
</div>
<div class="row">
<div class="pizza_users col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel" id="user_panel">
<div class="panel-body">
<h3>SubmittedBy: </h3>
{{submittedBy(currentPizza._id)}}
<ul><li *ngFor="let i of currentPizza.userUpvotes">{{i}}
</li>
</ul>
<p><button type="button" id="exit_details_btn" class="btn active" role="button" (click)="toggleDetails()">Exit Details</button>
<button type="button" id="upvote_btn" class="btn active" role="button" (click)="upVote(currentPizza._id)">Upvote</button>
<button type="button" id="downvote_btn" class="btn active" role="button" (click)="downVote(currentPizza._id)">Downvote</button></p>
<button type="button" id="downvote_btn" class="btn active" role="button" (click)="cc()">publish all users</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
I know isAdmin is true, but nothing shows up. If I create a separate button to toggle it then my userLIst shows up. Why won't it display properly when the page is loaded?
Thanks
Try changing the span *ngIf to a div. I simple check could be to temporary change the content in the span to a static text ex: hello. Can you then see the hello? If true it's a markup problem
ngZOne.run doesn't mark a component for change detection. All it does is execute the callback function inside the Angular error handler.
You need to inject ChangeDetechRef and call markForCheck.
public constructor(private cdr: ChangeDetectorRef, private zone: NgZone) {
}
then elsewhere:
_initAutorun(): void {
this.autorunComputation = Tracker.autorun(() => {
this.zone.run(() => {
//.....
this.checkAndSub();
this.cdr.markForCheck(); // <--- mark component dirty
});
});
}
I have 4 images which allows users to select only 1 image out of 4.
When the user clicks on any image, the clicked image along with other 3 images should be disabled and the same user has to again click on the 'clicked' image to enable the image.
Basically i need to make the images look like its Clickable (with some borders or something..), Then onclick of image say 'A' the user gets a message (as shown from the when_i_click_carrom()), post which all the images (B,C,D) should be disabled (for that user only), and same user has to click on disabled image 'A' to enable it.
NOTE: Only the Image A should be disabled for the current user and other users, but other images B,C,D should be clickable for other users, until the current user enables the image A
...
<script>
var when_i_click_carrom = function(){
alert('You selected Carrom!');
}
</script>
...
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><img src="images/carrom.jpg" alt="carrom" class="img-responsive" onclick="when_i_click_carrom();"/></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/foosball.jpg" alt="foosball" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/table-tennis.jpg" alt="table-tennis" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/chess.jpg" alt="chess" class="img-responsive"></div>
</div>
</div>
</div>
Try with querySelectorAll .Img not have a default disable attribute .So try with class
document.querySelectorAll('.img-responsive').forEach(function(a) {
a.addEventListener('click', function() {
this.disabled = this.disabled == true ? false : true;
this.classList.toggle('disable')
//console.log(this.disabled)
})
})
.disable {
opacity: 0.5;
}
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="carrom" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="foosball" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="table-tennis" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="chess" class="img-responsive"></div>
</div>
</div>
</div>
You can check it out over here.
jQuery(".sidebar").click(function(){
if(jQuery(".sidebar").hasClass("disabled")){
jQuery(".sidebar").removeClass("disabled");
}else{
jQuery(".sidebar").addClass("disabled");
}
});
https://jsfiddle.net/ott5wanq/4/
Since you are using bootstrap, you can use image buttons and use disabled class for all items when one of them clicked. I created an example :
HTML :
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn1" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/1" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn2" class="btn btn-primary myBtn" onclick="imgClicked()" >
<img src="http://lorempixel.com/400/200/sports/2" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn3" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/3" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn4" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/5" alt="carrom" class="img-responsive">
</button></div>
</div>
</div>
Script ( using Jquery ) :
function imgClicked (){
$('.myBtn').addClass('disabled');
}
https://jsfiddle.net/emilvr/80u0pbyw/2/
I'm not exactly sure what it is that i need, so the following explanation may not be clear - please let me know if not.
I want to slideToggle a specific clicked div, the code i currently have of course slideToggle's all instances of the div with a class of .open-statement, but i want to only toggle the one instance of this class that appears inside the parent div .agenda-content. There will be numerous instances of .open-statement on the page eventually, but only one of them should toggle (the one that's inside the current clicked div).
HTML
<div class="agenda-content">
<div class="row stance-row">
<div class="col-xs-3 no_padding">
1
</div>
<div class="col-xs-2">
Obamacare
<button class="btn btn-orange">Remove Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Wayne Rooney
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
<div class="row stance-row">
<div class="col-xs-3 no_padding">
2
</div>
<div class="col-xs-2">
Raise Minimum Wage
<button class="btn btn-orange">Take a Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Stephen King
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
</div>
jQuery
$(document).ready(function () {
$(".stance-row").click(function () {
$(".agenda-content").find(".open-statement").slideToggle();
});
});
.agenda-content is the parent of all .open-statement. You need to be more specific. Use .next and .find() :
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next().find(".open-statement").slideToggle();
});
});
You are almost there, you just need to change your code to get respective next item.
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next("div.row").find(".open-statement").slideToggle();
});
});
DEMO : http://jsfiddle.net/6GMj7/
Cheers,
Ashok
Use this:
$(this).closest(".agenda-content").find(".open-statement").slideToggle();
I`m use front-end framework Foundation. How i can in this menu enable Log in button only if Login and Password input filled text.
<form data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
Log in
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
</form>
You could add a function to watch the onkeypress listener for the input box. Here is a working fiddle of how to do it on the username and you could do something similar for the password input as well.
http://jsfiddle.net/fFLq4/
Add a couple element id's to your elements:
<form data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" id="loginTxtBox" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
Log in
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
</form>
And add the javascript function to listen for the keypress:
var textBox = document.getElementById("loginTxtBox");
textBox.onkeypress=function(textBox){
if(this.value.length >= 5)
{
document.getElementById("loginButton").className = "button tiny";
}
else
{
document.getElementById("loginButton").className = "button tiny disabled";
}
};
This will only activate your login button once you have at least 5 characters in it. Apply this to your password input as well.
If I understand this correctly, you would like to show the login form only if the user clicks on the Login Link.
To achieve this, I would suggest moving the links outside the and use any of these (toggle/show/slide) in jQuery to show it on click.
Here is the modified HTML:
<form id="loginForm" data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
</form>
<div class="row">
<div class="large-12 columns text-center">
<a id="login" href="#" class="button tiny disabled">Log in</a>
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
And here is a working fiddle of how to show/hide the login form:
http://jsfiddle.net/9C4s7/
The commented line in the js toggles the slide (clicking the link will show the form, clicking it again will hide it). The active line will only make it slide down once clicked. So, you go ahead and choose whichever works best for you!