I am trying to use Semantic-UI (Dropdown Component) on Magento 1.9. I included the semantic files in my head.phtml as:
<script type="text/javascript" src="http://uat.vvv.com/semantic/index.js"> </script>
<script type="text/javascript" src="http://uat.vvv.com/semantic/dropdown.js"></script>
<link rel="stylesheet" type="text/css" href="http://uat.vvv.com/semantic/dropdown.css" media="all">
I also have before this, the current theme includes JQuery as
http://uat.vvv.com/js/fs/jquery-1.10.2.min.js
I added this code to display a dropdown
<div class="ui dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
It is displayed but it does not show the selections. Before moving into solving this, I noticed the error message in the Chrome Console:
Uncaught ReferenceError: require is not defined
at http://uat.vvv.com/semantic/index.js:3742:5
Reference:
http://semantic-ui.com/modules/dropdown.html
What am I doing wrong here? I cannot come to any more thought.
Related
I am attempting to place the bootstrap-datetimepicker by eonasdan in a C# gridview cell. I am facing issues with the elements not appearing correctly. Only the time is showing up and not the calendar. There are places for direction arrows on the element but they are not showing up either which makes me think it is a css issue and not a jquery or html issues. Any guidance would be greatly appreciated. Thanks!
I have tried rearranging and trying different .js and .min.js references. I have tried several of the different html layouts as provided on the documentation.
<script src=".../jquery-1.10.2.js"></script>
<script src=".../moment.js"></script>
<script src=".../bootstrap.js"></script>
<script src=".../bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href=".../bootstrap.css" />
<link rel="stylesheet" href=".../bootstrap-datetimepicker.css" />
…
<div class="containter">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="form-control" id="dt1" />
</div>
<script>
$(function () {
$('#dt1').datetimepicker();
});
</script>
</div>
</div>
</div>
There popup does work and it shows the time element, but the arrows to make the time go up and down are not appearing and the actual calendar itself is not showing up.
EDIT: I am now able to use the plugin with all of the textboxes but things are still not appearing as they should be. Here is the updated code. The datetime picker is still not appearing completely though.
<script src=".../jquery-3.4.1.min.js"></script>
<script src=".../moment.js"></script>
<script src=".../bootstrap.js"></script>
<script src=".../bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href=".../bootstrap.css" />
<link rel="stylesheet" href=".../bootstrap-datetimepicker.css" />
…
<div class="containter">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<asp:TextBox runat="server" ID="dt1" cssclass="form-control"></asp:TextBox>
</div>
<script>
$(function () {
$('.form-control').datetimepicker();
});
</script>
</div>
</div>
</div>
I am having the weirdest problem and cannot figure it out. I am working with a series of collapsable buttons in bootstrap and everything seems to work fine if I call boostrap before jquery:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
However, if I call jquery before boostrap (as should be done) then the collapsibles won't close after being opened. I am not sure if I am calling libraries that are incompatible between each other or there might be another issue I am not aware of? The complete <head> tag is:
<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<link href="https://cdn.bootcss.com/dragula/3.7.1/dragula.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.js"></script>
And a sample of the collapsibles:
<div class="container" id="maincontainer">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1"><center><b>My Panel</b></center></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
### contents
</ul
</div>
</div>
</div>
</div>
I'm guessing you are using a template for your website.
So your collapsible is probably using Bootstrap in combination with jQuery's $(document).ready and thus bootstrap needs to be loaded before the jQuery code otherwise you are missing parts of the DOM.
The thing about calling jQuery before bootstrap is is that your jQuery code contains a lot of $(document).ready(function() { code }) ; blocks, which means that the DOM(the entire structure of your page) needs to be loaded in order for the code to execute.
So if you call jQuery before bootstrap it will go through all of your jQuery code and give out false on a lot of code blocks because a big part of your DOM(the bootstrap integrated parts) gets loaded after the jQuery code is already executed.
So my guess(since i can't see your entire code) would be that your code is fine and that it's just a matter of calling scripts in the right order.
I've checked Bootstrap documentation on v 3.3.7 but perhaps I have missed something.
My issue is that my dropdown (below) is not working when I use CDN for Bootstrap JS v3.3.6, but it does when I change it to v3.3.7.
However when I change to v3.3.7, my tabs no longer work.
When I remove the Bootstrap JS link, the tabs work again.
<!doctype html>
<html>
<head>
<title>Quiz App!</title>
<link rel="icon" type="image/png" href="http://plainicon.com/dboard/userprod/2921_4eb4c/prod_thumb/plainicon.com-64851-256px-36c.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 id="header"><span class="glyphicon glyphicon-grain"></span> <small>(in development)</small></h2> </hr>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><span class="glyphicon glyphicon-home"></span></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Featured Topics<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>U.S. Presidents</li>
<li>Business & Investing</li>
<li>Astronomy</li>
<li>Movies</li>
</ul>
</li>
<li role="presentation">All Quizzes</span></li>
<li role="presentation">Create a Quiz</span></li>
</ul>
</div>
</div>
{{{body}}}
</div>
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>
Thanks in advance for any help.
The root of your problem is the href of your links inside tabs. In order for the bootstrap js to work, links should be referencing local content, for example some div id, like:
All Quizzes</span>
Bootstrap js hits it's head on the relative path in your link and throws an error (you can see it in the console, when you click on the tab).
If you look inside the bootstrap 3.3.7 source code for tabs.js, you'll see that it checks (line 29) the data-target attribute of the clicked element (tab) and if it's empty, falls back to href (line 32). Then it tries to use this value as a jquery selector (line 51) to find the element, which fails in your case.
For example, when you click on All Quizes tab, the js tries to do this:
$('/all-quizzes') and that throws an error, because it is not a valid jquery selector.
I'm having trouble using handlebars and understanding its connection to HTML. I wanted to copy a code I saw here and inserted the HTML in a file called index.html. However, I don't know if my syntax is wrong or I'm missing something, but my HTML file doesn't seem to be linking to the javascript file. It should display a button through which to connect to twitter and a pop-up window should appear, followed by a Twitter timeline. However when I click on the button nothing happens.
I realize this must be a really rookie mistake but I have tried everything and can't find the solution. Would someone please help me?
<!DOCTYPE html>
<html>
<head>
<title>Será que sim?</title>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="handlebars-v1.1.2.js"></script>
<script src="main.js"></script>
<script src="oauth.js"></script>
</head>
<body>
<div id="connect">
<button class="btn btn-primary" id="btn-connect">Connect with twitter</button>
<p>If nothing happen after the connexion, it's maybe because the twitter rate limit exceeded</p>
</div>
<div id="res">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for a term or hashtag" id="search" />
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="btn-search">Search</button>
</span>
</div>
<div id="search-res"></div>
</div>
<script id="entry-template" type="text/x-handlebars-template">
<ul id="timeline">
{{#each statuses}}
<li>
<img class="thumbnail" src="{{user.profile_image_url}}" />
<span class="content">
<span class="author">{{user.name}}</span>
<span class="text">{{link text}}</span>
</span>
</li>
{{/each}}
</ul>
</script>
</body>
</html>
I'm trying to use the fuelux datepicker and can't seem to even initialise it properly! Any help would be most appreciated. I've based it on the examples here: https://gist.github.com/vernak2539/9980566
Header of page:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//www.fuelcdn.com/fuelux/3.4.0/css/fuelux.min.css" rel="stylesheet">
HTML:
<div class="fuelux">
<div class="datepicker dropdown" id="myDatepicker">
<div class="input-append">
<div class="dropdown-menu"></div>
<input type="text" class="span2" value="" data-toggle="dropdown">
<button type="button" class="btn" data-toggle="dropdown">
<i class="icon-calendar"></i></button>
</div>
</div>
Before my JS:
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.4.0/js/fuelux.min.js"></script>
JS:
$(document).ready(function(){
$('#myDatepicker').datepicker();
});
Also tried in a fiddle and thought it would be sufficient but it isn't working:
http://jsfiddle.net/z2rpos9g/
it looks like the markup is more important
check out this FIDDLE
also you should add
fuelux
class to the div which has datepicker.