Develop Reference

How do you pull id data with a JQuery button click?

I can pull data from a modal $('#ID').on('shown.bs.modal', function (e) { var somevariable = e.id; }); doing this method, but can't figure out how to do it with a button click.
If that is possible, how can I also inherit the data if this button click opens the modal?
http://www.bootply.com/jCXXE6chXu
$(document).ready(function(){
$(".file_to_upload").click(function (data) {
//alert("works");
var questionID = data.id;
alert(questionID);
$('[id*="uploaded_files_"]').modal('show');
$('[id*="uploaded_files_"]').on('shown.bs.modal', function (e) {
$("#auditinstanceupload").html("<input id='audit_instance_id' name='audit_instance_id' value='"+questionID+"' type='hidden' style='display:none;'>");
$("#auditidupload").html("<input id='audit_id' name='audit_id' value='"+questionID+"' type='hidden' style='display:none;'>");
});
});
});
<!-- 5 is a php row id for an example -->
<a title="Upload file" href="#" id="5"
class="btn btn-default file_to_upload" >upload button</a>
<!-- modal pop up for [F] button -->
<div class='modal fade' style='z-index:10000' id='uploaded_files_5' role='dialog'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
<h4 class='modal-title'>Perform Audit</h4>
</div>
<div class='modal-body' id='perform_audit1'>
<form id='my_form' name='form' action='ajax/file_upload.php' method='POST' enctype='multipart/form-data' style=''>
<h1>Upload File</h1>
<div id='main'>
<strong>File: </strong><input name='myFile' id='myFile' size='27' type='file'>
<input id='my_button' name='action' value='Upload' onclick='uploadshow()' type='button'>
<input id='auditinstanceupload' style='display:none;' />
<input id='auditidupload' style='display:none;' />
<input id='question_id' name='question_id' value='$row[questionID]' type='hidden'>
</div>
<!--<input id='close_file_upload' value='Close' type='button'>-->
</form>
</div>
<div class='modal-footer'>
<form method = 'POST'>
<input type='button' id='yes_delete' value='Yes ' name='view_audits_delete' />
<button type='button' class='btn btn-default' data-dismiss='modal'>No</button>
</form>
</div>
</div>
</div>
</div>
<!-- modal pop up for [F] file upload button -->

shown.bs.modal is basically used to execute a function when bootstrap modal is fully open.
If you want to execute a function on click of a button, then you don't need this method. This is for a different purpose. You can use jQuery click() function for that purpose:
$( "#modalButtonId" ).click(function() {
alert( "Handler for .click() called." );
//write other methods here
});
source

try this
$(document).ready(function(){
$(".file_to_upload").click(function (data) {
//alert("works");
//var questionID = data.id;
var questionID = $(this).attr("id");
alert(questionID);
$('[id*="uploaded_files_"]').modal('show');
$('[id*="uploaded_files_"]').on('shown.bs.modal', function (e) {
$("#auditinstanceupload").html("<input id='audit_instance_id' name='audit_instance_id' value='"+questionID+"' type='hidden' style='display:none;'>");
$("#auditidupload").html("<input id='audit_id' name='audit_id' value='"+questionID+"' type='hidden' style='display:none;'>");
});
});
});

var questionID = $(this)[0].id
This worked for me!

I do not have the same rendering with elements created dynamically - JQuery - Bootstrap

I'm using Bootstrap and Jquery for my website, and I have a issue.
When I create elements dynamically, I don't have the same rendering as my 'static' elements, that's my html elements :
<div class="row" style="margin-bottom: 10px;">
<div class="col-xs-4 col-sm-2">
<button type="button" class="action btn btn-default">
<span class="glyphicon glyphicon-cog"></span>
</button>
<button type="button" class="action btn btn-default">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
That's the rendering :
And that's the rendering, when I click on the Add button :
I don't know why the rendering is like that because I have put the same html element in my Add button listenner :
$("#btnAddBuild").click(function(){
var htmlContent = "<div class='row' style='margin-bottom: 10px;'>" +
"<div class='col-xs-4 col-sm-2'>" +
"<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button>" +
"<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>" +
"</div>" +
"</div>"
//console.log(htmlContent);
$("#rowListBuilds").append(htmlContent);
});
Thanks

