Component not rendered with all features - javascript

I have a React component with the following render method:
render: function() {
console.log("In render method");
return (
<div>
<div className="dropdown">
<button onClick={this.displayRest} className="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span className="caret"></span>
</button>
<ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" className="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
);
}
The component appears like this:
So the dropdown button is displayed, but it is not responsive. If I click on it, the dropdown does not show.
Also, the statement console.log("In render method"); has no effect, as nothing is printed to the console.
Why is this component only partially rendered?

It's weird that the log statement isn't showing up. Are you sure you checked the correct console window in the browser? Also do you have jQuery included inside your project?
It's pretty annoying at times to work with vanilla react and bootstrap. Check outreact-bootstrap - it makes handling both a little bit easier.

Related

how to toggle each button separately on multiple buttons?

I have same button for multiple times each one have same work that is of hide and show. I have to toggle following data after click on that button
<button type="button" class="pull-right btn menu">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="downmenu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
and js code is
$('.menu').click(function(){
$(this).each(function(){
$('.downmenu').toggle('show');
});
});
my problem is that after click on any button all buttons are working. How to toggle each separately. I have to toggle downmenu ul list on each button so how can i do it?
The loop inside the click event is redundant. The problem is the global selector for .downmenu which selects all elements with that class. The solution is to isolate the element .downmenu next to the button clicked:
$('.menu').click(function(){
$(this).next('.downmenu').toggle('show');
});

This bootstrap button dropdown is not working. But why?

At first I was using regular html but the dropdown button wasn't working so I changed to jsfiddle to test it out. I saw that the dropwdown still didn't work.
Here's the jsfiddle: https://jsfiddle.net/ugpqxpn6/2/
<div>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
I don't understand why it wouldn't work. I took a look at some similar questions and saw that maybe not including jquery was my problem so I added it but it still seems to malfunction. Can anybody help?
Here is a working fiddle with bootstrap.min.js and jquery.min
https://jsfiddle.net/nrgxh5rr/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Hit F12 on your keyboard to see the developer console, you have a Javascript error:
Error: Bootstrap's JavaScript requires jQuery
Make sure you're including jQuery before bootstrap's js files.

How can I keep the same position on the form once a user selects a value from the drop down?

I have a drop down field on my form. When I select a value from the drop down it immediately resets the focus to the top of the form.
To be clearer I have an image at the top of the screen and several input fields. The user would have to scroll down to the actual drop down field in order to select it. Once they select the value the page scrolls back to the top.
How can I keep the same position on the form once a user selects a value from the drop down?
My drop down is setup as:
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default form-control dropdown-toggle" type="button" id="ddState" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
State
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="ulState" aria-labelledby="ddState">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
</div>
My javascript is setup as:
$("#ulState li").on("click", function () {
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
$("#ulState").focus();
});
In your page directive <%# Page... add this
MaintainScrollPositionOnPostback="true"
if this doesn't work for you have a look at this article here or here
Hope this will work for you
The solution is is to replace the href attribute with the data-target attribute.
// This will correct the behavior and keep the page focused.
<li><a data-target="#" data-value="something else here">Something else here</a></li>
// This will cause the page to jump
<li>Separated link</li>

Image inside dropdown on bootstrap [duplicate]

This question already has an answer here:
Adding images with option tag [duplicate]
(1 answer)
Closed 6 years ago.
I try to create a search box with a dropdown inside the search text field and i want add a different image for every option
For now this is my result:
http://www.bootply.com/TqXN4y8Se5
The image are not visible, in dropdown are not possible add image?
Thanks for any help!
the html option tag does support text only
see other pst Adding images with option tag
altough you could use bootstraps dropdown component.
http://getbootstrap.com/components/#dropdowns
altough it requires custom javascript to listen to changes and react accordingly.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
You can use a background image but it's not available cross-browser. Or you can use jquery like http://jqueryui.com/selectmenu/#custom_render

Using Span for Triggering Bootstrap Dropdown

I have several icons in the header that is used from a font and wrapped with
<li style="margin-top: 15px">
<span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>
I want to use it to trigger bootstrap dropdown however in its documentation, it uses button and div and, I couldn't figure out how to trigger it when clicked on the font.
Should I try using jquery and try to trigger the dropdown to open on click on #messages?
You do not have to use <button>'s and <div>'s - the important thing is to have a data-toggle="dropdown" on the triggering element :
<ul class="dropdown">
<!-- your markup -->
<li style="margin-top: 15px" data-toggle="dropdown">
<span class="myIcons" id="messages" style="font-size:5px">m</span>
</li>
<!--// your markup -->
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</ul>
demo -> http://jsfiddle.net/7ujpzs58/

Categories

Resources