Im trying to set up bootstrap-select.js for my website that Im working on (Magento ver. 1.9.1.0), and Im having some problems I cant solve.
Everything gets loaded perfect, but when I select an option in the dropdown select list, the entire select disappears by getting an element.style onto it like this:
style="display:none;"
And in FireBug it says:
element.style {
display: none;
}
See visual image here: http://i.imgur.com/cg1jkOp.jpg?1
The problem is I dont know where this styling is coming from, so I decided to check 'Break on attribute change' in FireBug and see what it said. The code came from Jquery (jquery-2.1.3.min.js) as you can see in this image: http://i.imgur.com/Jbu8TCx.jpg?1
This is what I have in my <head> section:
<link rel="stylesheet" href="http://localhost/sg-magento/skin/frontend/ultimo/default/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="http://localhost/sg-magento/skin/frontend/ultimo/default/css/bootstrap/bootstrap-select.min.css">
<script type="text/javascript" src="http://localhost/sg-magento/js/infortis/jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://localhost/sg-magento/skin/frontend/ultimo/default/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost/sg-magento/skin/frontend/ultimo/default/js/bootstrap/bootstrap-select.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.selectpicker').selectpicker();
});
</script>
Where do I go from here? How do I solve this problem? Seems like such a small thing, but it's really getting on my nerves now. Been trying to figure it out for a long time now.
Hope there are someone willing to try to help.
Thanks.
This because for Bootstrap and Prototype conflict. See more details here.
Create a new JS file and Add the following Code in it.
if (Prototype.BrowserFeatures.ElementExtensions) {
var disablePrototypeJS = function (method, pluginsToDisable) {
var handler = function (event) {
event.target[method] = undefined;
setTimeout(function () {
delete event.target[method];
}, 0);
};
pluginsToDisable.each(function (plugin) {
jQuery(window).on(method + '.bs.' + plugin, handler);
});
},
pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover'];
disablePrototypeJS('show', pluginsToDisable);
disablePrototypeJS('hide', pluginsToDisable);}
Have fun :)
I had similar issue, when select was disappearing on submission and re-render of Backbone template. In my case calling $('.selectpicker').selectpicker('render'); fixed it.
$( ".dropdown-menu > ul > li" ).click(function() {
$( '.bootstrap-select').attr('style', '');
$( this ).parent( '.bootstrap-select').attr('style', '');
});
This will override any conflict that cuases this problem. I DO NOT BELIEVE either of the previous answers are correct. AND MINE DEF IS NOT AN ANSWER. But it will solve the problem, until more time can be spent to find the real source of the conflict. Prototype could be the cause, but the prototype answer does not work!
Related
Here's what I've tried. I believe that onerror don't work for link and script. I am not that sure.
Basically, what I want to achieved is. When the browser failed to load some assets, I am going to reload the webpage. Unluckily, my first step (script) don't work.
var link = document.getElementsByTagName('link'),
img = document.getElementsByTagName('img'),
js = document.getElementsByTagName('script');
function chk_error(e){
for(var i = 0; i < e.length; i++){
e[i].onerror = function(){
alert('Failed.'); // doesn't alert even there's error
}
}
}
chk_error(link);
chk_error(img);
chk_error(js);
AND
[].forEach.call(document.querySelectorAll('link, img, script'), function(e){
e.onerror = function(){
alert('reload'); // doesn't alert. not working.
}
});
NOTE: I don't use jQuery library with this project.
Another option is to access the error length in console but I don't know how to get it. And I don't think it is possible by now.
This project is focused on Google Chrome for some reason.
Maybe someone has a better idea or some advice to me. Any help would be appreciated. Thanks.
Solved it by putting inline onerror= "location.reload()" to desired img, link, script. I think it is useful also. So, if someone would need the same features. This is how I do it.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" onerror="location.reload()">
<img src="images/logo.png" onerror="location.reload();">
<script src="js/tweenmax.js" onerror="location.reload()"></script>
Ugly but it worked for me. If someone have a better Idea. Please answer. Thanks.
Edit 2:
[].forEach.call(document.querySelectorAll('link, img, script'), function(e){
e.setAttribute('onerror', 'location.reload()');
});
Much better than the first one. This will only work if the script is at the top of the head before the link.
You should defined error trigger function before onerror has called ! Here in my computer has alert twice because js/tweenmax.js and djffjds.jpg is not exist .
<script type="text/javascript">
//this function must be in header tag
function hasError(argument) {
alert(argument == 'error');
}
</script>
<script src="js/tweenmax.js" onerror="hasError('error')"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" onerror="hasError('error')">
<img src="djffjds.jpg" onerror="hasError('error')">
this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});
I'm using the EasyTabs plugin by Alfa Jango on my website, and would like to have the panels seperated from tabs. He states in the documentation what I want to do;
Your panels can also be somewhere else in the DOM entirely (outside of
your tab container), if you specify an alternate panelContext.
The panelContext is any jQuery DOM element, in which easytabs will
look for the panels. By default, it's the container on which
easytabs() was called.
So, I understand I have to specify panelContext, say, to look for the panels in div#disconnected.
This is what I tried, but nothing works...
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
panelContext: '#disconnected';
});
});
</script>
Or trying to change the $container...
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
$container: '#disconnected'
});
});
</script>
Any help would be greatly appreciated!
I have a same problem as you, and found the answer:
You should type as:
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
panelContext: $('div#disconnected')
});
});
Found after looking the code here: Easy Tabs Github
Hope it helps
I'm trying to apply the javascript below in an html file, this code is part of a plugin so I know that it works for sure, but I'm have trouble defining it with tags, no matter what I try the script won't run.
Once the user scrolls past a div, that div becomes stuck to the top of the page:
$(function() {
var a = function() {
var b = $(window).scrollTop();
var d = $("#scroller-anchor").offset({scroll:false}).top;
var c=$("#scroller");
if (b>d) {
c.css({position:"fixed",top:"0px"})
} else if (b<=d) {
c.css({position:"relative",top:""})
}
};
$(window).scroll(a);a()
});
I tried using the tag below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
but that didn't work.
Any help would be much appreciated, thanks
Pretty sure you need the type attribute.
<script type="text/javascript">
You could then throw that source in if you'd like, just add that attribute on.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
and that should be the proper way to include whatever is in that code into your page.
if you are manipulating the DOM, you will also need to wrap your code with DOMReady:
$(document).ready(function(){
//Code goes here
});
Website test page: http://www.lantiis.com/indexold.html
jsFiddle: http://jsfiddle.net/Guhb4/7/
I received help with the jQuery and it works perfect in jsFiddle. (temp sign-in as Lantiis here: Can independently show/hide. How do I hide on show?)
When I transfered the code, everything worked except the images. The background images show up, the link images show up, but not the main images that have the site content which is what I needed the jquery for. I have no idea what I did wrong when I transferred the code over.
I am sure this is just a stupid mistake on my part, but as I am still learning js, I am at a total loss at this point. I thought I had it pretty good until I posted my first question and saw how messy my code was in comparison to the users code who helped me.
Any and all direction and criticism is welcome.
You need to include the jQuery library in your HTML.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
http://docs.jquery.com/Downloading_jQuery
And wrap your jQuery code in the following:
<script type="text/javascript">
$(document).ready(function() {
//Your code here
});
</script>
http://docs.jquery.com/How_jQuery_Works#Launching_Code_on_Document_Ready
In addition to including the jQuery library (as mentioned by Callum) and placing your code within an onload function (as mentioned by CleverQuack), your script also needs to have a type of text/javascript, not just javascript. Something like this should work:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#mask > div:first-child').show();
$('#top a').click(function() {
var keyterm = $(this).attr('title');
$('#mask > div').hide();
$('div[id=' + keyterm + ']').slideDown('slow');
});
});
</script>