Refresh a div without a full page been refreshed? - javascript

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

Related

Click button, show div content, hide others - JS

I'm trying to create a list of buttons that when one is clicked it displays that DIV and hides the rest. There is also a default message that shows before any button is clicked.
I've created a codepen already and I think there is something wrong with my script, but I can't work out what I am doing wrong. Any help?
Here is the script I am trying:
<script>
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
</script>
Here is the Codepen.
Instead of doing it on div click .
Do it by button click:
Just simple code:
$(document).on('click', '.map-point-sm', function() {
var show = $(this).data('show');
$(show).removeClass("hide").siblings().addClass("hide");
});
You can check pan code here:
http://codepen.io/sagar_arora/pen/BRBopY
Change your code
var show = $("button:selected", this).data('show');
to
var show = $("button:focus", this).data('show');
TRY THIS
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:focus", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
.hide {
display: none;
}
.map-container {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
<div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail">
<button class="map-point" data-show=".darwin">
<div class="content">
<div class="centered-y">
<p>Darwin</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".ptown">
<div class="content">
<div class="centered-y">
<p>Ptown</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".philly">
<div class="content">
<div class="centered-y">
<p>Philly</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".dela">
<div class="content">
<div class="centered-y">
<p>Dela</p>
</div>
</div>
</button>
</div><!-- end inner basic -->
</div>
<div class="map-container">
<div class="inner-basic division-details">
<div class="initialmsg">
<p>Choose button above</p>
</div>
<div class="darwin hide">
<p>Darwin Content here</p>
</div>
<div class="ptown hide">
<p>Ptown Content here</p>
</div>
<div class="philly hide">
<p>Philly Content here</p>
</div>
<div class="dela hide">
<p>Dela Content here</p>
</div>
</div>
</div>

store articles in javascript variables

so i have 3 articles from a local newspaper i want user to click a button and the content of the page switch, i wrote my script the first time i click any of the buttons it will switch the content for me but when clicking any button after that i get no results
my src code is something like
<div id="banner">
<div id="nav">
<ul>
<li><button onclick="one()">one</button></li>
<li><button onclick="two()">two</button></li>
</ul>
</div>
<div id="thewholetext">
<p id="a">
//an article here
<p id="b">
// a 2nd article here
</div>
</div>
and the java script is like
function one () {
document.getElementById("thewholetext").innerHTML = a.innerHTML;
}
function two() {
document.getElementById("thewholetext").innerHTML = b.innerHTML;
}
the idea is i have the div called "the whole text" which contain the two articles each article with unique id so i can control and display only one of them when user clicks a its corresponding button
i hope its clear. thanks in advance
<html>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<style>
p{
display:none;
}
</style>
<script>
$(document).ready(function(){
$("button").on("click",function(e){
$("p").hide();
$("p#"+this.id).show();
});
});
</script>
<body>
<div id="nav">
<ul>
<li><button id="one">one </button> </li>
<li><button id="two">two </button> </li>
</ul>
</div>
<div id="thewholetext">
<p id="one">
//an article here
</p>
<p id="two">
// a 2nd article here
</p>
</div>
</div>
</body>
</html>
Try to declare your function like this
$("button").click(function(e) {
if (e.target.id == "one") {
$("#a").show();
$("#b").hide();
} else {
$("#a").hide();
$("#b").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul>
<li>
<button id="one">one </button>
</li>
<li>
<button id="two">two </button>
</li>
</ul>
</div>
<div id="thewholetext">
<p id="a" style="display:none;">
//an article here
</p>
<p id="b" style="display:none;">
// a 2nd article here
</p>
</div>
Hope it helps :)
// Cache buttons and articles
var buttons = document.querySelectorAll("[data-showid]"),
allArticles = document.querySelectorAll(".article");
function toggleArticle(event) {
event.preventDefault(); // Prevent document scrollTop
var id = this.dataset.showid,
article = document.getElementById( id );
[].forEach.call(allArticles, function( art ) {
art.style.display = art === article ? "block" : "none";
});
}
// Button clicks
[].forEach.call(buttons, function( btn ) {
btn.addEventListener("click", toggleArticle, false);
});
.hidden{display:none;}
[data-showid]{ color:red; cursor:pointer; }
<a data-showid="article1">One</a>
<a data-showid="article2">Two</a>
<p id="article1" class="article">This is article ONE</p>
<p id="article2" class="article hidden">This is article TWO</p>

Adding same jqueryui to multiple tabs

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>

refresh the whole page and load a div on clicking a link

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
$(window).load(function () {
var divs = $( #add_new, #details");
$("li a").click(function () {
$(divs).hide();
$("#" + $(this).attr("class")).show();
});
});
<ul>
<li><a class="add_new" href="javascript:void(0);" >Add new</a></li>
<li><a class="details" href="javascript:void(0);" >details</a></li></ul>
<div id="add_new">
<p>ADD NEW</P>
<input type="button" id="addsettings" value="Add Informations">
</DIV>
<div id="details">
<p>detailssss</p>
</div>
<script>
$(function () {
$("#addsettings").click(function () {
$.ajax({
url: "manage.php",
success: function (html) { // this happens after we get results
$(".result").empty();
$(".result").show();
$(".result").append(html);
}
});
});
});
</script>
manage.php
<div id="div1">
pppppp
lll
kkk
</div>
<div id='div2'>
tttttt
gg
mm
</div>
<script>
$("#add_new").hide();
</script>
I need the page to get refreshed and then show the particular div tag. Now it is showing the div without page reload. For example, if i click the button inside add_new, it will take me to another page via ajax. In that another page, i have many divs (div1, div2) shown and I hide the add_new div here. Then if I click the 'details' link, and then go back to add_new again, it is still showing that divs which are in ajax page (div1, div2) not `add_new.
Please help me. I need the add_new div here.
Thanks
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(window).load(function () {
var divs = $('#add_new,#details');
$("li a").click(function () {
divs.css('display','none');
$("#" + $(this).attr("class")).css('display','block');
});
});
</script>
<ul>
<li><a class="add_new" href="javascript:void(0);" >Add new</a></li>
<li><a class="details" href="javascript:void(0);" >details</a></li></ul>
<div id="add_new" style="display: none">
<p>ADD NEW</P>
<input type="button" id="addsettings" value="Add Informations">
</DIV>
<div id="details" style="display: none">
<p>detailssss</p>
</div>

jquery toggle between divs and subsequently hide active div

a play on a similar question asked by me that was graciously answered.
three divs, all hidden. jquery toggles between them via different links. this works great! now, i'd like to clink the link corresponding to the active div and hide it, esentially the same as when the page loads with all of them hidden. right now it fades out and back in.
help! thank you!
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<div id="content">
<div class="current" id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
</div>
Javascript:
$(function(){
$('#about').css('display', 'none');
$('#subscribe').css('display', 'none');
$('#contact').css('display', 'none');
});
$('.home').click(function(){
var id = $(this).html().toLowerCase();
$('.current').fadeOut(600, function(){
$('#'+id).fadeIn(600);
$('.current').removeClass('current');
$('#'+id).addClass('current');
});
});
Try this out..
Since on fadeOut the current class is removed, if the size of current is 0 it means nothing is selected. We can simply fadeIn the content div.
$('#about, #subscribe, #contact').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
var $content = $('#' + id + ':not(:visible)');
if ($('.current').length === 0) {
showContent($content)
}
else {
$('.current').fadeOut(600, function(){showContent($content)});
}
});
function showContent(content) {
content.fadeIn(600);
$('.current').removeClass('current');
content.addClass('current');
}
Example on jsfiddle.
Here is another approach:
$(function(){
$('#content div').hide();
});
$('.home').click(function(){
var targetSelector = '#' + $(this).attr('title').toLowerCase();
var targetShown = $(targetSelector).is(':visible');
if (targetShown) {
$(targetSelector).fadeOut(600);
} else {
$('#content div:not(' + targetSelector + ')').fadeOut(600,
function() {$(targetSelector).fadeIn(600)});
}
});
Check to see if the id of the clicked element is equal to the id of the element currently being displayed (i.e. the element with the current class). If it is a different element, then a swap needs to take place. If it is the same element, then it needs to be hidden and have its current class removed...
(Edit: fixed code)
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<br />
<br />
<br />
<div id="content">
<div id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
<div class="current" id="dummy"></div>
</div>
JS:
$().ready(function()
{
$('#about').hide();
$('#subscribe').hide();
$('#contact').hide();
$('#dummy').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
if ($('.current').length >0) {
if($('.current')[0].id.toLowerCase() != id)
{
$('.current').hide();
$('.current').removeClass('current');
$('#'+id).addClass('current');
$('#'+id).show();
}
else
{
$('.current').hide();
$('.current').removeClass('current');
$('#dummy').addClass('current');
}
}
});
});
Just replace the .hide()'s and .shows()'s with fades in and out.

Categories