I want to be able to use the same jqueryui to every single tab. Right now, the code only works in one of the tabs... but not on the rest. Any ideas on how I could accomplish this?
This is the jquery I want to apply to the html:
$(document).ready(function(e) {
// create button and add functionality
$('#add-todo').button({
icons: {
}
}).click(function() {
$('#new-todo').dialog('open');
}); // end click
// build dialog box and add functionality
$('#new-todo').dialog({
modal: true,
autoOpen: false,
buttons : {
"Add task" : function() {
var taskName = $('#task').val();
if (taskName === '') {
return false;
}
var taskHTML = '<li><span class="done"> ✅</span>';
taskHTML += '<span class="delete"> ✄</span>';
taskHTML += '<span class="task"></span></li>';
// convert HTML string to jQuery Object
var $newTask = $(taskHTML);
// add taskname, but make sure HTML is escaped
$newTask.find('.task').text(taskName);
//hide new task
$newTask.hide();
// append to To Do list
$('#todo-list').prepend($newTask);
// show with effect and highlight
$newTask.show('clip',250).effect('highlight',1000);
$(this).dialog('close');
},
"Cancel" : function() {
$(this).dialog('close');
}
},
close: function() {
$('#new-todo input').val(''); /*clear fields*/
}
}); // end dialog
// mark as complete
$('#todo-list').on('click','.done', function() {
var $taskItem = $(this).parent('li');
$taskItem.slideUp(250, function() {
var $this = $(this);
$this.detach();
$('#completed-list').prepend($this);
$this.slideDown();
});
}); // end on
//make both lists sortable
$('.sortlist').sortable({
connectWith : '.sortlist',
cursor : 'pointer',
placeholder : 'ui-state-highlight',
cancel : '.delete,.done'
}); // end sortable
// delete a list item
$('.sortlist').on('click','.delete',function() {
$(this).parent('li').effect('puff', function() {
$(this).remove();
}); // end effect
}); // end on
}); // end ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="tabs">
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ul>
<div id="tabs-1">
<div class="container">
<div id="to-do">
<h1>Goals</h1>
<button id="add-todo">Click here to add a goal</button>
<!-- Datepicker -->
<h2 class="header">When do you want to do this?</h2>
<div id="datepicker"></div>
<form id="formscelta" action="Cal.html" method="post">
<input type="hidden" name="datascelta" id="datascelta">
</form>
</div>
<h2>These are the things I said I'd like to accomplish today:</h2>
<ul id="todo-list" class="sortlist">
<li><span class="done">✅</span>
<span class="delete">✄</span>
<span class="task"></span></li>
</ul>
</div>
<div id="completed">
<h2>These are the things I've already completed:</h2>
<ul id="completed-list" class="sortlist">
</ul>
</div>
<div id="new-todo" title="Add to-do item">
<p>
<label for="task">Goal:</label>
<input type="text" name="task" id="task">
</p>
</div>
</div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
</div>
The simplest, most common and reliable way to reuse a template as of now is to use a <script> tag with type="text/template".
Or if browser support is not an issue you can use template tag or template literals.
It's also possible to have the template as an .html file and load it via AJAX (jQuery load(), RequireJS text plugin , AngularJS $templateRequest etc supports this) which is a bit more complex.
$(document).ready(function(e) {
$('.tab-content').append($('#tabsTemplate').html());
$('#tabs').tabs();
}); // end ready
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/template" id="tabsTemplate">
<div class="container">
<div id="to-do">
<h1>Goals</h1>
<button id="add-todo">Click here to add a goal</button>
<!-- Datepicker -->
<h2 class="header">When do you want to do this?</h2>
<div id="datepicker"></div>
<form id="formscelta" action="Cal.html" method="post">
<input type="hidden" name="datascelta" id="datascelta">
</form>
</div>
<h2>These are the things I said I'd like to accomplish today:</h2>
<ul id="todo-list" class="sortlist">
<li><span class="done">✅</span>
<span class="delete">✄</span>
<span class="task"></span>
</li>
</ul>
</div>
<div id="completed">
<h2>These are the things I've already completed:</h2>
<ul id="completed-list" class="sortlist">
</ul>
</div>
<div id="new-todo" title="Add to-do item">
<p>
<label for="task">Goal:</label>
<input type="text" name="task" id="task">
</p>
</div>
</script>
<div id="tabs">
<ul>
<li>Monday
</li>
<li>Tuesday
</li>
<li>Wednesday
</li>
</ul>
<div id="tabs-1" class="tab-content"></div>
<div id="tabs-2" class="tab-content"></div>
<div id="tabs-3" class="tab-content"></div>
</div>
like Nielsvh mentioned in his answer, you should make sure there are no id's or unique ids are generated when reusing a template
If you want to replicate the content into the other tabs, your going to have to think about how your data is structured and what needs to be replicated. I personally would create the object in javascript and then append it to the tabs. You will need to be especially careful of any IDs and make sure they are unique (something I haven't done in the following snippet).
Something like:
$(function(){
var mydiv = $("<div class=\"container\">"+
"<div id=\"to-do\">"+
"<h1>Goals</h1>"+
"<button id=\"add-todo\">Click here to add a goal</button>"+
"<h2 class=\"header\">When do you want to do this?</h2>"+
"<div id=\"datepicker\"></div>"+
"<form id=\"formscelta\" action=\"Cal.html\" method=\"post\">"+
"<input type=\"hidden\" name=\"datascelta\" id=\"datascelta\">"+
"</form>"+
"</div>"+
"<h2>These are the things I said I'd like to accomplish today:</h2>"+
"<ul id=\"todo-list\" class=\"sortlist\">"+
"<li><span class=\"done\">✅</span>"+
"<span class=\"delete\">✄</span>"+
"<span class=\"task\"></span></li>"+
"</ul>"+
"</div>"+
"<div id=\"completed\">"+
"<h2>These are the things I've already completed:</h2>"+
"<ul id=\"completed-list\" class=\"sortlist\">"+
"</ul>"+
"</div>"+
"<div id=\"new-todo\" title=\"Add to-do item\">"+
"<p>"+
"<label for=\"task\">Goal:</label>"+
"<input type=\"text\" name=\"task\" id=\"task\">"+
"</p>"+
"</div>");
for(var i = 1;i <= 3;i++) {
$("#tabs ul").append($("<li/>").append($("<a/>").attr("href","#tabs-"+i).html("tab"+i)));
$("#tabs").append(mydiv.clone().attr("id","tabs-" + i));
}
$("#tabs").tabs();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="tabs">
<ul></ul>
</div>
Related
Hello Guys I have a form en Materialize and I use collapsible component to display it. For each category, I need to display in the accordion (the header of each seccion) two tooltips, the first to show the name of the category and the second to show the text "Active" of an option selected from the form.
I have the next code:
function obtain() {
var selectCloud_and_or = $("#And_OrCloud").find("option:selected").text();
$("#cloud_AndOr").text(selectCloud_and_or);
}
$('select').change(obtain);
obtain();
.collapsible {
margin-left: 80px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.collapsible').collapsible();
});
</script>
<!-- select option -->
<script type="text/javascript">
$(document).ready(function() {
$('select').material_select();
});
$('select').material_select('destroy');
</script>
<!-- Tooltip -->
<script type="text/javascript">
$(document).ready(function() {
$('.tooltipped').tooltip({
delay: 50
});
});
</script>
<ul class="collapsible" data-collapsible="accordion">
<li>
<a class=" tooltipped" data-position="left" data-delay="50" data-tooltip="First">
<div class="collapsible-header"><i class="wi wi-cloudy"></i></i><span id="cloud_AndOr"></span><span class="clouds"></span></a>
</div>
<div class="collapsible-body">
<div class="row">
<div class="col s12 offset-s4">
<select class="and-or" id="And_OrCloud" name="a_o[]">
<option value="4" selected="selected">And</option>
<option value="5">Or</option>
</select>
</div>
</div>
</div>
</li>
I just want to have two tooltip element, one appears when the user put the mouse throught accordion(the header), in any part of the accordion, and the second needs to appears when the user put the mouse on the option "and/or" that is placed in the accordion (the header). Any idea of how to do that? Right now I just have only one tooltip, but I need two. How can I add the second?
You need to just add the class "tooltipped" and data-tooltip="Message" to your collapsible-header.
What it does?
It basically treats your collapsible-header as a another container which needs to be tooltiped and you can add the desired message in the data-tooltip.
function obtain() {
var selectCloud_and_or = $("#And_OrCloud").find("option:selected").text();
$("#cloud_AndOr").text(selectCloud_and_or);
}
$('select').change(obtain);
obtain();
.collapsible {
margin-left: 80px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.collapsible').collapsible();
});
</script>
<!-- select option -->
<script type="text/javascript">
$(document).ready(function() {
$('select').material_select();
});
$('select').material_select('destroy');
</script>
<!-- Tooltip -->
<script type="text/javascript">
$(document).ready(function() {
$('.tooltipped').tooltip({
delay: 50
});
});
</script>
<ul class="collapsible" data-collapsible="accordion" >
<li>
<a class=" tooltipped" data-position="left" data-delay="50" data-tooltip="First">
<div class="collapsible-header tooltipped" data-tooltip="Another tooltip"><i class="wi wi-cloudy"></i></i><span id="cloud_AndOr"></span><span class="clouds"></span></a>
</div>
<div class="collapsible-body">
<div class="row">
<div class="col s12 offset-s4">
<select class="and-or" id="And_OrCloud" name="a_o[]">
<option value="4" selected="selected">And</option>
<option value="5">Or</option>
</select>
</div>
</div>
</div>
</li>
Is it possible to refresh a div on a click of a button and not auto refresh?
Once I've printed #print-container I would like to refresh #print-container to its original state without refreshing the whole page.
<body onLoad="renderTime();">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4" id="printarea" >
<div id="print-container">
<div class="item"></div>
<div class="total"></div>
</div>
</div>
<div class="col-xs-8">
<ul class="final">
<li class="remove"><input type="submit" value="Remove Last" class="print-btn remove-item"></li>
<li class="remove"><input type="submit" value="Refresh" class="print-btn" data-corners="false" id="submit" onclick="refresh()"></li>
</ul>
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="content">
<ul class="sub-menu">
<li><button class="menu item1">Item 1</button></li>
<li><button class="menu item2">Item 2</button></li>
</ul>
</div>
<!--END BEER-->
</div><!--end box-->
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(".menu a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).fadeIn(5);
});
</script>
<script type="text/javascript">
//add item
$('.item1').click(function(){
$('<div class="delete">Item 1 - <span class="skill"> 840</span></div><br />').appendTo('.item');
counter();
});
$('.item2').click(function(){
$('<div class="delete">Item 2 - <span class="skill"> 910</span></div><br />').appendTo('.item');
counter();
});
</script>
<script type="text/javascript">
var counter = function() {
var total = 0;
$(".skill").each(function() {
total += + parseInt($(this).text() , 10);
});
$('.total').text('Total: \u0E3F' + total);
};
</script>
<script type="text/javascript">
function refresh() {
setTimeout(function () {
location.reload()
}, 100);
}
</script>
</body>
If your div is loaded from an external source (doesn't matter if it's on the same server or not) you can use the jQuery function load() to "refresh" the div.
For example - if your div loads some content from the file content.html, then you can use jQuery to reload the div's content:
$("#button-id").click(function() {
$("#div-id").load("content.html");
});
It's as simple as that!
Here's a simple plugin that caches div content inside it's own attribute, and reverts back on event
(function($, window){
var nodes = $('[reload]'); // all <div reload=""/> elems
var serializer = new XMLSerializer(); // serializer
nodes.each(function(){ // iterate over all elems
var domStr = serializer.serializeToString($(this)[0]); //serialize html to str
$(this).attr('cache', domStr.replace(/\n/g, '')); // remove new-line
$(this).click(function(){ // event
$(this).html($(this).attr('cache')); // restore content of div
});
});
// demoPurpose: modify div, add attribute(style), change text
$('#style').click(function(){
$(nodes[0]).children().first().css('color', randomColor());
$(nodes[0]).children().last().css('color', randomColor());
$(nodes[1]).children().first().css('color', randomColor());
$(nodes[1]).children().last().css('color', randomColor());
$(nodes[1]).children().last().text(Date.now());
});
// demoPurpose: simple random colorizer
function randomColor(){
var colors = ['red', 'blue', 'green', 'yellow', 'black', 'pink'];
return colors[Math.floor(Math.random() * colors.length)];
}
})(jQuery, window);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div reload="">
<h1>h1</h1>
<p>p</p>
</div>
<hr />
<div reload="">
<h1>another h1</h1>
<p>with dummy p</p>
</div>
<hr />
<p><button id="style">style</button><small>Click on button to change div</small></p>
<p><small>Click on div to reload it's content</small></p>
Although it might seem quite heavy, this should help you to understand the idea behind
I am building a form, where user can ADD or REMOVE rows dynamically. I have built jQuery Functions to accomplish this however I am losing some elements in the process and I can't figure out why.
HTML Snippet
<div class="options" id="options">
<div class="item1" id="item1">
<div class="left_wrap">
<ul>
<li class="col_id b-bottom"></li>
<li class="hazard_header"><h3>Hazard</h3></li>
<li class="hazard_input b-bottom"></li>
<li class="con_header b-bottom"><h3>Controls</h3></li>
<li class="cat_header"><h3>Consequence Category</h3></li>
<li class="cat_options"></li>
</ul>
</div>
<div class="right_wrap">
</div>
<div class="controls">
<div class="addRow" onclick="addRow()"><i class="fa fa-plus"></i>Add Row</div>
<div class="deleteRow" onclick="deleteRow('#item1')"><i class="fa fa-times"></i> Delete Row</div>
</div>
</div><!-- End Item -->
</div> <!-- End Options Wrap -->
jQuery
var count = 1;
var wrap;
var item;
function addRow(){
count++;
var $newElement = $(item);
$newElement.find("li.col_id").text(count);
// Doesn't work
$newElement.find(".item1").removeClass("item1").addClass("item"+count);
// Remove ID item1 make it (item+count)
// Change deleteRow('#item1') to deleteRow('#item2')
$($newElement).appendTo(".options");
};
$(document).ready(function(){
wrap = $(".options").html();
item = wrap;
id = $("div.item1");
id.find("li.col_id").text("1");
});
I have commented out parts inside the addRow that I am having problems with. Wired thing is when I display my (item) inside .ready it shows me wrap () however when I do it inside addRow it doesn't show it anymore.
I have been stuck on this for few hours and have tried few different ways to do this however I keep coming up short.
When I click Add Row it does work however I can never change the class and id for the wrap.
I have updated your Code.
$newElement is already the main DIV that you want to update with new ID and Class.
var count = 1;
var wrap;
var item;
function addRow(){
count++;
var $newElement = $(item);
$newElement.find("li.col_id").text(count);
// Remove previous class and Add new Class
$newElement.attr('class','').addClass("item"+count);
// Update the ID
$newElement.attr('id',"item"+count);
// Update the onlick event with new Item ID
$newElement.find('.deleteRow').attr('onclick','deleteRow("#'+"item"+count+'")');
// Remove ID item1 make it (item+count)
// Change deleteRow('#item1') to deleteRow('#item2')
$($newElement).appendTo(".options");
};
$(document).ready(function(){
wrap = $(".options").html();
item = wrap;
id = $("div.item1");
id.find("li.col_id").text("1");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="options" id="options">
<div class="item1" id="item1">
<div class="left_wrap">
<ul>
<li class="col_id b-bottom"></li>
<li class="hazard_header"><h3>Hazard</h3></li>
<li class="hazard_input b-bottom"></li>
<li class="con_header b-bottom"><h3>Controls</h3></li>
<li class="cat_header"><h3>Consequence Category</h3></li>
<li class="cat_options"></li>
</ul>
</div>
<div class="right_wrap">
</div>
<div class="controls">
<div class="addRow" onclick="addRow()"><i class="fa fa-plus"></i>Add Row</div>
<div class="deleteRow" onclick="deleteRow('#item1')"><i class="fa fa-times"></i> Delete Row</div>
</div>
</div><!-- End Item -->
</div> <!-- End Options Wrap -->
Basically, I have some buttons
<div class="button">
<!--Some other stuff-->
<div class="id">HD5sjW</div>
</div>
<div class="button">
<!--Some other stuff-->
<div class="id">yqWH3X</div>
</div>
<div class="button">
<!--Some other stuff-->
<div class="id">KWZy5V</div>
</div>
and I wanted to use JavaScript to link to another page and I couldn't find an explanation so this is what I came up with and obviously doesn't work at all - how am I meant to do this?
$('.button').click(function () {
confirm("http://domain.com/thing?id=" + $(this + " .id").text());
});
The confirm is just for a blatant output
As another thing, how should I structure my questions better and type of title?
You can use .find() or a context parameter in the jQuery function.
$('.button').hover(function () {
confirm("http://domain.com/thing?id=" + $(".id", this).text());
});
$('.button').hover(function () {
confirm("http://domain.com/thing?id=" + $(this).find('.id').text());
});
Here's a solution using .click() using .hover() will cause the confirm box to trigger multiple times.
$('.button').click(function () {
//find out which buttton this is
var currentBtn = $('.button').index( $(this) );
//use currentBtn to find its matching id div using `:eq()`
var currentId = $('.id:eq('+currentBtn+')').text();
confirm("http://domain.com/thing?id=" + currentId)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="button">
<!--Some other stuff-->
<div class="id">HD5sjW</div>
</div>
<br>
<div class="button">
<!--Some other stuff-->
<div class="id">yqWH3X</div>
</div>
<br>
<div class="button">
<!--Some other stuff-->
<div class="id">KWZy5V</div>
</div>
I have responsive Html website
I want to hide and show on click of next in simple html
DEMO PAGE
Q1.WHAT IS YOUR NAME
ANS - JAMES
Q2.WHAT IS YOUR ADDRESS
ANS- PUNE
here Q1 and Q2 are on the same page but
I want to show only one question at a one time but do not want to create multiple physical pages.
I tried using hide and show trick of css but I want to do it on simple html button click NEXT
want output like following
Q1.WHAT IS YOUR NAME
ANS- JAMES
[CLICK NEXT]
it will load Q2 on same page.
I tried not using one page with different pages like below.
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<nav>
<ul class="group">
<li>Q1</li>
<li>Q2</li>
</ul>
</nav>
<section id="main-content">
<div id="guts">
Q1.WHAT IS YOUR NAME
ANS - JAMES
</div>
</section>
Using just Javascript you can do this fairly easily. Something like this should work:
HTML
<label id="name">What is your name?<input type="text" /></label>
</br>
<label id="address">What is your address?<input type="text" /></label>
</br>
<button id="next">Next</button>
CSS
#address {
display: none;
}
Javascript
document.getElementById('next').onclick=function(){
document.getElementById('address').style.display='block';
};
Here is a fiddle: http://jsfiddle.net/YJRbE/
Or, if you'd prefer to use jQuery, something like this:
$('#next').on('click', function() {
$('#address').show();
});
Here is a fiddle for the jQuery version: http://jsfiddle.net/XyNXq/
Here some example with jQuery which supports more than two questions:
Try to wrap all your questions in a div and use jquery for the click event so each time you click the button a next question will appear.
In this method you should include all your questions inside the wrapper div and set their display to none.
http://jsfiddle.net/ZFZfY/1/
Edit: http://jsfiddle.net/ZFZfY/3/
HTML:
<div class="questionWrapper">
<div class="question show" id="questionOne">
<label>foo bar?</label>
<input type="text">
</div>
<div class="question" id="questionTwo" style="display: block;">
<label>foo bar?</label>
<input type="text">
</div>
</div>
<a class="NextQuestion" href="#">Next Question</a>
CSS:
.question{ display: none;}
.show{ display: block;}
jQuery:
$('.NextQuestion').click(function(e){
e.preventDefault();
loadNext();
});
$('.PrevQuestion').click(function(e){
e.preventDefault();
loadPrev();
});
function loadNext(){
// loop to verify what is visible
$('.questionWrapper').children().each(function(i){
if($(this).css('display') === 'block' && $(this).next().length > 0){
$(this).css('display','none');
$(this).next().fadeIn();
return false;
}
});
}
function loadPrev(){
// loop to verify what is visible
$('.questionWrapper').children().each(function(i){
if($(this).css('display') === 'block' && $(this).prev().length > 0){
$(this).css('display','none');
$(this).prev().fadeIn();
return false;
}
});
}
here is script
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.content').each(function() {
var $this = $(this);
$this.find(':not(.col:first,.active)').hide();
$('.col').children().removeAttr('style');
});
$("#add").click(function() {
$(".col:hidden:first").show("slow");
$('.col').prev().hide();
});
});
</script>
here demo html
<div class="content">
<div class="col">
<h3>What Is Your Name</h3>
<input type="text">
</div>
<div class="col">
<h3>What Is Address</h3>
<input type="text">
</div>
<button id="add" class="active">Add</button>
</div>
Hope this helps.
You can change the visibility of elements on button click like this.
document.getElementById('name').style.display='none';
document.getElementById('address').style.display='block';
Here is the working demo