Accordion/collapse not working as i want, here's my code:
Here's the view with the JS in script tags:
<div id="accordion" class="panel-group">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
Select Up To 3 Categories
</h4>
</div>
<div id="panelBodyOne" class="panel-collapse collapse">
<div class="panel-body">
<%= form.collection_check_boxes :category_id, Category.all, :id, :name, :prompt => "Select a Category" %>
</div>
</div>
</div>
</div>
<script>
$(document).on('click', function() {
$('.collapse').collapse('hide');
})
</script>
Above that I have in the head:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
</head>
The way it's currently working is, load page, accordion/collapse is closed, click to open. To close, you need to click away from it on the page for it to close.
I want it to click open and close only when i click the accordion/collpase itself. How do i set this up?
I looked around and found this: https://codepen.io/delonnkoh/pen/LRWgPP
Which is essentially how i would like it to work.
I have tried all the results on stackoverflow and none seem to work. The current code above is the closest i have come to successfully doing this but it closes only on an "off-click" and not when i click the accordion itself.
I've tried removing the links within the header since they're in my application, but same thing (so they're not needed).
I'm assuming my JS needs some help. Anyone have the solution for this?
If you are using jQuery, you may use something like this;
$('.collapse').on('click', function() { //Add click handler on the parent div
$('.panel-body').toggle('hide'); //Make the child hide or show when parent is clicked.
});
Related
I need to be able to choose when the jquery dialog opens up but nothing i seem to do works.
so far ive tried this
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="main" class="ui-content">
Open Dialog Popup
Test
<div data-role="popup" id="myPopupDialog">
<div data-role="header">
<h1>But wait theres more!</h1>
</div>
<div data-role="main" class="ui-content">
<h2 style="text-align: center;">Would you like an exclusive offer?</h2>
Sounds Good!
No Thanks, Take me back..
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</div>
<script>
$(document).ready(function(){
console.log(document.body.scrollTop);
if(document.body.scrollTop === 0)
{
$.mobile.changePage('#myPopupDialog', 'pop', true, true);
}
});
</script>
</body>
</html>
which works but when i change the if statement in the javascript it breaks also if i remove the anchor tag at the top it just doesnt show... jQuery mobile has me confused.
So anyway my question is how do manually make a dialog box show on the page, i would prefer it to show on the same page and not another page.
use this:
$("#myPopupDialog").addClass("ui-page-active ui-page ui-page-theme-a")
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.
So, the the data-dismiss="modal" is not working for buttons that are added in my HTML, but is working for buttons that are added to the modal via JS inserting the button HTML. This makes me figure that there's something wrong with where/what order I am adding my scripting tags.
My scripting tags are in this order:
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/Shared/site.js"></script>
I tried putting them in the <head>. I moved them to be the last thing right before </body>. I moved them to be right before and right after the modal html.
UPDATE
Here's a simplified version of my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site-bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div id="Popup" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div id="PopupHeader">
<button type="button" id="PopupX" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 id="PopupTitle" class="modal-title floatLeft"></h4>
<div class="clear"></div>
</div>
<div class="modal-body bgColorWhite">
<div id="PopupContent">Test</div>
</div>
<div id="PopupButtons" class="modal-footer bgColorWhite">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/Shared/site.js"></script>
</body>
</html>
Another note:
If I add the "Close" button, aka the X, via JS, it works as well. It's having it already in the modal that causes issues.
Any suggestions?
I was able to figure out my issue. It was that in my own JS file, I wanted to add into every button click event, event.stopPropagation(); Since this was a method, and I did not want this added multiple times to the same button every time it was called, I would remove the previous click events, which was removing Bootstrap's dismiss click event.
So, if you have this same issue and you have all of Bootstrap's JS added correctly, check your own code to make sure you're not overwriting/removing events.
UPDATE
Just to clarify, event.stopPropagation() prevents data-dismiss from working.
if you put into your code (in some cases it makes sense):
$modal.off('click')
then it also results that the modal won't be closed because the event is blocked.
In that case you have to handle it yourself:
$modal
.on('click', '[data-dismiss="modal"]', function() {
$modal.modal('hide');
});
I have a script which should append some element to the Content div, but it didn't work.
As you see the content of the "messageBox" is arrives from a php file which select the mysql table and the data from it.
Here is the JS file's content:
function getWallMsg(){
$.getJSON('SELECT_uzenofal.php?callback=?',function(data) {
data.forEach(function(e){
$('#posts').append($('<div class="messageBox">'+'<img src="img/profilok/'+e.kep+'"/>'+'<p class="name">'+e.nev+'</p>'+'<p>'+e.uzenet+'</p>'+'<p class="time">'+e.ido+'</p>'+'</div>'));
});
});
}
$(document).ready(function(){
drawNavbar();
getWallMsg();
});
And the html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="fal">
<!-- header -->
<div data-role="header">
<h3>
Üzenőfal
</h3>
</div>
<!-- content -->
<div data-role="content" id="posts">
</div>
<!-- footer -->
<div class="nav" data-role="footer" data-position="fixed" data-theme="a"></div>
</div>
</body>
What should I do?
This should be changed:
$(document).ready(function(){
drawNavbar();
getWallMsg();
});
to this:
$(document).on('pagebeforeshow', '#fal', function(){
drawNavbar();
getWallMsg();
});
Basically document ready should not be used with jQuery Mobile, to find out more about this take a look at this ARTICLE, to be transparent it is my personal blog. Or find it HERE.
Basically you are trying to append it on document ready when page content is not loaded into the DOM. Instead proper jQuery Mobile page event, like pagebeforeshow, should be used.
EDIT :
You were adding an incorrect id to the pagebeforeshow even. It should work now.
could not comment so posting as answer.
$('#posts').append($('<div class="messageBox">'+'<img src="img/profilok/'+e.kep+'"/>'+'<p class="name">'+e.nev+'</p>'+'<p>'+e.uzenet+'</p>'+'<p class="time">'+e.ido+'</p>'+'</div>'));
have you tried changing above to
$('#posts').append('<div class="messageBox">'+'<img src="img/profilok/'+e.kep+'"/>'+'<p class="name">'+e.nev+'</p>'+'<p>'+e.uzenet+'</p>'+'<p class="time">'+e.ido+'</p>'+'</div>');
I'm trying to 'add a link' functionality to my site. For that I'm using Modal plugin from Twitter Boostrap JS. On the main page there's only the 'link' field to fill, when a user clicks 'add link' button, a modal pops up, and the user sees the complete form to fill: link, title, tags. However, I want the link field to be pre-filled with the value from the previous step. It's similar to what happens when you 'save a link' on delicious.com.
However, the problem is that when I insert a javascript inside the modal dialog, the modal dialog stops working. Any ideas how to get around this problem? Thank you very much!
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- The Modal Dialog -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-body">
<form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>
Peter
<script type="text/javascript">
var linkURL = $('#linkURL').val();
//document.write("<input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>");
document.write(linkURL);
</script>
<button type='submit' class='btn'>Add Link</button>
</form>
</div>
</div>
</div>
<div class="container">
<div class="wall-post">
<textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
<button data-controls-modal="modal-from-dom" data-backdrop="static" class="btn">Add Link</button>
</div>
</div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap-modal.js"></script>
</body>
There's a couple of little things preventing your script from working Arman.
The first is you need to load your jquery and bootstrap scripts in the header. The browser interprets the page as it loads, and when the browser hits the bit that says $("#linkURL") it doesn't know what to do with it.
The second bit is you can only know the content that the user has entered into the LinkURL box, when they click the "Add Link" button. Therefore, you can only really populate the modal box after that.
Given this, you can leverage the Events that the model library presents to populate this for you.
If you put this all together, you get this :
<html>
<head>
<title>Example</title>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/bootstrap-modal.js" type="text/javascript"></script>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<script type="text/javascript">
$(document).ready(function(){
$('#modal-from-dom').bind('show',function(){
$(".modal-body").html($("#linkURL").val());
});
});
</script>
</head>
<body>
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
×
<h3>Add Link</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Add Link
</div>
</div>
<textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Add Link</button>
</body>
</html>
Then you just need to modify the content a bit, and you should be right to go!