Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5. I want it in exact circular shape. Friends, can you please fix it. Please try to help me I want it in responsive too. Below is my code kindly go through it. Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5.
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Product
identification</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Front ending <br> end customers</i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="" style="font-size:17px;"><b>ZRPL</b></i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Enhance product <br> visibility and deals</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Returns and ARB management</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Logistical
support</i></button>
</div>
</div>
</div>
Add this css style in your button. It will make a circular shape on you button. you can give any width and height value on your button. just make sure that height and width should have same value.
width:170px;
height:170px;
border-radius:50%
Related
{% csrf_token %} printing as text from js file in Django the code is working if use it in script tag but when I try to use from an external js file it doesn't work
HTML
<div class="build">BUILD YOUR RESUME</div>
<div class="box container" id="box2">
<div class="skillbox">
<div class="workquestion">
How Many work Exprience you wanted <br> to add in your resume ?
</div>
<div class="row" id="butt">
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(1)" id="butt1">1</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(2)" id="butt2">2</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(3)" id="butt3">3</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(4)" id="butt4">4</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(5)" id="butt5">5</button>
</div>
<div class="workquestion" style="color: red;">
Maximum
</div>
</div>
<div class="row" >
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(6)" id="butt6">6</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(7)" id="butt7">7</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(8)" id="butt8">8</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(9)" id="butt9">9</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(10)" id="butt10">10</button>
</div>
<div class="workquestion" style="color: red;">
10 Skills
</div>
</div>
</div>
Script
<script src='{% static "js/skill.js" %}'>
</script>
skill.js
function updateform(n){
var temp=`<div class="heading">
<h2 class="head">Tell us about your Skills</h2>
<form method="POST" action="/skill">{% csrf_token %}`
for(var i=1;i<=n;i++){
temp=temp+`<div class="form-row">
<div class="form-group col-md-3">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Skill ${i}</label>
<input type="text" class="form-control" id="skill${i}" name="skill${i}" placeholder="Skill" required>
</div>
</div>`
}
temp=temp+`<button id='b1' type="submit" class="btn btn-primary nextbtn">Next</button>
</form>
</div>`
document.getElementById('box2').innerHTML=temp
}
Are you processing the JS file in Django, as a template?
Instead of referencing the resource directly in your script at its specified location, you will need to instead reference a Django URL that processes the file as a template and then returns the processed content (source text ...) to you.
I am having some trouble in clearing file contents when file upload is done via Ajax.Below is my modal popup html code,
<div class="modal-header bg-blue">
<div class="desktop_view">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"id="myModalLabel">Upload Document</h4>
</div>
<div class="mobile_view">
<button type="button" class="btn btn-default btn-xs pull-right bold" data-dismiss="modal">Close</button>
<h4 class="modal-title"id="myModalLabel">Upload Document</h4>
</div>
</div>
<div class="modal-body">
<div class="upload-container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="form-group fileinput-button">
<label class="col-lg-6 col-md-6 col-sm-6 col-xs-12 control-label">Select Your Document:</label>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"><input type="file" multiple name="file[]" accept="image/*" id="files" ></div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="preview-container">
<div class="col-lg-12">
<div class="clearfix"></div>
<div id="dvPreview" class="preview-container"></div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" value="Upload" class = "btn btn-info" id= "save" />
<button type="button" class="btn btn-danger myclose" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
After submitting the form,the previous image content still exists.I have tried below methods.
$('#myModalone').find('form')[0].reset();
$(function () {
// Delegating to `document` just in case.
$(document).on("hidden.bs.modal", "#myModalone", function () {
//$('.modal-body').find('input').val('');
$(this).removeData('bs.modal');
});
});
It doesn't works.Please provide a solution.
Give an id to the form and call form reset function as:
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
Also you can use js as:
document.getElementById('formId').reset();
To reset a div:
$('#div_id input[type="text"]').val('');
$('#div_id input[type="file"]').val('');
Find the working fiddle here:
http://jsfiddle.net/Safoora/Car52/174/
I'm trying have have two rows of two buttons stacked on top of each other like below:
[button][button]
[button][button]
These buttons need to be in the center of the screen and evenly take up the space below the picture. I am very close with the code below but cannot get them centered correctly. How would I change my code to accomplish this:
[ Image ]
[button][button]
[button][button]
Also I feel like I'm making this overly complicated. Is there an easier way to stack buttons evenly in the center? Thank you!
/*Four Button Set-up*/
.buttonAnswerLeft{
width: 25%;
max-width: 800px;
font-size: 25px;
display: inline-block;
text-align:center;
}
.buttonAnswerRight{
width: 25%;
max-width: 800px;
font-size: 25px;
display: inline-block;
text-align:center;
float: left;
}
<img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
<div class="button-box col-lg-12 col-xs-12">
<button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info '> Absolutely sure, I'm not going.</button>
<button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info '> Pretty sure I'm not going. </button>
</div>
<div class="button-box col-lg-12 col-xs-12">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
<button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info '> It's a maybe. </button>
</div>
</div>
</div>
I know you have accepted an answer already but it doesn't seem to answer your question
First, whatever contains the following code must have text-align:center on it (in the example bootply, I have put this on the body tag).
Second, I have assumed you are using bootstrap because of the classes - this makes no difference but that's why I have done the example in bootply.
Third, wrap all elements in an inline element that has a max width of 100%;
Fourth, make image block and max-width of 100%
4th as your buttons seem to be inline-block elements, you can add box-sizing and 50% width to them and then comment out the space inbetween, then you should achieve what you are after
body {
text-align: center;
}
.image-container {
display: inline-block;
max-width: 100%;
}
.image-container .image {
display: block;
max-width: 100%;
}
button {
width: 50%;
box-sizing: border-box;
}
<div class="image-container">
<img class="image center-block" id="image6" src="http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg">
<div class="button-box col-lg-12 col-xs-12"><!--
--><button id="" type="button" class="buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info "> Absolutely sure, I'm not going.</button><!--
--><button id="" type="button" class="buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info "> Pretty sure I'm not going. </button><!--
--></div>
<div class="button-box col-lg-12 col-xs-12"><!--
--><button id="" type="button" class="buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info "> It's doubtful. </button><!--
--><button id="" type="button" class="buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info "> It's a maybe. </button><!--
--></div>
</div>
Example bootply
The above is fully responsive up to the max width of the image
Are you expecting result something like this?
You can use bootstrap text-centerclass to make the buttons center
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<img class='image center-block col-lg-12 col-xs-12 col-md-12' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
<div class="button-box col-lg-12 col-xs-12 col-md-12 text-center">
<button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info '>Absolutely sure, I'm not going.</button>
<button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info '>Pretty sure I'm not going.</button>
</div>
<div class="button-box col-lg-12 col-xs-12 text-center">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '>It's doubtful.</button>
<button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info '>It's a maybe.</button>
</div>
</div>
</div>
Here's my solution:
you can use the grid system of Bootstrap. The idea is that the class "row" spans for the full width of the parent, and then tell each button to stretch for 25% of its parent (col-xs-3). The first button in each row also needs an offset of 25% (col-xs-offset-3).
I recommend to read about the grid system: http://getbootstrap.com/css/#grid
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div >
<div>
<div>
<img class='image center-block img-responsive' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
<div class="button-box row">
<button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info col col-xs-3 col-xs-offset-3 '> Absolutely sure, I'm not going.</button>
<button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info col col-xs-3'> Pretty sure I'm not going. </button>
</div>
<div class="button-box row">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info col col-xs-3 col-xs-offset-3 '> It's doubtful. </button>
<button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info col col-xs-3'> It's a maybe. </button>
</div>
</div>
</div>
You should take advantage of the Bootstrap grid layout, even for your buttons :)
Example : http://codepen.io/anon/pen/MJoavP
I have made two different buttons rows, so you can check the differences
<div class="container">
<div class="row">
<img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
<hr>
<div class="row">
<button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info col-md-5 pull-left'> Absolutely sure, I'm not going.</button>
<button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info col-md-5 pull-right'> Pretty sure I'm not going. </button>
</div>
<div class="row">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info col-md-6'> It's doubtful. </button>
<button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info col-md-6'> It's a maybe. </button>
</div>
</div>
Add some row classes and then make the buttons their own columns.
/*Four Button Set-up*/
.buttonAnswerLeft{
width: 100%;
max-width: 800px;
font-size: 50px;
display: inline-block;
text-align:center;
}
.buttonAnswerRight{
width: 100%;
max-width: 800px;
font-size: 25px;
display: inline-block;
text-align:center;
float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-lg-12 col-xs-12">
<img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg' width="100%">
</div>
</div>
<div class="row">
<div class="button-box col-lg-6 col-xs-6">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
</div>
<div class="button-box col-lg-6 col-xs-6">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
</div>
</div>
<div class="row">
<div class="button-box col-lg-6 col-xs-6">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
</div>
<div class="button-box col-lg-6 col-xs-6">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
</div>
</div>
If you are using bootstrap then use the grid system to create a simple layour for the buttons:
<div class="row">
<div class="col-xs-4 col-xs-offset-4"> <!-- set this to the required width and offset -->
<img class='image' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4"> <!-- Set this to your required width and offset -->
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block" type="button">Button 1</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block" type="button">Button 2</button>
</div>
</row>
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block" type="button">Button 3</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block" type="button">Button 4</button>
</div>
</div>
</div>
</div>
http://getbootstrap.com/css/#grid
I tried something for you:
Fiddle:
JSFiddle
HTML:
<div id="img-div" class="col-xs-12">
</div>
<div class="row">
<!-- Set this to your required width and offset -->
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block" type="button">A</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block" type="button">B</button>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block" type="button">C</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block" type="button">D</button>
</div>
</div>
</div>
CSS:
.btn {
width: 100%;
}
#img-div
{
width: 100%;
height: 600px;
background-size: cover;
background-image: url('http://i.dailymail.co.uk/i/pix/2013/10/22/article-2471794-18E82E4300000578-360_638x405.jpg');
}
I have wrote a jQuery to change the button colour to red when some one clicks on it. But that is only work with the first panel but its not working for the rest of the panels. In the first set of button it works but not only for everything. This is the jQuery part.
function DurationOnClick(element){
var buttonId = element.id;
var buttonName = element.name;
var buttonIds = ["1Hour", "30Min", "1Day" , "1Week", "1Month"];
var chartType = $('#chartType').val();
var idValue = $('#IdValue').val();
//after user click the option here we are changing the option black to red.
$(buttonIds).each(function(i, e) {
$('#'+e+'[name='+buttonName+']').css("color", "");
});
$('#'+buttonId+'[name='+buttonName+']').css("color", "Blue"); `
The html code is like this :
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="LoadAverage" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
After removing the first panel the colour changing will happen for the next immediate chart but the charts below that one the changing colour is not happening. Any help to figure out the issue will be really appreciated.
Please use the below code. This will work perfect with your case:-
function DurationOnClick(ref) {
var buttonName = $(ref).attr("name");
$("button[name=" + buttonName + "]").each(function () {
$(this).css("color", "");
});
$(ref).css("color", "Blue");
}
As already explained the problem is you have duplicate IDs, the id-selector will select only the first element with the id so your code will always select the first set of elements.
But a more jQuery-ish solution will be use jQuery event handlers along with class(duration) to group them like
$('button.duration').click(function() {
$(this).addClass('selected').siblings('.selected').removeClass('selected');
})
.btn.btn-default.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="MemoryConsumption" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="LoadAverage" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
You have duplicated ID. Your code is ok, but you did it wrong.
id attribute is considered unique.
classattribute is considered multiple.
You have put several same id, but CSS and JS are looking only for ONE, so they process the first (only) and leave.
Change id to class.
Example: class="30mins" will turn redall the "30mins" buttons.
Do it for every group you want to turn red on click.
You should not have duplicate ID in the HTML form. Consider using the first set of IDs only.
Apparently you cant have numbers as the first character of an ID or class for your css to apply. If you#re applying style to your 30min 1hour etc, you should consider renaming them. I'm not sure if this conflicts with JS as well. See this example:
<div class="char">char</div>
<div class="char1">char1</div>
<div class="1char">1char</div>
<div class="1111">1111</div>
JSFiddle
I used JHipster to create my project and it has been pretty smooth sailing of late. However, I ran into an issue with editing objects on my main.html. I am able to successfully edit the post when I'm on the posts.html page that the router points to, but I am unable to do it with the exact same code on my main.html. I am able to call the information from the postController on my main page, and it is displayed adequately. I am, however, unable to make my data appear inside the modal popup. I know the information is being received by the controller because my console.log($scope.post) returns the object that I want to edit. However, that information is not transmitted to my modal. Any help appreciated.
Button that calls edit:
//inside postController and an ng-repeat of posts calling update function
<button class="btn btn-primary btn-xs" type="submit" ng-click="update(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
Actual Modal Code:
<div ng-controller="postController">
<textarea class="form-control" rows="3" placeholder="Status update here..." data-toggle="modal" data-target="#savePostModal" ng-click="clear()"></textarea>
<div class="modal fade" id="savePostModal" tabindex="-1" role="dialog" aria-labelledby="myPostLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form name="form" role="form" novalidate class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" ng-submit="create()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">×</button>
<h4 class="modal-title" id="myPostLabel">Create or edit a Post</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>ID</label>
<input type="text" class="form-control" name="id" ng-model="post.id" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="test" placeholder="Title your post..." ng-model="post.name" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Author</label>
<input type="text" class="form-control" name="test" placeholder="Temporary Field..." ng-model="post.author" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Text</label>
<textarea rows="8" placeholder="Status update here..." class="form-control" type="text" name="test" ng-model="post.text" ng-minlength=1 required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
Update function
$scope.update = function (id) {
$scope.post = Post.get({id: id});
$('#savePostModal').modal('show');
};
I know it's successfully calling this get function, but the data from the $scope.post isn't being used.
As it turns out, in order for a modal to work, it has to be in the same controller-div as the text that prints the button. I'm pretty sure this is because the scope on controllers is different if the div is different. Also, don't have a second modal with the same name for testing because it will inevitably fail because of the functions confusion over which one to use.
<div id="toBeUpdated" ng-controller="postController">
<div class="modal fade" id="savePostModal" tabindex="-1" role="dialog" aria-labelledby="myPostLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form name="form" role="form" novalidate class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" ng-submit="createMob()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">×</button>
<h4 class="modal-title" id="myPostLabel">Create or edit a Post</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>ID</label>
<input type="text" class="form-control" name="id" ng-model="post.id" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="test" placeholder="Title your post..." ng-model="post.name" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Author</label>
<input type="text" class="form-control" name="test" placeholder="Temporary Field..." ng-model="post.author" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Text</label>
<textarea rows="8" placeholder="Status update here..." class="form-control" type="text" name="test" ng-model="post.text" ng-minlength=1 required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</div>
</form>
</div>
</div>
</div>
<li class="animate-repeat" ng-repeat="post in posts.slice().reverse() | checkboxAndFilter:search.$:search.author:search.name:search.id:search.text | limitTo: noPostsOnPage">
<div class="well ng-scope">
<div name="desktopPost" class="h4">
<input type="checkbox" name="checkered"> {{post.name}} <span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
<a class="pull-right" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
</div>
<div style="display: none" name="mobilePost" class="h4">
<div ng-click="postNameAlert(post.name);">
<div name="ellipse" style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;">{{post.name}}</div>
</div>
<input type="checkbox" name="checkered">
<span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
<a class="pull-right" style="padding-top:7px" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
</div>
<p>
<div ng-bind-html="trustHtml(post.text)" hashtagify term-click="tagTermClick($event)" user-click="tagUserClick($event)"></div>
</p>
<br> {{post.author}} on {{post.date_Written}}
<br>
<div name="desktopSide">
<button class="btn btn-primary btn-xs" type="submit" ng-click="update(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
<span class="glyphicon glyphicon-remove-circle"></span> Delete
</button>
</div>
<div style="display:none;" name="mobileSide">
<button class="btn btn-primary btn-xs" type="submit" ng-click="updateMob(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
<span class="glyphicon glyphicon-remove-circle"></span> Delete
</button>
</div>
<div class="animate-repeat" ng-repeat="summarized in filterID(post.id)">
<div class="animate-repeat" ng-repeat="new_post in getPost(summarized.child)">
<button class="pull-right btn btn-default btn-xs" ng-click="reversePostState(new_post.id, new_post.name, new_post.author)">
<span id="{{new_post.author}}" class="glyphicon glyphicon-plus"></span>
</button>
<div class="well ng-scope">
<h4>
{{new_post.name}}
<div id="{{new_post.name}}" style="display:inline;"> - {{new_post.author}}</div>
<span ng-if="new_post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
<a class="pull-right" ng-click="changeElemOnClick('id_search');changeid(new_post.id);">{{new_post.id}}</a>
</h4>
<div id="{{new_post.id}}" style="display:none;">
{{new_post.text}}
<br> {{new_post.author}}
on {{new_post.date_Written}}
<br>
</div>
</div>
</div>
</div>
</div>
</li>
<center ng-if="checkForPosts()">
<button class="btn btn-default" ng-click="incrementLimit()">
<span class="glyphicon glyphicon-arrow-down"></span>Show More Posts
</button>
</center>
</div>