I have a page with lots of areas that you can click to collapse, but I would like to save the users preferences for the parts they collapse in their account server-side so when they revisit the page the parts they collapsed previously will stay that way.
My problem is, I cant get the button to both collapse and submit a http post form in the background, I can do one or the other but not both at the same time on one button.
Here is the button the user clicks:
<button type="button" class="btn btn-mini btn-link" data-toggle="collapse" data-target="#Section_1" name="button" value="save_collapse_choice_1"><strong>Section 1</strong></button>
And here is the section that would collapse in or open up
<div id="Section_1" class="collapse in">
This will collapse (And does)
</div>
Then I simply have a form called backend.php which is in the page and if I didn't have the data-toggle="collapse" on my button, then that form submits successfully with the name button and the value save_collapse_choice_1
Obviously when I have this in the actual page the class="collapse in" would have some PHP in there to add or remove the "in" part dependant on what setting is stored on the server for this users account.
Why not use $.ajax() and post to the backend.php the value of the open/close divs and run the open-close in the same page?
Something like
$('button[data-toggle="collapse"]').click(function() {
/* open and close code */
$.ajax() {
url: 'backend.php&save-collapse-choice'
});
});
Related
First of all apologies for the terrible wording, I'm having trouble describing the issue.
Currently I have a series of buttons in a horizontal row, whereby clicking on a button shows it's associated content underneath, and clicking on a different button collapses the current content and shows the new content (using the 'data-parent' attribute). I want it to function so that for example, if button 3 is clicked and it's content shown, and the user then clicks on button 3 again, instead of the content collapsing I would like it to remain on screen. The way it works currently is that if button 3's content is shown and button 3 is clicked again, the element collapses and we're just left with a row of buttons again. I've experimented with the '.collapse("show")' method but I'm having difficulty implementing it (not even sure if it's possible to work with this method). Here is the associated code:
<div class ="container" id="content">
<button class="btn btn-info" data-toggle="collapse" data-target="#0" data-parent="#content">0</button>
<button class="btn btn-info1" data-toggle="collapse" data-target="#1" data-parent="#content">1</button>
<button class="btn btn-info2" data-toggle="collapse" data-target="#2" data-parent="#content">2</button>
<button class="btn btn-info3" data-toggle="collapse" data-target="#3" data-parent="#content">3</button>
<div class="panel">
<div id="0" class="collapse in">
Button 0's content
</div>
<div id="1" class="collapse">
Button 1's content
</div>
<div id="2" class="collapse">
Button 2's content
</div>
<div id="3" class="collapse">
Button 3's content
</div>
</div>
</div>
Any help would be greatly appreciated.
Dont know if this solution will satisfy you but you can block this like that
for example
$('.btn').click(function(e) {
target = $(this).data('target');
if($(target).is(':visible')){
return false;
}
});
In this situation if you click on "button1" it will collapse the correct div and if you click this again nothing will happen. However clicking another button will collapse another div.
I have a bootstrap modal set up but I populate it with data retrieved via the jQuery ajax function. If the modal is opened using the following code, then it opens fine, and is scrollable.
<button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#editContact"><i class="fa fa-pencil"></i></button>
However, as I populate it with data, I call a JavaScript function to do the ajax call, and populate it with the data. The function is called on button click, like so:
<button type="button" class="btn btn-warning btn-xs" onclick="open_contact(2);"><i class="fa fa-pencil"></i></button>
Which calls the follow JavaScript function:
function open_contact(id)
{
$.post("contacts/get",
{
// Posts relevant details to show the right content
},
function(data, status) {
// Code here to check for valid response etc
$('#editContact').modal('show');
});
}
This JavaScript works fine - it throws no error and it retrieves the data fine. It also opens the modal fine. However, when the modal is opened with the JavaScript rather than with the first button (with the data-target), the whole browser window scrolls rather than just the modal.
For reference, the modal opening tags:
<div class="modal fade" id="editContact" tabindex="-1" role="dialog" aria-labelledby="editContact" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Does anyone have any suggestions please?
Edit
I should just clarify that my issue isn't the fact that I don't have scroll bars. The issue I'm having is when I scroll using the mouse wheel for example, the page behind the modal will scroll, but the modal doesn't move. Therefore, any text hidden from view in the modal, never comes into view.
I think the comments to your question are right, not showing the scrollbar is the intended behaviour.
Class modal-open gets added to the HTML body when you show the modal, and removed when you hide it.
This makes the scrollbar disappear since the bootstrap css says
.modal-open {
overflow: hidden;
}
To achieve what you want - showing the scrollbar - you can override the native css by specifying
.modal-open {
overflow: scroll;
}
in your own css file.
I'm using the jQuery plugin called "sidr" (http://www.berriart.com/sidr/)
This plugin enables implementation of side menu.
With these code below, only the 1st button is clickable and working fine.
However, I want to enable both of these buttons to open side menu.
How can I modify my code?
Menu Part
<div id="sidr">
...Menu Contents here...
</div>
1st button
Menu
2nd button
<a id="menu" class="btn btn-primary btn-large" href="#sidr">Menu</a>
You are using the id twice, and jQuery only recorgnices the first id:
<a id="menu" class="btn btn-primary btn-large" href="#sidr">Menu</a>
you need to define another id to open the menu with both buttons
edit:
you could use the jQuery.sidr() Function to open the menus by yourself:
I have a form with various kinds of inputs, text, drop downs, radial buttons, sliders, and checkboxes. My "Reset" button is outside of the form (above the form). Is there a way to click the button and set all of the inputs back to default?
I have a Twitter Bootstrap accordion, with the reset button on the accordion header. The form is below inside of the accordion. I want to be able to clear the form whether the accordion is expanded or collapsed.
Example:
Accordion heading (Expanded) Reset
input fields
Accordion heading (collapsed) Reset
My reset is in my html like so:
<a id="icon-Reset" href="#form" class="btn-mini" type="reset"><i class="icon-refresh" title="Reset" ></i></a>
and I was trying to do this in my javascript file:
#icon-Reset.click(function(){
$('#form').get(0).reset();
});
but I cannot get anything to work.
To be more clear, here is the top of the html that has the above html line in it:
<div id="side-bar-container">
<div id="sideBar">
<div class="accordion" id="mainAccordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#mainAccordion" data-target="#collapseOne"> <i
class="icon-chevron"></i>Accordion Heading1
</a>
<a id="icon-Reset" href="#form" class="btn-mini" type="reset"><i class="icon-refresh" title="Reset" ></i></a>
</div>
<div id="collapse" class="accordion-body collapse in">
<div class="accordion-inner scrollable">
<div id="Accordion1">
<form id="form"class="form-search form-horizontal">
<fieldset>
I am VERY new to Javascript, HTML, etc, so please be detailed...Thanks!!
Your approach was correct, but you have to attach form reset action to the click event of your button. It can be any control, assuming it's a span with id "reset"
<span id="reset">Reset</span>
You can make clicking on it reset form with id "form" like this:
$('#reset').click(function() {
$("#form")[0].reset();
})
This code attaches action to span's "onclick" event and inside of action gets the form and resets it. Here's a small demo - fill the form and then click Reset:
http://jsfiddle.net/29ewk/
I have a list of items, and upon clicking on one of the items, a modal dialog is displayed for the user to make some changes and click either "Close" or "Save changes".
The problem is that say that user makes some changes and clicks on "Close", the changes would have been reflected in the model the view is bound to, since data-binding is instant.
My question is then, how do I either defer the updates and only perform binding when "Save Changes" is clicked, or somehow forget the changes if "Cancel" is clicked.
The code for my modal dialog is like so:
<div ui-modal class="fade static" ng-model="modalShown" id="myModal" data-backdrop="static">
<div class="modal-header">
<button type="button" class="close" ng-click="closeModal()" aria-hidden="true">×</button>
<h3>{{selectedClientFeature.feature.type}}</h3>
</div>
<div class="modal-body">
<ul class="unstyled columnlist">
<li ng-repeat="country in countriesForEdit">
<input type="checkbox" ng-model="country.selected"> {{country.name}}
</li>
</ul>
</div>
<div class="modal-footer">
<a ng-click="closeModal()" class="btn">Close</a>
<a ng-click="saveChanges()" class="btn btn-primary">Save changes</a>
</div>
</div>
Thanks,
Shaun
The angularjs doc use to have an example of just this situation. What you would need is to clone your model (see angular.copy), prior to showing your edit modal, and when a user clicks on closeModal() you would reassign your model to the cloned value. IMHO, i would rename your 'Close' button to 'Cancel' and put it to the right of 'Save Changes', this is more explicit and seems to be the way many sites work.
Hope this helps
--dan
To automate manual cloning/updating model I came up with lazy-model directive.
See https://stackoverflow.com/a/20643001/740245