In the static html markup, there are multiple space characters between the buttons(which is collapsed to a single space), but in the string literal used for the dynamic elements there is no space.
Just add a [space] character between the button elements
$("#btnAddBuild").click(function() {
var htmlContent = "<div class='row' style='margin-bottom: 10px;'>" +
"<div class='col-xs-4 col-sm-2'>" +
"<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button> " +
"<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>" +
"</div>" +
"</div>"
//console.log(htmlContent);
$("#rowListBuilds").append(htmlContent);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rowListBuilds"></div>
<button id="btnAddBuild">Add</button>

I had a similar problem once and solved it by building the template string with linebreaks (via newline "\n"):
$("#btnAddBuild").click(function(){
var htmlContent = ["<div class='row' style='margin-bottom: 10px;'>",
"<div class='col-xs-4 col-sm-2'>",
"<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button>",
"<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>",
"</div>",
"</div>"].join("\n")
//console.log(htmlContent);
$("#rowListBuilds").append(htmlContent);
});
So the browser does not get a single line string to display but a multiliner, as if you would type it yourself in HTML.
Check it out:
https://jsfiddle.net/np9m8gse/

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.

Coding Razor and JavaScript

I have a ASP.NET MVC application and question is, how to correctly code what I have done in Razor with JavaScript. In the below example I have three buttons in Razor and the script works correctly. The in next example I use a helper in JavaScript that needs to do the same, (the script within the script) is not working. It also appears the bootstrap layout containers are recognized.
How do I do this correctly?
Razor (working well)
panelbar.Add().Text("Third Person")
.Content(#<div style="padding: 10px;">
<div id="cont5_container" class="container">
<span class="label label-primary">Age</span>
<br />
<br />
<div class="btn-group" id=ageID2>
<button type="button" style="width:120px" class="btnMyAge5 btn-default" id="3">Under 10</button>
<button type="button" style="width:120px" class="btnMyAge5 btn-default" id="1">Under 50</button>
<button type="button" style="width:120px" class="btnMyAge5 btn-default" id="2">Over 50</button>
#Html.TextBoxFor(m => m.ageID, new { #class = "input k-textbox", id = "MyAge5", Value = "", style = "width: 50px;" })
</div>
<script>
$(".btn-group > .btnMyAge5").click(function () {
$(this).addClass("active").siblings().removeClass("active");
document.getElementById('MyAge5').value = $(this).attr("id");
})
</script>
</div>
</div>);
JavaScript (Can't be correct)
<script type="text/javascript">
function OnClickAdd() {
$("#panelbar").kendoPanelBar();
var panelBar = $("#panelbar").data("kendoPanelBar");
panelBar.append(
{
text: "New Person",
encoded: true,
content: [
'<div id="cont6_container" class="container">',
'<span class="label label-primary">Age</span>',
'<br /><br />',
'<div class="btn-group" id=ageID>',
'<button type="button" style="width:120px" class="btnMyAge3 btn-default" id="3">Under 10</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="1">Under 50</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="2">Over 50</button>',
'#Html.TextBoxFor(m => m.ageID, new { #class = "input k-textbox", id = "MyAge3", Value = "", style = "width: 50px;" })',
'</div>',
'</div>'
]
}
)
}
<script>
$(".btn-group > .btnMyAge3").click(function () {
$(this).addClass("active").siblings().removeClass("active");
document.getElementById('MyAge3').value = $(this).attr("id");
})

it looks like at the time your click handler assignment in the second script tag fires the content appended by the first script tag hasn't been added to the DOM. You should register the click handler in the same function that adds the button to the HTML.

Dynamically appending HTML elements using jQuery not working

I need to build a button menu dynamically using Javascript, but I cannot make it work.
I´m using Bootstrap as base style class.
Here is my code:
<div class="well">
<button type="button" class="btn btn-primary btn-xs">Button 1</button>
<button type="button" class="btn btn-primary btn-xs">Button 2</button>
<button type="button" class="btn btn-primary btn-xs">Button 3</button>
<small class="pull-right">Right Text</small>
</div>
<div id="myMenu">
</div>
<script type="text/javascript">
$(document).ready(function () {
var upperWell = $("<div class='well clearfix'>");
$('myMenu').append(upperWell);
var createButton = $("<button type='button' class='btn btn-primary btn-xs'>Button1</button>");
var updateButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 2</button>");
var exportButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 3</button>");
$(upperWell).append(createButton);
$(upperWell).append(updateButton);
$(upperWell).append(exportButton);
});
</script>
The HTML code is what I need to build using Javascript.
The given Javascript code is not working.
Here is a fiddle that shows the code:
JsFiddle
Help very much appreaciated. Thanks.

You have forgotten the # from the selector.
Should be this.
$('#myMenu').append(upperWell);
Updated: http://jsfiddle.net/P7pTL/2/

Hi Please see here http://jsfiddle.net/hz37q/
$(document).ready(function () {
var upperWell = $("<div class='well clearfix'>");
$('#myMenu').append(upperWell); // <-- you miss hash
var createButton = $("<button type='button' class='btn btn-primary btn-xs'>Button1</button>");
var updateButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 2</button>");
var exportButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 3</button>");
$(upperWell).append(createButton);
$(upperWell).append(updateButton);
$(upperWell).append(exportButton);
});