adding a new tab on onclick event on content of first tab - javascript

Seems my question is too difficult or I am unable to explain my issue properly!!
I am using barelyfitz tabifier.
My html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple Tabber Example</title>
<script type="text/javascript" src="tabber.js"></script>
<link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print">
<script type="text/javascript">
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear. */
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function loadDetails()
{
alert("here");
document.getElementById('myTab').tabber.tabShow(1);
alert("not here");
}
</script>
</head>
<body>
<h1>Tabber Example</h1>
<div class="tabber" id="myTab">
<div class="tabbertab">
<h2>Tab 1</h2>
<A href="#" onclick="loadDetails()";>Banana</A>
</div>
<div class="tabbertabhide">
<h2>Tab 4</h2>
<p>Tab 4 content.</p>
</div>
</div>
</body>
</html>
As clear, tab 4 is initially hidden as its class is tabbertabhide.
And tab 1 is having a text banana with onclick reference to loadDetails method.
What I want to do is, on clicking banana, I want tab 4 to become visible.
However, document.getElementById line in loadDetails method does not have any effect.
Can any one please help me with this specific technical issue!!
Below is the same issue I asked before in a generalized manner!!
Issue:
I have a webapplication with a search form on the index page which searches for fruits.
Based on the search criteria entered, the result will have a list of fruits. Each member of this will have a call back link to a javascript function. Something like:
<html>
<head>
<script type="text/javascript">
//Function to load further details on fruits
function loadDetails(){
//this will do a call back to server and will fetch details in a transfer object
}
</script>
</head>
<body>
<form method="post">
<A href="#" onclick="loadDetails('banana')";>Banana</A>
<A href="#" onclick="loadDetails('apple')";>Apple</A>
</form>
</body>
</html>
Now my issue is, I want to show the details on a tab which gets generated in a loadDetails function.
Something in the lines of www.barelyfitz.com/projects/tabber/
But dynamic tab generation on the onclick event in the content of first tab.
In other words, first tab will have the clickable list of fruits and on clicking a fruit, a new tab will get opened with more details on that fruit fetched from database.
Is it possible using simple javascript ??
Also, is it possible to do this in jquery without AJAX. I can not use ajax.
I am extremely extremely new to javascript. So I dont know how well am able to describe my question. But have tried my best.
Hope to get some help!!

Can you post this on a fiddle?
Also try the jQuery way of doing it which would be:
function loadDetails()
{
$('.tabbertabhide').show(); //make it appear without any animation OR
$('.tabbertabhide').fadeIn(); //make it to fade in.
}
The above code uses a class selector- in this case your selecting the items with class "tabbertabhide" and making them appear. Similarly you could also use an ID selector if you wanted.

Related

JavaScript modal not opening on all pages

