I want checkbox to be clicked when div.tel_show is clicked
<script type="text/javascript">
$("div.tel_show").on("click",function(event) {
var target = $(event.target);
if (target.is('input:checkbox')) return;
var checkbox = $(this).find("input[type='checkbox']");
if( !checkbox.prop("checked") ){
checkbox.prop("checked",true);
} else {
checkbox.prop("checked",false);
}
});
</script>
I think I need to change var checkbox = $(this).find("input[type='checkbox']");
what should I write instead of input[type='checkbox']
<div class="row">
<div id="media-contents" class="col-lg-12">
<% if #media_contents.empty? %>
<h2 id="no-media">Dosya Bulunamadı</h2>
<% else %>
<% #media_contents.each do |media| %>
<div class="col-lg-4 tel_show">
<div class="thumbnail">
<%= image_tag media.file_name.url %>
<div class="caption">
<p>
<%= check_box_tag "media_contents[]", media.id %>
</p>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
</div>
Thanks in advance.
Try this:
$("div").live("click",function(event)
{
var target = $(event.target);
if (target.is('input:checkbox')) return;
var checkbox = $(this).find("input[type='checkbox']");
if( checkbox.attr("checked") == "" ){
checkbox.attr("checked","true");
} else {
checkbox.attr("checked","");
}
});
Give your checkbox a class or an id, then use e.g. $('#checkbox_id') to find it.
Input type selectors should not have '' around the type, e.g. should be "input[type=checkbox]" instead of "input[type='checkbox']".
Related
So basically, what I'm trying to do is show the value of status dropdown as [initial, started completed] when bug_type dropdown's value is bug, otherwise status dropdown should show [initial, started, resolved]
<div class="col">
<div class="form-group">
<%= form.select :bug_type, options_for_select([['Bug', 'bug'], ['Feature', 'feature']]) %> <br>
</div>
</div>
<div class="col">
<div class="form-group">
<% if #bug.bug_type == 'bug'%>
<%= form.select :status, options_for_select([['Initial', 'initial'], ['Started', 'started'], ['Completed', 'completed']]) %> <br>
<% else %>
<%= form.select :status, options_for_select([['Initial', 'initial'], ['Started', 'started'], ['Resolved', 'resolved']]) %> <br>
<% end %>
</div>
</div>
So far, I tried doing this but it doesn't work.
Also, I've used enums for bug_type and status. Please help me, if there's another approach to deal with this.
there are two ways for your requirement. One is client side you can change the dropdown value or you can send one server side request and render your required options.
For client side you can do like this:
<div class="col">
<div class="form-group">
<%= form.select :bug_type, options_for_select([["Bug", "bug"], ["Feature", "feature"]]) %>
</div>
</div>
<div class="col">
<div class="form-group">
<% if #bug.bug_type == "bug" %>
<%= form.select :status, options_for_select([["Initial", "initial"], ["Started", "started"], ["Completed", "completed"]]) %>
<% else %>
<%= form.select :status, options_for_select([["Initial", "initial"], ["Started", "started"], ["Resolved", "resolved"]]) %>
<% end %>
</div>
</div>
<script>
// Please change selector accoding to your DOM.
// This is bug type select dropdown
$('#bug_type_select').change(function() {
var selectedValue = $('#bug_type option:selected').val();
var bugOptions = {
'initial': 'Initial',
'started': 'Started',
'completed': 'Completed'
}
var featureOptions = {
'initial': 'Initial',
'started': 'Started',
'resolved': 'Resolved'
}
// Please change selector accoding to your DOM.
// This is status select dropdown
var $mySelect = $('#mySelect');
$mySelect.empty();
if (selectedValue === 'bug') {
$.each(bugOptions, function(key, value) {
var $option = $('<option/>', {
value: key,
text: value
});
$mySelect.append($option);
});
} else {
$.each(featureOptions, function(key, value) {
var $option = $('<option/>', {
value: key,
text: value
});
$mySelect.append($option);
});
}
});
</script>
I have a table "fundings" in which there is a field "status", for which i have a select field in the form. The options for this select field are ["approved", "declined", "pending"]. What i want is when "declined" is selected, a further text box shows to explain the reason for decline. Please help how can this be done.
<%= form_for([#parent, #child, #funding], :html => {class: "form-horizontal",role: "form"}) do |form| %>
<div class = "form-group">
<div class="control-label col-sm-2">
<%= form.label :status %>
</div>
<% if current_user.admin? %>
<div class="col-sm-8">
<%= form.select :status,['Pending', 'Approved', 'Declined'], class: "form-control" %>
</div>
<% else %>
<!-- Disabled for non-admin users -->
<% end %>
</div>
<!-- Submit button here -->
<% end %>
Update
<div class="form-group">
<%= "Status" %>
<%= form.select :status, ['Pending', 'Approved', 'Declined'], {}, id: "sample-status-select", class: "form-control" %>
</div>
<div class="form-group">
<%= "Decline Reason" %>
<%= form.text_area :decline_reason, class: "form-control hidden", id: "decline-reason-textarea" %>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<%= form.submit "Apply", class: 'btn btn-primary btn-lg' %>
</div>
</div>
</div>
</div>
<% end %>
<script type="text/javascript">
<plain>
$(function() {
$("#sample-status-select").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Declined') {
$("#decline-reason-textarea").removeClass("hidden");
} else {
$("#decline-reason-textarea").addClass("hidden");
$("#decline-reason-textarea").val("");
}
});
});
</plain>
</script>
$(function() {
$("#sample-status-select").on("change", function() {
var select_val = $(this).val(); // this gets the value of the dropdown menu
console.log(select_val); // this just displays the selected value in the browser console (if you have the browser console open)
if (select_val === 'Declined') {
// if the 'Declined' option is chosen
// we remove the 'hidden' class from the textarea
$("#decline-reason-textarea").removeClass("hidden");
} else {
// if any other option is chosen
// we put back the 'hidden' class to the textarea
// also, we update the textarea value to BLANK (this part is optional, it depends if you want to keep the value of the textarea)
$("#decline-reason-textarea").addClass("hidden");
$("#decline-reason-textarea").val("");
}
});
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://httpbin.org/post" method="post">
Status
<select id="sample-status-select">
<option value="Pending">Pending</option>
<option value="Approved">Approved</option>
<option value="Declined">Declined</option>
</select>
<br>
<br> Decline Reason
<textarea id="decline-reason-textarea" class="hidden">
</textarea>
</form>
Check this snippet I made. It should work for you as well.
This is a basic html form so this works even without ruby on rails.
After you get the gist of this, you should be able to port for it to work with your rails app.
<script type="text/javascript">
$(function() {
$("#sample-status-select").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === "Declined") {
$("#decline-reason-textarea").removeClass("hidden");
} else {
$("#decline-reason-textarea").addClass("hidden");
$("#decline-reason-textarea").val("");
}
});
});
</script>
I am new to rails and this is the first time I want to use a carousel in a web application. My carousel appears, but it does not auto-play.
This is what I have in my application.js :
//= require owl.carousel
$(function(){ $(document).foundation(); });
var owl = $('.owl-carousel');
owl.owlCarousel({
items:5,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true
});
And this is from my view:
<div id="owl" class="owl-carousel">
<% #artists.each do |artist| %>
<div class="artist-card ">
<%= link_to artist, class: "poster" do %>
<%= image_tag artist.image.url(:thumb) %>
<% end %>
<div class="artist-info ell glassy-bg padmy padlx">
<div class="artist-card ">
<h6><%= artist.name %> <span>(<%= artist.instrument %>)</span></h6>
</div>
</div>
</div>
<% end %>
</div>
Is there also a way to display every artist from my database in the carousel? I've seen that the default number of items for the carousel is 5. Can I make it dynamic ?
I managed to solve the issue. Here is what I've done:
(function ($) {
$(document).ready(function() {
if ($('.carousel .owl-wrapper-outer').length === 0) {
var owl = $('.carousel').owlCarousel({
items:5,
loop:true,
margin:10,
autoPlay:1000,
autoplayHoverPause:true,
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
});
$('.carousel').hover(function() {
owl.trigger('owl.stop');
}, function(){
owl.trigger('owl.play', 1000);
});
}
I have a problem with working my tab along with will_pagination. When i press Tab 2, it will show the correct content, but when i press on the pagination link, example page 2. It will bring me back to my Tab 1 view. After this, when i press back Tab 2, it will appear page 2 content of Tab 2. The problem here is why does it bring my back to my Tab 1 view when i press on the pagination link in Tab 2.
My View Code
<div>
<ul class="nav nav-tabs" id="TabLength">
<% #biscuit.each_index do |i| %>
<% if i == 0 %>
<li class="active"><a data-toggle="tab" href="#<%= #biscuit[i] %>"><%= #biscuit[i] %></a></li>
<% else %>
<li><a data-toggle="tab" href="#<%= #biscuit[i] %>"><%= #biscuit[i] %></a></li>
<% end %>
<% end %>
</ul>
<div class="tab-content">
<% #biscuit.each_index do |i| %>
<% if i == 0 %>
<div class="tab-pane fade in active" id="<%= #biscuit[i] %>">
<div class="row" id="PictureSetting">
<% #testpage.each do |i| %>
<div class="col-md-4" id="ProductPic">
<%= image_tag(i.name , class:"img-thumbnail", size:"180x180") %>
</div>
<% end %>
</div>
<%= will_paginate #testpage, :param_name => 'user_page' %>
</div>
<% elsif i == 1 %>
<div class="tab-pane fade" id="<%= #biscuit[i] %>">
<div class="row" id="PictureSetting">
<% #memberpage.each do |i| %>
<div class="col-md-4" id="ProductPic">
<%= image_tag(i.name , class:"img-thumbnail", size:"180x180") %>
</div>
<% end %>
</div>
<%= will_paginate #memberpage, :param_name => 'choco_page' %>
</div>
<% else %>
<div class="tab-pane fade" id="<%= #biscuit[i] %>">
<div class="row" id="PictureSetting">
<h1>hello</h1>
</div>
</div>
<% end %>
<% end %>
</div>
</div>
Thanks
Based on answer from here, you can design the following code for the problem:
<script>
// open tab on click
$('#TabLength a').click(function (e) {
e.preventDefault();
$(this).tab('show');
// getting tab id
var id = $(e.target).attr("href").substr(1);
// change hash value for all pages
$('ul.pagination > li > a').each(function(i, pageAnchor) {
pageAnchor.hash = id;
});
});
// assign tab id to location hash
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
// open initial hash
var hash = window.location.hash;
$('#TabLength a[href="' + hash + '"]').tab('show');
// UPDATE
$('ul.pagination > li > a').each(function(i, pageAnchor) {
pageAnchor.hash = hash;
});
</script>
It saves currently selected tab into location.hash. and selects it when you navigate to a new page.
I created an Geddy app using scaffold like this :
geddy gen app test
geddy gen secret
geddy gen scaffold project title:string description:string screenshot:string url:string
Everything works so far, but I'd like to edit the "Add" view to modify the "screenshot" input to an "file" input.
form.html.ejs :
<div class="control-group">
<label for="title" class="control-label">title</label>
<div class="controls">
<%- contentTag('input', project.title, {type:'text', class:'span6', name:'title'}) %>
</div>
</div>
<div class="control-group">
<label for="description" class="control-label">description</label>
<div class="controls">
<%- contentTag('input', project.description, {type:'text', class:'span6', name:'description'}) %>
</div>
</div>
<div class="control-group">
<label for="screenshot" class="control-label">screenshot</label>
<div class="controls">
<%- contentTag('input', project.screenshot, {type:'file', class:'span6', name:'screenshot'}) %>
</div>
</div>
<div class="control-group">
<label for="url" class="control-label">url</label>
<div class="controls">
<%- contentTag('input', project.url, {type:'text', class:'span6', name:'url'}) %>
</div>
</div>
add.html.ejs :
<div class="hero-unit">
<form id="project-form" class="form-horizontal" action="/projects" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>Create a new Project</legend>
<% if(params.errors) { %>
<div class="control-group">
<ul>
<% for(var err in params.errors) { %>
<li><%= params.errors[err]; %></li>
<% } %>
</ul>
</div>
<% } %>
<%- partial('form', {project: {}}) %>
<div class="form-actions">
<%- contentTag('input', 'Add', {type: 'submit', class: 'btn btn-primary'}) %>
</div>
</fieldset>
</form>
</div>
My error when I click on the submit button :
Title: "title" is required..
My controller :
this.create = function (req, resp, params) {
var self = this
, project = geddy.model.Project.create(params);
if (!project.isValid()) {
this.respondWith(project);
}
else {
project.save(function(err, data) {
if (err) {
throw err;
}
self.respondWith(project, {status: err});
});
}
};
The "project" object is empty...