Develop Reference

Javascript Not working when trying to hide and display form in Ruby

Iam trying to create a button that displays a form when a user clicks on it. I have tried checking through my code and i have not found any error but the button does not work. Please Help!
//load turbo scripts
document.addEventListener('turbolinks:load', function() {
//assign elements in to variables
const openProjectButton = document.getElementById('new-project-button')
const projectPopover = document.getElementById('new-project-popover')
//check if elements exist
if (openProjectButton && projectPopover) {
//attach listener
openProjectButton.addEventListener('click', function() {
//if the popover class contains is-hidden remove it else return nill.
return projectPopover.classList.contains('is-hidden') ? projectPopover.classList.remove('is-hidden') : null
}, false)
//attach listener to cancel button
const cancelProjectpopover = document.getElementById('cancel-project-popover')
cancelProjectpopover.addEventListener('click', function() {
//add back is-hidden
return projectPopover.classList.add('is-hidden')
}, false)
}
})
<div class="col-md-1 mr-auto">
<button id="new-project-button" class="btn btn-primary mr-auto">New</button>
<div id="new-project-popover" class="project-popover is-hidden">
<div class="form-group">
<input type="text" placeholder="Name this project" class="form-control">
</div>
<button type="submit" class="btn btn-success">Save</button>
<button id="cancel-project-popover" class="btn btn-secondary">Cancel</button>
</div>
</div>

Are you sure that outer event 'turbolinks:load' is fired at all? Because when I remove that event listener, everything works as it should:
//assign elements in to variables
const openProjectButton = document.getElementById('new-project-button')
const projectPopover = document.getElementById('new-project-popover')
//check if elements exist
if (openProjectButton && projectPopover) {
//attach listener
openProjectButton.addEventListener('click', function() {
//if the popover class contains is-hidden remove it else return nill.
return projectPopover.classList.contains('is-hidden') ? projectPopover.classList.remove('is-hidden') : null
}, false)
//attach listener to cancel button
const cancelProjectpopover = document.getElementById('cancel-project-popover')
cancelProjectpopover.addEventListener('click', function() {
//add back is-hidden
return projectPopover.classList.add('is-hidden')
}, false)
}
.is-hidden {
display: none;
}
<div class="col-md-1 mr-auto">
<button id="new-project-button" class="btn btn-primary mr-auto">New</button>
<div id="new-project-popover" class="project-popover is-hidden">
<div class="form-group">
<input type="text" placeholder="Name this project" class="form-control">
</div>
<button type="submit" class="btn btn-success">Save</button>
<button id="cancel-project-popover" class="btn btn-secondary">Cancel</button>
</div>
</div>

Button onClick is not referenced properly and output is not as expected

I am using the variable template and using AddCard function to be called when button is clicked but is not read correctly when I inspect the element.
It looks something like this in Console:
But is should look something like this :
<input type="button" class="btn btn-success btn-xs" onclick="AddCard("CSE101")" value="Add">
Here is the code I have used to get the ID.
var template = " <div class='mycard text-center col-md-2' id ='"+obj.Course+"'> <div class='card-header'> <p1>"+ obj.Course +"</p1> </div> <div class = 'card-block'> <div id = 'svgcontainer"+i+"'> </div> </div> <div class = 'coursename'> <p2> "+obj.CourseName+" </p2> </div> <div class='contact-submit' > <input type='button' class ='btn btn-success btn-xs' onClick = 'AddCard('"+ obj.Course +"')' value='Add' > <input type='button' class ='btn btn-danger btn-xs' onClick = 'SkillVis2();this.disabled=true' value='Play'> </div> <div class='card-footer text-muted'> Prof. XYZ </div> </div>"
function AddCard (corsename)
{
var obj = _.find(data, function(obj){ return obj.Course == corsename; });
SkillVis(obj);
};

Use escape characters to avoid this issue:
onclick="AddCard(\"CSE101\")"
Another possibility is to use single quotes for the parameter:
onclick="AddCard('CSE101')"
For your js-string, the solution would be:
onClick =\"AddCard('" + obj.Course + "')\"

"onClick = 'AddCard("+ obj.Course + ")' "
Shouldn't it be just like that?

Create unique id in each click of button using Jquery/Javascript

i want to create unique id in each click of button using Jquery.Actually i am creating file field by clicking on a button here i need first file field's id will remain constant(i.e-fileid) as it is when user will click on a button and the next file field will created the id will change(i.d-fileid1) and so on.I am explaining my code below.
<div class="col-md-6 bannerimagefile bmargindiv1">
<label for="expcerti" accesskey="B"><span class="required">*</span> Publication/Papers Upload your publication/papers certificate.</label>
<ol id="expOl">
<li>
<div class="totalaligndiv">
<div class="col-md-10 padding-zero bannerimagefilenew bmargindiv1">
<input type="file" class="filestyle" data-size="lg" name="expcerti" id="expcerti" />
</div><div class="col-md-2 padding-zero bmargindiv1">
<button type="button" class="btn btn-success btn-sm " id="Expadd">+</button>
<button type="button" class="btn btn-danger btn-sm" id="Expminus" style="display:none;" >-</button>
</div>
<div class="clearfix"></div>
</div>
</li>
</ol>
</div>
<script>
$(document).ready(function () {
$(document).on('click','.btn-success', function () {
// var i=1;
$.getScript("js/bootstrap-filestyle.min.js");
$('#expOl').append("<li><div class='totalaligndiv'><div class='col-md-10 padding-zero bannerimagefilenew bmargindiv1'><input type='file' class='filestyle' data-size='lg' name='expcerti' ></div><div class='col-md-2 padding-zero bmargindiv1'><button type='button' class='btn btn-success btn-sm ' id='Expadd'>+</button><button type='button' class='btn btn-danger btn-sm' id='minus' style='display:none'>-</button></div><div class='clearfix'></div></div></li>");
// $('.filestyle').attr("id","expcerti"+i);
$(this).css('display', 'none');
$(this).siblings("button.btn-danger").css('display', 'block');
// i++;
});
$(document).on('click','.btn-danger', function () {
console.log('delete');
$(this).closest("li").remove();
});
});
</script>
Check my above code first file field's id is expcerti,when one new will be created it should be expcerti1 and like this it will increment .so that if i have 5 filed i can add 5 file in their respective field.But in my case if i have more file field all file is appending one file field. Please help me to resolve this issue.

