I'm attempting to perform a jQuery click function inside a dynamically loaded div. I've looked and implemented many of the tactics I've run across to no avail, the last being here.
The code that I'm running to load the div:
$(window).load(function(){
function showitusers() {
$("#creatorsettingsdiv").load('http://XX.XX.XX.XX/quizzes/js/creatorusersdiv.php');
}
$("#creatorsettingsusersbutton").click(function() {
var usersvar = showitusers();
});
});
This loads creatorusersdiv.php with an h2 element class userstabletitle, shown here:
<html><head>
<title>Quiz Time | Creator Settings</title>
<meta content="width=device-width" name="viewport">
<link rel="stylesheet" href="metro-icons.css">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Muli">
<link type="text/css" href="css/normalize.css" rel="stylesheet">
<link type="text/css" href="css/style.css" rel="stylesheet">
<link type="text/css" href="css/grid.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="header">
<div class="wrapper">
<ul class="nav">
<li class="leftbutton"><a class="entypo-home" href="home.php"></a></li>
<li class="leftbutton">Create</li>
<li class="leftbutton">Take</li>
<li class="leftbutton">Scores</li>
<div class="rightnavcontainer">
<li class="rightbutton"><a class="entypo-cog" href="creator_settings.php"></a></li>
</div>
</ul>
</div>
<div class="sessionwrapper">
<div class="loginwrap">Welcome </div><div class="loginname">Ben David </div> </div>
<div class="logout">logout</div>
</div>
<!-- <div id="content"> -->
<script src="http://XX.XX.XX.XX/quizzes/js/creatorprofiledivchange.js"></script>
<script src="http://XX.XX.XX.XX/quizzes/js/creatorusersdivchange.js"></script>
<div class="wrap">
<div class="primary">
<div id="sideprofile">
<ul class="leftnav">
<div>
<button id="creatorsettingsprofilebutton" class="menuButton">Profile</button>
</div>
<div>
<button id="creatorsettingsusersbutton" class="menuButton">Users
</button></div>
</ul>
</div>
</div>
<div id="creatorsettingsdiv" class="secondary">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://XX.XX.XX.XX/quizzes/js/sweetalert-master/dist/sweetalert.min.js"></script>
<script src="http://XX.XX.XX.XX/quizzes/js/deleteuserwarning.js"></script>
<link href="http://XX.XX.XX.XX/quizzes/js/sweetalert-master/dist/sweetalert.css" type="text/css" rel="stylesheet">
<h2 class="userstabletitle">List of Users</h2>
<table class="userstable">
<tbody><tr class="usersheader">
<td class="tdheader">Real Name</td>
<td class="tdheader">Username</td>
<td class="tdheader">Password</td>
<td class="tdheader">Department</td>
<td class="tdheader">Role</td>
<td class="tdheader">Color</td>
<td class="tdblank"> </td>
<td class="tdblank"> </td>
</tr>
<tr class="usersbody"><td>BD</td><td>BD</td><td>notit</td><td>Pricing</td><td>creator</td><td>00FF99</td><td class="plusbuttoncell"><li><a class="entypo-plus-circled plusbutton" href="home.php"></a></li></td><td class="editbuttoncell"><li><a class="entypo-pencil pencilbutton" href="home.php"></a></li></td><td class="minusbuttoncell"><li><a id="minusbutton" class="entypo-cancel-circled button" href="#"></a></li></td></tr><tr class="usersbody"><td>Julie</td><td>julieh</td><td>notit</td><td>Pricing</td><td>admin</td><td>4B088A</td><td class="plusbuttoncell"><li><a class="entypo-plus-circled plusbutton" href="home.php"></a></li></td><td class="editbuttoncell"><li><a class="entypo-pencil pencilbutton" href="home.php"></a></li></td><td class="minusbuttoncell"><li><a id="minusbutton" class="entypo-cancel-circled button" href="#"></a></li></td></tr></tbody></table></div>
</div>
</body></html>
I'm then attempting to display a message when .userstabletitle is clicked with the following:
$(window).load(function(){
function showitusers() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
}
$('body').on('click', 'h2.userstabletitle', function() {
var usersvar = showitusers();
});
});
This is according to the answer referenced above, yet it is not working at all. Is there something incorrect in how I'm attempting to implement this?
Try this code
$(window).load(function () {
function showitusers() {
var $element = $("#creatorsettingsdiv");
$element.load('http://XX.XX.XX.XX/quizzes/js/creatorusersdiv.php', function () {
//this code will run after PHP text loaded
$("h2.userstabletitle", $element).on("click", function () {
// your code on click event
})
});
}
$("#creatorsettingsusersbutton").click(function () {
var usersvar = showitusers();
});
});
Put this code
$("#creatorsettingsusersbutton").click(function() {
var usersvar = showitusers();
});
after the $(window).load method
Related
I have a pop up I am making thats intended function is to open with interactive calendar Which allows the User to input a Start date and End date using jquery datepicker. However currently on page load, I have to open and close the pop up twice before it functions as intended I am wondering why this is happening / how to fix it ? Here is the code
webpage in question
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title> {(BnB)} Market </title>
</head>
<div id= 'user_listings'>
</div>
<body>
Market BnB
</body>
<a href = '/make_listings' > Looking to show your own listing? </a>
<div id = 'table'>
<table>
<tr>
<h1> BnB-able properties </h1>
</tr>
<% #BnB.each do |record| %>
<tr>
<td class ='new_BnB'><%= record['address'] %> </td>
<td class ='code_BnB'> | <%= record['post_code']%> </td>
<br>
<a id="OpenDialog" href="#"> <img src = <%= record['photo'] %> width="300" height="200" alt='test' >
</a>
<div id="dialog" title="Property Info" style="display: none;" >
<p>
<p>Start date: <input type="text" id="datepicker"> End date: <input type="text" id="datepicker2"></p>
<input type = "submit" value='Submit'>
</p>
</div>
</tr>
</table>
<% end %>
<head>
<head>
<title></title>
</head>
<body>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</body>
<%# <title>jQuery UI Datepicker - Default functionality</title> %>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<script src="interface.js"></script>
</div>
interface.js
$(document).ready(function() {
$("#OpenDialog").click(function () {
$("#dialog").dialog({modal: true, height: 500, width: 700 });
});
});
$( function() {
$( "#datepicker" ).datepicker();
} );
$( function() {
$( "#datepicker2" ).datepicker();
} );
** what the #BnB value is **
require 'pg'
class BnBControl
attr_accessor :connection
def self.all
#connection = PG.connect(dbname: 'bnb')
listings = #connection.exec("SELECT * FROM properties")
end
------
class BnB < Sinatra::Base
enable :sessions
get '/' do
#if session[:user]
#BnB = BnBControl.all
erb :index_logged_in
# else
# erb :index
# end
end
these are seperate files just included in same code fence
you using document.ready as well as $(function() which are same and need not to be used multiple time. also, call datepicker function inside $(document).ready before popup click event handler, which should work for you.
Try below
$(document).ready(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker2" ).datepicker();
$("#OpenDialog").click(function () {
$("#dialog").dialog({modal: true, height: 500, width: 700 });
});
});
I have a jquery issue I have two divs showing and hiding and both are set to refresh but one is over riding the other. I am not sure why the load1 were div1 is at keeps overriding the load2 div2. so when i click on button completed the received div is automatically refreshing and changing the page back to received. I will try to get this on fiddle.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://localhost/test/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom_edit.css" rel="stylesheet">
<link href="http://localhost/test/assets/datatables/css/dataTables.bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<pre><button class="btn btn-sm btn-primary" id="received">Received</button><button class="btn btn-sm btn-success" id="completed">Completed</button></pre>
<div id="load1">
<div id="div1">
<h3>Received Section</h3>
//code goes here......
</div>
</div>
<div id="load2">
<input type="hidden" id="show_completed" value="1" name="show_completed">
<div id="div2">
<h3>Completed Section</h3>
//code goes here......
</div>
</div>
<footer>
<script src="http://localhost/test/assets/jquery/jquery-3.1.0.min.js"></script>
<script src="http://localhost/test/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/jquery.dataTables.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
var $show_completed = document.getElementById('show_completed');
if($show_completed.value == '0')
{
setInterval(function() {
$("#load1").load(location.href+" #load1>*","");
}, 10000); // seconds to wait, miliseconds
}
else($show_completed.value == '1')
{
setInterval(function() {
$("#load2").load(location.href+" #load2>*","");
}, 100000); // seconds to wait, miliseconds
}
</script>
<script type="text/javascript">
$(document).ready( function () {
$('#div2').fadeOut();
} );
$("#received").on('click', function() {
document.getElementById("show_completed").value='0';
$("#div1").fadeIn();
$("#div2").fadeOut();
});
$("#completed").on('click', function() {
document.getElementById("show_completed").value='1';
$("#div2").fadeIn();
$("#div1").fadeOut();
});
</script>
</footer>
</body>
</html>
Try this... Hope it helps
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://localhost/test/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom_edit.css" rel="stylesheet">
<link href="http://localhost/test/assets/datatables/css/dataTables.bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://localhost/test/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/jquery.dataTables.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/dataTables.bootstrap.js"></script>
</head>
<body>
<pre>
<button class="btn btn-sm btn-primary" id="received">Received</button>
<button class="btn btn-sm btn-success" id="completed">Completed</button>
</pre>
<div id="load1">
<div id="div1">
<h3>Received Section</h3>
//code goes here......
</div>
</div>
<div id="load2">
<input type="hidden" id="show_completed" value="1" name="show_completed">
<div id="div2">
<h3>Completed Section</h3>
//code goes here......
</div>
</div>
<script type="text/javascript">
var $show_completed = document.getElementById('show_completed');
if($show_completed.value == '0'){
setInterval(function() {
$("#load1").load(location.href+" #load1>*","");
}, 10000); // seconds to wait, miliseconds
} else($show_completed.value == '1'){
setInterval(function() {
$("#load2").load(location.href+" #load2>*","");
}, 100000); // seconds to wait, miliseconds
}
</script>
<script type="text/javascript">
$(document).ready( function () {
$('#div2').fadeOut();
});
$("#received").on('click', function() {
document.getElementById("show_completed").value='0';
$("#div1").fadeIn();
$("#div2").fadeOut();
});
$("#completed").on('click', function() {
document.getElementById("show_completed").value='1';
$("#div2").fadeIn();
$("#div1").fadeOut();
});
</script>
</body>
</html>
I'm trying to animate a .col-md-3 to slide from the left side of the screen after pressing a button and make it come back (aka side menu).
First part of the animation works perfect, but -$lefty.outerWidht():0 drags all the content at its right too much.
Here's the code:
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
});
if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
Here's my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth():
0
});
/*if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}*/
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><img alt="Brand" src="img/brand.png" style="height: 7em;"></li>
<li class="menu-link">Главная</li>
<li class="menu-link">О Нас</li>
<li class="menu-link">Контакты</li>
<li class="menu-link">Мы предлагаем</li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link">Блог</li>
<li class="menu-link">Форум</li>
<div class="login-box">
<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
<div class="copyright"><li class="menu-link">©OrangeKampWeb</li></div>
</ul>
</center>
</div>
<div class="col-md-9">
<button type ="button" class = "button">
<div class = "glyphicon glyphicon-menu-hamburger">
</div>
</button>
<div class="slider">
<ul class="slides">
<li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
</ul>
</div>
<script type="text/javascript">
var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
$(window).on('keyup', function (key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider-arrow').on('click', function() {
console.log(glide.current());
});
</script>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false -->
Here's if's properties
if ($lefty.offset().left== 0) {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
Your should use offset().left instead of outerWidth(). If you move the div to the left, the div gets an offset - and you need to move the div back based on this offset.
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0
});
See the updated code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0});
/*if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}*/
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><img alt="Brand" src="img/brand.png" style="height: 7em;"></li>
<li class="menu-link">Главная</li>
<li class="menu-link">О Нас</li>
<li class="menu-link">Контакты</li>
<li class="menu-link">Мы предлагаем</li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link">Блог</li>
<li class="menu-link">Форум</li>
<div class="login-box">
<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
<div class="copyright"><li class="menu-link">©OrangeKampWeb</li></div>
</ul>
</center>
</div>
<div class="col-md-9">
<button type ="button" class = "button">
<div class = "glyphicon glyphicon-menu-hamburger">
</div>
</button>
<div class="slider">
<ul class="slides">
<li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
</ul>
</div>
<script type="text/javascript">
var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
$(window).on('keyup', function (key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider-arrow').on('click', function() {
console.log(glide.current());
});
</script>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false -->
Here is the fiddle: https://jsfiddle.net/aaqtw3do/
I want to make a webpage in which three different contents show/hide when a button is clicked. The code is shown below.
I want the same page to show three contents:
only a search bar when button 'search' is clicked,
only the result of the search after a search is done or when the button 'results' is clicked, and
only the visualization of the search when one specific outcome of the results is chosen, or when the button 'visualization' is clicked.
Right now I only know how to show the results in different pages, not in the same one hiding what I don't want.
Code is below.
Thanks
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="docs-assets/ico/favicon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link href="css/jumbotron-narrow.css" rel="stylesheet">
<link href="css/jquery.dataTables.css" rel="stylesheet">
<link rel="shortcut icon" type="image/ico" href="" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="js/libs/jquery-2.0.3.min.js"></script>
<script type="text/javascript" language="javascript" src="js/libs/jquery.sprintf.js"></script>
<script type="text/javascript" language="javascript" src="js/libs/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
//xmakeTable("treaty");
});
makeTable = function(query) {
var q = encodeURIComponent(query)
$('#example').dataTable({
"oLanguage": {"sSearch": "Filter results:"},
"bProcessing": true,
"bDestroy":true,
"sAjaxSource": $.sprintf('http://leela.sscnet.ucla.edu/voteview/searchdt?q=%s',q),
"aoColumns":[{"mData":"id", "sWidth": "20px", "sTitle":"ID"},
{"mData":"chamber", "sWidth": "10px", "sTitle":"Chamber"},
{"mData":"date", "sWidth": "85px", "sTitle":"Date"},
{"mData":"yea","sTitle":"Vote","sWidth":"80px"},
{"mData":"descriptionShort", "sWidth": "200px","sTitle":"Description"}],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(0)', nRow).html(
$.sprintf('%s',aData['id'],aData['id'])).attr("title","Click to explore this vote");
$('td:eq(3)', nRow).html(
$.sprintf('%s-%s',aData['yea'],aData['no']));
$('td:eq(4)', nRow).attr("title",aData['description'])
return nRow; }
});
}
searchvotes = function() {
$('#example').empty();
makeTable($('#qqtext').val());
};
</script>
</head>
<body>
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li>Home</li>
<li class="active">Search</li>
<li>Contact</li>
</ul>
<h3 class="text-muted">VoteView</h3>
</div>
<div class="jumbotron">
<div class="container">
<div>
<h3 align="center">Search for Roll Calls</h3>
<div class="col-sm-12">
<input type="search" class="form-control" placeholder="Search" id="qqtext" onchange="searchvotes()"></input>
</div>
</div>
<br>
<div>
<div class="table-responsive">
<table id="example" class="table table-striped"></table>
</div>
</div>
<div>
<div class="col-lg-14 col-md-14 portfolio-item" id="example">
</div>
</div>
</div>
</div>
<div align="center">
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-search"></span><br><font color="white">Search</font>
</button>
<button type="button" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-list"></span><br><font color="white">Results</font>
</button>
<button type="button" class="btn btn-warning btn-lg">
<span class="glyphicon glyphicon-eye-open"></span><br><font color="white">Visualize</font>
</button>
</div>
<br>
<hr>
<p></p>
<footer>
<p>Example</p>
</footer>
</div>
</body>
</html>
If one tries a search with this code, the code should show results, but not the way I expect.
Thanks
Probably not the solution but some hint to get there. Given this:
<ul>
<li class="collapsable"><h2>Release 3.0</h2>
<ul>
<li><h3>Allgemeine Übersicht</h3>
<p>Text ....
</li>
</ul>
</li>
....
</ul>
I do:
<script type="text/javascript">
jQuery(document).ready( function () {
jQuery('.collapsable').click(function () {
jQuery(this).children('ul').first().toggle("slow");
});
});
</script>
And
<style>
li.collapsable ul {
display: none;
}
</style>
A Click on the headline opens the <ul> and closes it again on next click (Actually, there is a lot of text in there and thus the list is very long)
Firstly add an Id to your buttons to make things a bit easier
<button id="btnSearch" type="button" class="btn btn-warning btn-lg" />
<button id="btnResult" type="button" class="btn btn-warning btn-lg" />
<button id="btnVisual" type="button" class="btn btn-warning btn-lg" />
then make sure that you have the three mark-up sections on the page wrapped inside it's own div with an Id on each div.
<div id="search">
...
</div>
<div id="result">
...
</div>
<div id="visual">
...
</div>
In your JavaScript, set-up page for the initial conditions and handle the clicks on the buttons as required. In your search and visualisation functions just show and hide the appropriate div(s) for the conditions your require using JQuery's show() and hide() functions.
It may go something like this - just tweaks this snippet as required, to suit your actual scenario.
function reset() {
$('#search').show();
$('#result').hide();
$('#visual').hide();
}
function init() {
var self = this;
// button clicks
$('#search').click(function () {
self.reset();
});
$('#results').click(function () {
self.search();
});
$('#visual').click(function () {
self.visualize();
});
}
function search() {
// Do search and set results table contents
$('#search').hide();
$('#result').show();
}
function visualize() {
// Do visualisation and set content
$('#result').hide();
$('#visual').show();
}
$(document).ready( function () {
this.reset();
this.init();
)};
You need to use toggle() It will hide element if its current status is visible and show if it is currently hidden:
$('.collapsable').click(function () {
$(this).children('ul').first().toggle();
});
I'm trying to implement Fuelux's wizard feature and have hit a brick wall. I am simply trying to achieve a working replica of the live example but keep receiving the error in my console:
Uncaught TypeError: Object [object Object] has no method 'wizard'
I am finding a lot of the documentation a little overwhelming and would appreciate some clarity on the subject in plain [or plainer] English.
My markup is:
<!DOCTYPE html>
<html class="no-js fuelux">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>E-Learning</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fuelux.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div id="my-wizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">
...
</div>
<div class="step-pane" id="step2">
...
</div>
<div class="step-pane" id="step3">
...
</div>
</div>
</div>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/require.js"></script>
<script src="js/wizard.js"></script>
<script>
$(document).ready(function(){
$('#my-wizard').on('change', function(e, data) {
console.log('change');
if(data.step===3 && data.direction==='next') {
// return e.preventDefault();
}
});
$('#my-wizard').on('changed', function(e, data) {
console.log('changed');
});
$('#my-wizard').on('finished', function(e, data) {
console.log('finished');
});
$('.btn-prev').on('click', function() {
console.log('prev');
$('#my-wizard').wizard('previous');
});
$('.btn-next').on('click', function() {
console.log('next');
$('#my-wizard').wizard('next','foo');
});
});
</script>
</body>
</html>
So close! For both the CSS and JS since Fuel UX includes Bootstrap you simply include Fuel UX in place of Boostrap and you get all of Bootstrap plus Fuel UX:
<link rel="stylesheet" href="https://fuelcdn.com/fuelux/2.3/css/fuelux.min.css">
<script src="https://fuelcdn.com/fuelux/2.3/loader.min.js"></script>
Your template looks great and with just the above modifications, plus removing a couple of lines that were causing double-processing, this works just as expected. See the full example here:
Gist: https://gist.github.com/adamalex/5412079
Live example: http://bl.ocks.org/adamalex/5412079