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);
});
Related
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?
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/
I have the following code:
#foreach($results as $result)
<tr>
<td>{{$result->my_id}}</td>
<td>{{$result->province_name}}</td>
<td>{{$result->city_name}}</td>
<td>
<a class="btn btn-primary" href="{{route('city-edit', $result->my_id)}}"><i class="fa fa-edit"></i></a>
<a class="btn btn-danger" href="{{route('city-delete', $result->my_id)}}"><i class="fa fa-trash"></i></a>
</td>
</tr>
#endforeach
How to add a confirmation on delete each data?
I prefer a more easier way, just add onclick="return confirm('Are you sure?')", as bellow:
<a class="btn btn-danger" onclick="return confirm('Are you sure?')" href="{{route('city-delete', $result->my_id)}}"><i class="fa fa-trash"></i></a>
If this is your link:
Delete
Use this Javascript:
var deleteLinks = document.querySelectorAll('.delete');
for (var i = 0; i < deleteLinks.length; i++) {
deleteLinks[i].addEventListener('click', function(event) {
event.preventDefault();
var choice = confirm(this.getAttribute('data-confirm'));
if (choice) {
window.location.href = this.getAttribute('href');
}
});
}
Note: the <a> needs the delete in class.
This solution uses Unobtrusive JavaScript and should work with IE 9 or newer.
<a class="btn btn-danger" onclick="return myFunction();" href="{{route('city-delete', $result->my_id)}}"><i class="fa fa-trash"></i></a>
<script>
function myFunction() {
if(!confirm("Are You Sure to delete this"))
event.preventDefault();
}
</script>
<a href="{{ route('city-delete', $result->my_id) }}"
class="btn btn-danger" data-method="DELETE" data-confirm="Are you sure?"> Delete</a>
With brexis/laravel-data-method package, you can specify appropriate HTTP method and a confirmation text.
This is helpful if you have this for example into your routes file:
Route::get('cities/{city}', 'CityController#show')->name('city-show');
Route::delete('cities/{city}', 'CityController#destroy')->name('city-delete');
If this is your link:
<i class="fa fa-trash"></i>
Route:
Route::get('/icrm/venues/property_area/delete/{propertyarea}', 'VenuePropertyAreaController#deletepropertyarea')->name('venuepropertyarea.delete');
Use this Javascript:
var deleteLinks = document.querySelectorAll('.delete');
for (var i = 0; i < deleteLinks.length; i++) {
deleteLinks[i].addEventListener('click', function(event) {
event.preventDefault();
var choice = confirm(this.getAttribute('data-confirm'));
if (choice) {
window.location.href = this.getAttribute('href');
}
});
}
Note: the <a> needs the delete in class.
This solution uses Unobtrusive JavaScript and should work with IE 9 or newer.
index.blade.php
<form action="{{route('todos.destroy', $todo->Id)}}" method="post">
<input type="hidden" name="_method" value="DELETE">
#csrf
<button id="btnDelete"class="btn btn-danger btn-sm">Delete</button>
</form>
<script type="javascript">
document.onsubmit=function(){
return confirm('Sure?');
}
</script>
I used pure PHP Form, the method DELETE has to be passed as hidden on the submit page action, so I catch it trough javascript and I get the confirmation alert.
<a class="btn btn-danger px-5 radius-30" onclick="return confirm('Are you sure you want to Unassign this agent?')" href="{{ route('unassign.agent', $report->id) }}" >Unassign</a>
the right route method
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.
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.