To generate a new ID on every click maintain a counter flag.
Let's say var i = 1;
Increment this counter on every click i++.
Use this counter variable with id attribute.
Have modified your code snippet as below:
$(document).ready(function () {
var i=1;
$(document).on('click','.btn-success', function () {
$.getScript("js/bootstrap-filestyle.min.js");
$('#expOl').append("<li><div class='totalaligndiv'><div class='col-md-10 padding-zero bannerimagefilenew bmargindiv1'><input type='file' class='filestyle' data-size='lg' name='expcerti' id='expcerti"+i+"' ></div><div class='col-md-2 padding-zero bmargindiv1'><button type='button' class='btn btn-success btn-sm ' id='Expadd'>+</button><button type='button' class='btn btn-danger btn-sm' id='minus' style='display:none'>-</button></div><div class='clearfix'></div></div></li>");
// $('.filestyle').attr("id","expcerti"+i);
$(this).css('display', 'none');
$(this).siblings("button.btn-danger").css('display', 'block');
i++;
});
$(document).on('click','.btn-danger', function () {
console.log('delete');
$(this).closest("li").remove();
});
});

You have to add the click event listener to the newly created buttons.

How to dynamically Add/Remove file type input field using jquery?

I cannot remove input field dynamically, I can add field but my remove option is not working.
I am using jquery for dynamically add/remove field and bootstrap 3 for my layout.
Here is my markup:
<div class="row margin-bottom">
<div class="col-md-12 col-sm-12">
<button type="submit" class="add-box btn btn-info"><span class="glyphicon glyphicon-plus"></span> Add More Fields</button>
</div>
</div>
<?php $attributes = array('class' => 'form-horizontal', 'role' => 'form'); echo form_open_multipart('config/upload_image', $attributes);?>
<div class="text-box form-group">
<div class="col-sm-4"><input type="file" class="" name="txtImage[]" id="imageinput"/></div>
</div>
<div class="form-group">
<div class="col-sm-2">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-upload"></span> Upload</button>
</div>
</div>
<?php echo form_close();?>
Here is my jquery code:
$(document).ready(function(){
$('.add-box').click(function(){
var n = $('.text-box').length + 1;
if(n > 5)
{
alert('Only 5 Savy :D');
return false;
}
var box_html = $('<div class="text-box form-group"><div class="col-sm-4"><input type="file" class="" name="txtImage[]" id="imageinput'+ n +'"/></div><div class="col-sm-2"><button type="submit" class="remove-box btn btn-danger btn-sm"><i class="fa fa-minus-circle fa-lg"></i></button></div></div>');
$('.text-box:last').after(box_html);
box_html.slidedown('slow');
});
$('.form-horizontal').on('click', '.remove-box', function(){
$(this).parent().remove();
return false;
});
});

The error is in the remove button click event handler. You need to remove the closest form group rather than the immediate parent:
$('.form-horizontal').on('click', '.remove-box', function(){
$(this).closest(".form-group").remove();
return false;
});
check this bootply for a working example: http://www.bootply.com/x8n3dQ6wDf
EDIT
for animation on remove you can use jQuery slideUp like this:
$('.form-horizontal').on('click', '.remove-box', function(){
var formGroup = $(this).closest(".form-group");
formGroup.slideUp(200, function() {
formGroup.remove();
});
return false;
});

x-editable resetting fields

i have the following html/php code (php tag ommited)
$user = array(
'name' => Null,
'address' => Null
);
<div id="user">
<a href="#" id="cust_name" data-type="text"
data-pk="'.$user['ag_id'].'" title="Enter customer name">'.$user['name'].'</a>
<a href="#" id="cust_addr" data-type="text"
data-pk="'.$user['ag_id'].'" title="Enter customer address">'.$user['address'].'</a>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="ResetButton">Reset</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="SaveButton"
data-dismiss="modal">Save changes</button>
</div>
</div>
could you please complete my resetbutton script, the purpose is to assign null to cust_name and cust_addr after the click.. here's the script
<script>
$.fn.editable.defaults.mode = 'inline';
$(function(){
$('#user a').editable({
url: 'post.php'
});
});
$("#SaveButton").click(function() {
$.ajax({
url: 'db.php',
type: 'POST',
data: {}
});
});
$('#ResetButton').click(function() {
// $('#cust_name').editable('setValue', null); // did not worked
// didn't worked even i added class="myeditable" in my <a> tag
/*
$('.myeditable').editable('setValue', null)
.editable('option', 'pk', null)
.removeClass('editable-unsaved');
*/
});
</script>

This seemed to work.
http://jsfiddle.net/U33kT/
I'm not sure the difference, except that I chose all editables (JS line 6):
$('#user a').editable('setValue', null);
But, I tried with single items:
$('#cust_name').editable('setValue', null);
and it seemed to work as well.
Hope this helps.