I need a help. I have this structure
<div class="buttons">
<p onclick="function1('param1')">button1</p>
<p onclick="function2('param2')">button2</p>
<p onclick="function3('param3')">button3</p>
</div>
This code works perfecty, but in addition I need add class="active" to current selected button which I can not do. The following code does not work.
$(document).ready(function() {
$('.buttons').click(function(){
if($(this).hasClass('active')){
return false;
}
else{
$('.buttons > p').removeClass('active');
$(this).addClass('active');
}
});
})
Can anyone say how to solve this problem?
You have a typo in
<div class="buutons">
it should be
<div class="buttons">
Also
<p onclick="function3('param3')>button3</p>
should be
<p onclick="function3('param3')">button3</p>
JSFiddle is here.
remove the onclick attribute on the p elements, it will overwrite the listener you registered in your js code, register it in the js code instead.
change you code, add "> p" in your first selector:
$(document).ready(function() {
$('.buttons > p').click(function(){
if($(this).hasClass('active')){
return false;
}
else{
$('.buttons > p').removeClass('active');
$(this).addClass('active');
}
});
})
Related
currently i have something like this
$("#foo").click(function () {callMe();});
$("#bar").click(function () {callMe();});
foo and bar do the same thing. Is there a way for me to define a selector saying either if foo id or bar id is called then trigger the click event ? I tried this but it did not work
$("#foo","#bar").click(function () {callMe();});
you could give them a class and then check the id of the target element:
$('').on('click', function(e) {
if (e.currentTarget.id === 'foo') {
console.log('foo clicked');
} else {
console.log('bar clicked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="click" id="foo">foo</div>
<div class="click" id="bar">bar</div>
Or if I'm misunderstanding the question and you just want to select both elements using their ids, you can just use
$('#foo,#bar').on('click', function() {});
note the comma is in the quotes, not separate quotes
The syntax and the code looks fine, I think you haven't imported jQuery properly.
I tried the same, and it works fine. Have a look at the code below.
function callMe () {
alert("callMe function called!");
}
$("#foo, #bar").click(function () {callMe();});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="foo"> foo </button>
<button id="bar"> bar </button>
document.getElementById("demo").addEventListener("click", callMe);
function callMe(e) {
let id = e.target.id
console.log(id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo">
<button id="foo">Foo</button>
<br> <br>
<button id="bar">bar</button>
</div>
i'm new to Meteor and and i want to learn something about it. therefore i want to build a page were i can upload images via meteor-dropzone.
the upload is working with meteor-uploads.
now i want to get events, like 'addedfile' or 'drop' from the dropzone to fire some new functions.
HTML Page Profile2:
<template name="profile2">
<div class="ibox-content">
{{> dropzone url='http://localhost:3000/uploads' maxFilesize=5 addRemoveLinks=true acceptedFiles='image/*,jpg,jpeg,png' id='dropzoneDiv'}}
</div>
</template name="profile2">
In The JS File for Profile2 i wrote this:
Template.dropzone.events({
'addedfile #dropzoneDiv': function(e, template){
e.preventDefault();
console.log("Hello");
}
});
But i don't see something in the console.log output.
I'm sure i'm doing something wrong. But i have no i idea where the problem or the wrong understanding is.
Can somebody help me please.
Thanks.
Michael
after try and error. i found the solution. Maybe someone can explain it to me. because i don't understand it completely, why it's working now but so different to the normal Meteor event version.
Dropzone.options.dropzoneDiv = {
init: function() {
this.on("addedfile", function(file) { alert("Added file."); });
}
};
The Template like that:
<!-- Page heading -->
{{> pageHeading title='File upload' category='Forms' }}
<div class="wrapper wrapper-content animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Dropzone Area</h5>
{{>iboxTools}}
</div>
<div class="ibox-content">
<!-- For more info about dropzone plugin see this: https://github.com/devonbarrett/meteor-dropzone/ -->
{{> dropzone url='/uploads' id='dropzoneDiv'}}
</div>
</div>
</div>
</div>
</div>
</template>
Try the dropped event:
'dropped #dropzoneDiv' (e, template) => {
e.preventDefault();
console.log(e.originalEvent.dataTransfer.files); // this will contain the list of files that were dropped
}
I have created a test project with Meteor which uses Masonry. I added the package mrt:jquery-masonry(or isotope:isotope), and it works well at the beginning. However, the problem comes now.
Basically, I want to implement the feature that when user clicks the button, the page will be added one more div. Below is my code:
main.html
<body>
<div class="container">
{{> masonryContent}}
</div>
<script>
(function($){
var $container = $('.masonry-container');
$container.masonry({
columnWidth: 300,
gutterWidth: 50,
itemSelector: '.masonry-item'
})
}(jQuery));
</script>
</body>
style.css
.masonry-item {
width: 300px;
}
masonry-content.html
<template name="masonryContent">
<div class="masonry-container">
<div class="masonry-item">
<p>blabla...</p>
<p>
Button
</p>
</div>
<div class="masonry-item">
<p>test...</p>
</div>
<div class="masonry-item">
<p>another test...</p>
</div>
{{#if showItem}}
<div class="masonry-item">
<p>new added item...</p>
</div>
{{/if}}
</div>
</template>
masonry-content.js
Template.masonryContent.events({
"click #click-me": function(e) {
e.preventDefault();
Session.set('show_me', true);
}
});
Template.masonryContent.helpers({
showItem: function() {
return !!Session.get('show_me');
}
});
The problem is when I click the button, the new div was created; however, it wasn't placed by following Masonry rules. The new created item just overlapped to the first item, but I expect it performs the way to append to the last item.
I would appreciate if anyone could help me on this.
Thanks in advance!
As meteor does partial rendering the element needs to be there in the DOM for masonry to work. So there are two ways of getting over the problem
1) Hide or unhide the element when the button click happens
Or
2) re-render the DOM
You can use the chrome dev tools to see what DOM elements are touched/refreshed (Green color).
There is a typo in masonry in the template name insertion.
Check the package state, many mrt packages are not well supported anymore.
I was originally having problems with the below JS smooth scroll as it made any real links rather then #location stop working.
$('.navbar-nav > li').click(function(event) {
event.preventDefault();
var target = $(this).find('>a').prop('hash');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
});
So I changed it to
$(document).ready(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 1200);
return false;
}
}
});
});
Which sorted the original problem of being unable to add a working "blog" link in the navbar however it has now rendered the left and right (next and prev) carousel buttons not working.
I would be grateful if someone can help me out with this as it is driving me crazy.
The html for the carousel is as follows
<section id="main-slider" class="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="carousel-content">
<h1>Responsive Website Design</h1>
<p class="lead">With 20% of all website traffic in the UK coming from tablets and smart phones then never before has it been a better time to have a responsive website.</p>
</div>
</div>
</div><!--/.item-->
<div class="item">
<div class="container">
<div class="carousel-content">
<h1>Free Consultation</h1>
<p class="lead">I understand every business has different needs so we can discuss what it is your want to achieve and using my expert advice make it a reality.</p>
</div>
</div>
</div><!--/.item-->
<div class="item">
<div class="container">
<div class="carousel-content">
<h1>Built to be SEO/Google Friendly</h1>
<p class="lead">Having a website built is the first step but next you need to put it in front of your target audience. On site SEO is where it all begins.</p>
</div>
</div>
</div><!--/.item-->
</div><!--/.carousel-inner-->
<a class="prev" href="#main-slider" data-slide="prev"><i class="icon-angle-left"></i></a>
<a class="next" href="#main-slider" data-slide="next"><i class="icon-angle-right"></i></a>
</section><!--/#main-slider-->
First of all, the answers above are correct. I just wanted to spell it out a little clearer for anyone needing help.
The code that needs to be updated is the SmoothScroll function itself. You will need to know the ID of the carousel from your bootstrap page. Just add the carousel ID to the not().click function and it will work like a charm. Here is an example of what I did. The change was made on the third line of code, where you see the carousel ID#.
<script>
$(function() {
$('a[href*=#]:not([href=#carousel-299058])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 70
}, 500);
return false;
}
}
});
});
</script>
Try replacing this:
$('a[href*=#]:not([href=#])').click(function() {
with:
$('a[href*=#]:not([href=#media])').click(function () {
Happy coding!
I was using the smooth scrolling javascript everyone uses and having the same issue, like all obedient little developers out there I was using #myCarousel:
<a class="right carousel-control" href="#myCarousel" data-slide="next">
and as soon as I changed [href=media] to [href=myCarousel] my Bootstrap carousel controls started working again.
I had this issue recently and my solution was to use a class on each link as opposed to the href attribute selectors within the jQuery function.
This does mean a little extra HTML mark-up but I felt it was more robust and causes less interference with additional scripts that may be added within your project.
So this:
$('a[href*=#]:not([href=#])').click(function() {
Becomes this:
$('.your-class-name').click(function() {
And any smooth scrolling links you add to your page will become:
Link
And scroll to:
<div id="section">... Content ...</div>
Dont forget to add : \\. It is necessary to add it since the latest version of JQUERY.
$('a[href*=\\#]:not([href=\\#carousel-299058])').click(function() {
I want to show a ValidationSummary mcv3 with "alert-error" Bootstrap styling.
I'm using a Razor view, and I show model errors with this code:
#Html.ValidationSummary(true, "Errors: ")
It generates HTML code like this:
<div class="validation-summary-errors">
<span>Errors:</span>
<ul>
<li>Error 1</li>
<li>Error 2</li>
<li>Error 3</li>
</ul>
</div>
I tried with this too:
#Html.ValidationSummary(true, "Errors:", new { #class = "alert alert-error" })
and it works ok, but without the close button (X)
It generates HTML code like this:
<div class="validation-summary-errors alert alert-error">
<span>Errors:</span>
<ul>
<li>Error 1</li>
<li>Error 2</li>
<li>Error 3</li>
</ul>
</div>
but Bootstrap alert should have this button into the div:
<button type="button" class="close" data-dismiss="alert">×</button>
Can anyone help?
This Works! - Thanks Rick B
#if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0)
{
<div class="alert alert-error">
<a class="close" data-dismiss="alert">×</a>
<h5 class="alert-heading">Ingreso Incorrecto</h5>
#Html.ValidationSummary(true)
</div>
}
I also had to remove the class ".validation-summary-errors" from "site.css", because that style defines other font color and weight.
edited again
I misunderstood your question at first. I think the following is what you want:
#if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count > 0)
{
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
#Html.ValidationSummary(true, "Errors: ")
</div>
}
This answer is based on RickB's one
Updated for the latest bootstrap ==>> alert-error doesn't exist in favor of alert-danger.
Works for all Validation Errors not only Key String.Empty ("")
For anyone using Bootstrap 3 and trying to get nice looking alerts:
if (ViewData.ModelState.Keys.Any(k=> ViewData.ModelState[k].Errors.Any())) {
<div class="alert alert-danger">
<button class="close" data-dismiss="alert" aria-hidden="true">×</button>
#Html.ValidationSummary(false, "Errors: ")
</div>
}
The solution provided by RickB works only on manually added errors on (String.Empty key) but not on those generated by ModelState (normally this gets triggered first via javascript but it's always a good practice to have a fallback if (for example) the Html.ValidationMessageFor is missing or many other situations.
Alternative solution. =)
#if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))
{
// Bootstrap 2 = "alert-error", Bootstrap 3 and 4 = "alert-danger"
<div class="alert alert-danger alert-error">
<a class="close" data-dismiss="alert">×</a>
#Html.ValidationSummary(true, "Errors: ")
</div>
}
I did not like how the ValidationSummary rendered using a bullet list (unordered list). It had a lot of unnecessary space below the error list.
A solution to that issue - is simply to loop through the errors and render the errors how you want. I used paragraphs. For example:
#if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))
{
<div class="alert alert-danger" role="alert">
<a class="close" data-dismiss="alert">×</a>
#foreach (var modelError in Html.ViewData.ModelState.SelectMany(keyValuePair => keyValuePair.Value.Errors))
{
<p>#modelError.ErrorMessage</p>
}
</div>
}
The result, in my case, looks something like this:
#Html.ValidationSummary("", new { #class = "alert alert-danger" })
Consider writing an extension method to the HtmlHelper like:
public static class HtmlHelperExtensions
{
public static HtmlString ValidationSummaryBootstrap(this HtmlHelper htmlHelper)
{
if (htmlHelper == null)
{
throw new ArgumentNullException("htmlHelper");
}
if (htmlHelper.ViewData.ModelState.IsValid)
{
return new HtmlString(string.Empty);
}
return new HtmlString(
"<div class=\"alert alert-warning\">"
+ htmlHelper.ValidationSummary()
+ "</div>");
}
}
Then you just need to fit the ul-li styling in your stylesheet.
In MVC 5, ViewData.ModelState[""] always returned a null value. I had to resort to the IsValid command.
if (!ViewData.ModelState.IsValid)
{
<div class="alert alert-danger">
<a class="close" data-dismiss="alert">×</a>
<strong>Validation Errors</strong>
#Html.ValidationSummary()
</div>
}
I took a slightly different route: using JQuery to hook into the form submit:
$('form').each(function() {
var theForm = $(this);
theForm.submit(function() {
if ($(this).valid()) {
if ($(this).find('.validation-summary-valid').length) {
$('.validation-summary-errors').hide();
}
} else {
if ($(this).find('.validation-summary-errors').length) {
$('.validation-summary-errors')
.addClass('alert alert-error')
.prepend('<p><strong>Validation Exceptions:</strong></p>');
}
}
});
});
I have this set inside a self-executing javascript module so that it hooks onto any validation summaries that I create.
HTH
Chuck
You can use jquery:
$(function(){
$('.validation-summary-errors.alert.alert-error.alert-block').each(function () {
$(this).prepend('<button type="button" class="close" data-dismiss="alert">×</button>');
});
});
It is looking for every div containing given error classes from bootstrap and writing html at beginning of the div. I am adding .alert-block class as the bootstrap page says:
For longer messages, increase the padding on the top and bottom of the
alert wrapper by adding .alert-block.
This solution uses Sass to make it work but you could achieve the same thing with basic css. To make this work with client side validation we cant rely on checking the ModelState since that assumes a postback has occurred. The out-of-the-box mvc client side validation already makes things visible at the right time so let it do its thing and simply style the list items in the validation summary to render like bootstrap alerts.
Razor markup:
#Html.ValidationSummary(false, null, new { #class = "validation-summary-errors-alerts" })
Sass
.validation-summary-errors-alerts{
ul{
margin: 0;
list-style: none;
li{
#extend .alert;
#extend .alert-danger;
}
}}
The css that produced for my project looked like this - yours will be different:
.validation-summary-errors-alerts ul li {
min-height: 10px;
padding: 15px 20px 15px 62px;
position: relative;
border: 1px solid #ca972b;
color: #bb7629;
background-color: #fedc50;
font-family: Arial;
font-size: 13px;
font-weight: bold;
text-shadow: none;}
Based on the answers here:
#if (!ViewData.ModelState.IsValid)
{
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
#Html.ValidationSummary(false, "Errors: ")
</div>
}
(I'm using Bootstrap 4)
Alternative solution with pure javascript (jQuery). I'm working with MVC4 + Bootstrap3 but it works perfect for you.
$(function () {
$(".validation-summary-errors").addClass('alert alert-danger');
$(".validation-summary-errors").prepend('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>')
});
If you don't want to write server side logic then is a nice alternative solution.
TwitterBootstrapMVC takes care of this one with just one line:
#Html.Bootstrap().ValidationSummary()
Important, to assure that it behaves the same during the server side and client side (unobtrissive) validation, you need to include a javaScript file that takes care of that.
You can customize your Validation helper with extension methods however you see fit.
Disclaimer: I'm the author of TwitterBootstrapMVC. Using it with Bootstrap 3 requires a license.
Expanding upon Daniel Björk's solution you can include a little script to adjust the CSS included with ValidationSummary() output. The resulting bootstrap alert was showing a rendering issue until I removed the validation-summary-errors class.
#if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) {
<div class="alert alert-danger">
×
<h4>Validation Errors</h4>
#Html.ValidationSummary()
</div>
}
<script>
$(".validation-summary-errors").removeClass("validation-summary-errors");
</script>
You can also easily give a bootstrap highlight to fields with errors. See http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/
To achieve the same in bootstrap 4, use the following:
#if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0)
{
<div class="col-auto alert alert-danger" role="alert">
#Html.ValidationSummary(true)
</div>
}
If it needs to work with clientside javascript I suggests doing this:
.validation-summary-valid {
display: none;
}
You still can assign the bootstrap class
#Html.ValidationSummary(null, new {#class= "alert alert-danger" })
but it will only show when you have actual errors.