I have created a JavaScript modal that opens on click it's isolated in one file and I want to reuse it on other pages, it works fine on the index.html page, but when I want to use it on another page it gives me Cannot read property 'addEventListener' of null I tried wrapping my js modal code in a window.onload = function() {} because I believed that the DOM had not been loaded fully but again it didn't work, how can I make it work on every page?
here is the index.html content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link rel="stylesheet" type="text/css" href="./css/modal.css">
<title>Word Spelling Game</title>
</head>
<body>
<div class="menu">
<audio controls autoplay loop>
<source src="./sounds/menu-song.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<a href="./pages/game-menu.html">
<img src="./images/choose-game-sign.png" class="board">
</a>
<div>
<img src="./images/help-sign.png" class="board trigger">
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h1>Welcome!</h1>
<article>
This is a collection of interactive games designed for children, each game
aims to further develop the childs skill set in a variety of tasks that involve
spelling, writing and simple math. It is designed in a fun way so that your kid will never become bored!
There are different levels of difficulty for different ages. To select and play
a level click on the Choose level tab above this one. You can see each game's rules
by clicking on the rules tab that is located on the right corner on each level. The instructions are written in
a way that every kid can understand in case that he get's stuck at some point.
</article>
</div>
</div>
</div>
</div>
<script src="./scripts/help-modal.js"></script>
</body>
</html>
The other page on which I want to use it that the user reaches after he clicks the Choose Game link:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css//game-menu.css">
<link rel="stylesheet" type="text/css" href="../css/modal.css">
<script src="../scripts/help-modal.js"></script>
<title>Levels</title>
</head>
<body>
<a href="../index.html">
<img src="../images/back-sign.png">
</a>
<div class="help">
<p class="question-mark">?</p>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h1>Welcome!</h1>
<article>
This is a collection of interactive games designed for children, each game
aims to further develop the childs skill set in a variety of tasks that involve
spelling, writing and simple math. It is designed in a fun way so that your kid will never become bored!
There are different levels of difficulty for different ages. To select and play
a level click on the Choose level tab above this one. You can see each game's rules
by clicking on the rules tab that is located on the right corner on each level. The instructions are written in
a way that every kid can understand in case that he get's stuck at some point.
</article>
</div>
</div>
</div>
</body>
</html>
and my help-modal.js file:
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
On your second HTML file you seem to not have any element with trigger class. This is the reason for your error in Console.
Including your JavaScript files in the end of body(just how you did in your intex.html) is also a good practice, in order to make sure that JavaScript will run after all HTML elements were loaded.
1) On the "other" page, move the <script> tag to the bottom of the markup, like it is in the "index" page, or add a window.onload = function() {} wrapper around the code in the .js file.
The reason for this is that currently in the "other" page, the script is loading first. When it loads, it is immediately executed by the browser. So it immediately runs var modal = document.querySelector(".modal");. However, since the script was loaded before any of the HTML in the <body>, there is no element available which matches the selector .modal. So nothing is selected, and consequently the event listeners are not attached to any element, and so are never triggered.
2) Added to that, your "other" page doesn't contain any element with the class "trigger". So even once you fix the loading issue, the line var trigger = document.querySelector(".trigger"); will still not select anything, and you'll still get a similar error when it tries to attach an event handler to nothing. So you need to correct that too. (This will be why your earlier attempt at window.onload = function() {} failed).
In summary - the HTML elements you're targeting must exist before the JavaScript you're using to target them is executed.

Adding script tag before the end of body tag(Not Working)

In the below Code,I have added the script tag before the end of the body tag.So from my understanding,I should get html content first,in this case the header tag and three paragraph tags.After that,I should get the alert box.But I am getting the opposite.Alert box is being displayed first before the html content.I am not able to understand why.Please help me on this.Thanks in advance :)
<html>
<head>
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<p>new ---> Add A Todo</p>
<p>list ---> List All Todos</p>
<p>quit ----> Quit App</p>
<script type="text/javascript">alert('h')</script>
</body>
</html>
HTML page loads as it follows unless you use any define any importance. Here you are right but the situation is HTML shows for micro sec or even less which we can't see. Then the alert box shows up. For this reason, it seems different from the theory but you can call as an illusion.

All of the elements change on Click, not just the targeted one

I am just playing with some basic Jquery and something strange is happening. I have two elements on the page.. an h1 heading, and a generic link. When I click the link I would like the text to change to "This text has now changed", and it does, but then either the button disappears and a new h1 is created with the same "this text has not changed" text, or the button itself turns into the h1. I'm not sure, but here's my code:
HTML:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<h1>This element should change.<h1>
Click Me<br>
</body>
</html>
JQUERY:
$(document).ready(function() {
$(".myLink").click(function() { // this is a convenience method that targets the same elements above just in a quicker fashion.
$("h1").html("This text has now changed.");
});
});
Picture Before the click:
Picture After:
Also, when I added the fade out method everything disappears once again, not just the targeted "h1" element.
Any advice is greatly appreciated as always. Thank you.
You have two opening <h1> tags (the second one is missing a /.)
<h1>This element should change.<h1>
^here
It looks like you have two start tags. EG:
<h1>Heading 1<h1>
Try changing the second tag to an end tag. EG:
<h1>Heading 1</h1>
^
Your h1 tag is not closed. You have 2 opening tags, and by default, your link is contained by the second opening tag so it's changing that html

jQuery Load() not loading within div

