I'm working on an existing Bootstrap solution in my workplace. It has the following markup:
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal">Open Modal</button>
I'm somewhat new to Bootstrap but I did some basic googling. data-target is used to specify a child modal window to open. Markup similar to the markup above successfully opens a new modal window in a different enterprise website.
What are the requirements/dependencies for this implementation to work? For example, which supporting files are necessary? I'm assuming that should handle this this natively as opposed to requiring a jQuery click event wireup.
Can you please confirm if this is the case? I'm new to Bootstrap but this will help me focus my debugging. If the code above isn't working then what would you investigate as most likely root causes?
As mentioned in the comments jquery.js is required by bootstrap as well as a few others.
I believe this link may be helpful for your question as well:
http://getbootstrap.com/javascript/#modals-related-target
Related
I am using the modal plugin from Bootstrap and for some reason the backdrop is not showing.
When I check same code on W3Schools I notice a div is generated every time a modal opens:
<div class="modal-backdrop fade in"></div>
I got the exact same code as on W3Schools but this div is not generated on my site.
How can I fix that?
This happened to me when I used the wrong method to open the modal. I had
$('#myModal').show()
when of course it should be
$('#myModal').modal('show')
Another symptom of using the wrong method, in addition to the semi-opaque backdrop not showing, was the close button in the modal also did not work.
Please check whether CSS properties are overridden or not by inspecting <div class="modal-backdrop fade in"></div> element. Mostly this could be a CSS issue caused by an override.
Cannot reproduce this, as the w3 school examples work fine.
Verify the following. This might cause the issue:
It's good practice to put the <div class="modal">.. at the end of
the file or before </body>
If any other css class is overriding the modal-backdrop class
if jquery and bootstrap JS are added properly
Get the modal from
http://getbootstrap.com/javascript/#modals-examples
I am currently using OpenCart and would like to replace their 'Add to Cart' button with a simple link that says add to cart but I am currently running into a few problems. Currently, OpenCart uses javascript to add products to the cart using a button:
<button type="button" onclick="cart.add('41');"><i class=""></i> <span class="hidden-xs hidden-sm hidden-md">Add to Cart</span></button>
Now, products are added by using "onclick" which as I understand can also be used in <a> tags. Therefore, I have also tried to do this using a simple link:
<a onclick="cart.add('41');" href="#">Add to Cart</a>
What I am failing to understand is why the product is added to the cart as it should be when using the button but then when using the link, nothing happens. All help will be appreciated, Thanks.
This seemed to be an issue with OpenCart's built in cache system. After clicking on the link today, It worked successfully. If anyone else experience this issue in the future, do not forget to delete OpenCart's cache files.
I have some client-side JavaScript that dynamically inserts some elements into the DOM. Those elements contain the markup for a dropdown element using the Dropdown plugin:
<p>
<a
id="resource-upload-label-1234"
href="#invalid-resource-1234"
class="label alert"
data-dropdown="invalid-resource-1234"
data-options="is_hover:true"
>
Invalid
</a>
</p>
<div id="invalid-resource-1234" class="f-dropdown content" data-dropdown-content>
<h4>Invalid File</h4>
<p>
This file is not a supported file type.
</p>
</div>
The problem is that the dropdown plugin isn't detecting this new element, so it is not adding the dropdown behaviors to the new elements.
As a test, I tried hard-coding the HTML directly in the HTML source, and the dropdown loads fine in that context. So I have Foundation and the dropdown plugin configured correctly. It's just not binding the functionality to the dynamically-generated elements.
Is there a bit of JavaScript that I can run to bind the dropdown functionality to #resource-upload-label-1234? I was looking at the source for the plugin, and it wasn't evident to me how to do this.
For efficiency you can use $(document).foundation('reflow');
To be even more efficient "target the actual type of foundation item
you need to 'reflow' $(document).foundation('orbit', 'reflow');"
(I'm quoting from: http://foundation.zurb.com/forum/posts/1766-reflow)
One solution that I just found that works is to call $(document).foundation(); again after inserting the new elements.
I am not sure if this is the "right way," but it works. If anyone knows of a more appropriate solution, don't be shy, and post it as an answer!
According to a comment on zurb/foundation#3885, it appears that calling foundation() again should not cause any problems, and perhaps foundation() is designed to be used this way.
I'm researching HTML5/CSS3/JavaScript libraries/frameworks for a large single page application, and I found Twitter Bootstrap and BoilerplateJS. Both libraries/frameworks look very interesting and we're considering using both of them. However, we would like to use both together. Since we don't have experience with either library/framework, we thought we'd post a question (or two) regarding the combining of the two.
Is it possible to use Twitter Bootstrap with BoilerplateJS? If so, how would one go about using both together?
Thanks.
I have looked at Twitter Bootstrap, HTML5 Boilerplate type of projects when designing BoilerplateJS. I see above framework very much complementing than competing.
BoilerplateJS is proposing an architecture/structure to organize your JS code in the project. Twitter bootstrap helps you on responsiveness, UI Widgets, styling, etc where BoilerplateJS has no specific guilde lines proposed.
I think it is always a smart idea to use BoilerplateJS (very much focused on JS structure) along with Twitter Bootstrap or HTML5 Boilerplate (Widgets, CSS, HTML best practices) I believe.
BoilerplateJS is independent from any UI framework like Twitter Bootstrap, and they can be effectively combined together to create nice single-page apps.
Twitter Bootstrap helps you to build consistent UI, and you can use it to create Views for your components, while BoilerplateJS helps to orchestrate your components.
You may know that it is recommended to use MVVM/MVC framework with BoilerplateJS. If you choose KnockoutJS like i did, you will probably need to use custom bindings for Twitter Bootstrap elements in your views.
E.g. I am using it in my projects to seamlessly bind UI elements like grouped buttons and typeaheads to the viewmodel. You need only to refer to such binding code in your viewmodel to be able to use something like this in your view:
<label class="control-label"><strong>How many rooms:</strong></label>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-info" data-value="1" data-bind="checkedButtons: RoomNumber">1</button>
<button type="button" class="btn btn-info" data-value="2" data-bind="checkedButtons: RoomNumber">2</button>
<button type="button" class="btn btn-info" data-value="3" data-bind="checkedButtons: RoomNumber">3+</button>
</div>
Note the checkedButtons custom binding here, loaded into the viewmodel with
define(['Boiler', './../../kobuttonbinding' ], function (Boiler, kobuttonbinding) {
Bootstrap has its own javascript version of checkboxes, radio buttons, collapse etc.
Example radio buttons:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn">Left</button>
<button type="button" class="btn">Middle</button>
<button type="button" class="btn">Right</button>
</div>
This looks pretty great as long you have JS enabled. I like JS but I am also a NoScript user and I want that the page is also functional without JS.
As I can see twitter-bootstrap has no built-in fallback solution. I could use my own tags or show the bootstrap buttons only if JS is enabled but I somehow expected that bootstrap could handle this.
Only solution I have in mind is using standard radio buttons, checkboxes etc. and replacing/hiding them with some like code from above if JS is enabled.
I was also disappointed to see that some simple things like collapse have no fallback solution which would at least i.e. handle it with css3 transistions or at least just open all sub divs and keep them open.
Do you have some ideas/solutions for bootstrap without JS or is the only solutions writing a function to "hide radio buttons, show/create boostrap-divs if javascript enabled"?
You could handle it without javascript but that would require it to send it to a server side script or at least a form to submit it. As most user (I think about 99%) have javascript enabled, you should disable the function when no javascript is activated.