I am trying to use jQuery to open an href inside a div, rather than simply linking to the new page. I have viewed a number of tutorials but the load() function does not seem to be working for me.
Please take a look at my code and let me know what piece of puzzle is missing.
Here is my HTML page:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Jquery</title>
</head>
<body>
<!-- nav links to open in div#content area -->
<a class="menu_top" href="pages/home.php">Home</a> | <a class="menu_top" href="pages/about.php">About</a> | <a class="menu_top" href="pages/contact.php">Contact</a>
<!-- div for links to open in -->
<div id="content-area"></div>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>
And my jQuery Javascript:
$('.menu_top').click(function() {
var href=$(this).attr('href');
alert (href);
$('#content_area').load(href);
//return false;
});
I added alert to make sure the URL was being retrieved, and it is, then it would completely load then new page. So I added "return false" and it did nothing after the alert suggesting that the load() was not working.
Initially was running this through WAMP so I tried running the page directly from the folder and the browser tried to download the linked pages instead of opening them. I also tried uploading to a remote web site and got the same result as on WAMP.
Try:
$('.menu_top').click(function() {
var href=$(this).attr('href');
alert (href);
$('#content-area').load(href);
//return false;
});
Because your div is called #content-area, not #content_area.

call jquery changePage() on localStorage

I have a simple jquery mobile page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="MyContainer">
<!-- ##################### Raw Part ##################### -->
<div data-role="page">
<div data-role="header">
<h1> Hello World </h1>
</div>
</div>
</div>
</body>
</html>
when I execute that page it renders fine with a black header and title.
The reason why that page loads correctly is because jquery-mobile placed new attributes where needed in fact the innerHTML of MyContainer after the page loads is:
<!-- ##################### Parsed Part ##################### -->
<div data-role="page" data-url="/jqueryMobile/TC_Page/main2.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 1464px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">
Hello World
</h1>
</div>
</div>
In other words the Raw Part turn into the Parsed Part .
I will like to know what jquery.mobile function made the conversion from the Raw Part to the Parsed Part!
The functions $.mobile.changePage(), $.mobile.loadPage() enables me to do that For example I could do:
// place response from SomeUrl inside the div MyContainer and convert it from raw to parsed!
$.mobile.loadPage('SomeUrl', { pageContainer: $('#MyContainer') });
// later then get the child child (note second child) of MyContainer and make that the child of MyContainer
The problem now is:
All those functions: loadPage, ChangePage etc make an ajax call. What if I already have the html that I want to inject ( I have it in webBrowser local storage or in a Cookie)! In other words how can I make this work:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="MyContainer">
</div>
<script>
function SomeFunction(){
var someHTML = localStorate.html1; // html1 = raw part = <div data-role="page"><div data-role="header"><h1> Hello World </h1></div></div>
$("#MyContainer").html(someHTML);
// now here I am stuck!!!!!!!!!!!!!!!
// how can I make the content of MyContainer go from the raw part to the Parsed Part!
// I am looking for something like:
$JqueryMobile.ParseHTML($("#MyContainer"));
}
</script>
</body>
</html>
Solution
jQuery Mobile provides numerous functions for widget restyling but only one of them will restyle whole page.
$('#index').trigger('pagecreate');
Where #index should be an id of your page DIV.
There is also on other function that can be used here, but unlike trigger('pagecreat'); this function will style only DIV wit data-role="content" attribute. To test this, jsFiddle example trigger('pagecreate'); should be replaced with trigger('create');
$('#index').trigger('create');
If possible SCRIPT tag should not be used inside a BODY tag, while it will work it can cause additional problems. If you want to find more about this topic and how jQuery Mobile handles dynamically added content take a look at this ARTICLE which is a part of my personal blog.
Example
Working example: jsFiddle
This part of code should interest you:
$('#index').append('<div data-role="footer" data-position="fixed"><h1>Dynamicaly added footer</h1></div> ');
$('#index [data-role="content"]').append('<fieldset data-role="controlgroup"><legend>Choose:</legend><input type="radio" name="radio" id="radio1" value="1" checked="checked" /><label for="radio1">option 1</label></fieldset>');
$('#index').trigger('pagecreate');
This code is used to dynamically append page footer and a radio button to page content.

Categories

Resources