JQuery dynamic html page - javascript

When the button is pressed i would like for another div tag to appear on the screen for the user. I have tried and looked through many web pages to see what is going wrong. There is no error on the console for the webpage. Here is the HTML code and JavaScript code.
/*jslint browser: true*/
/*global $, jQuery, alert*/
$("buttonId").click(function () {
var structure = $("<div>Hello world</div>");
$("#newDiv").append(structure);
document.getElementById("div01").style.backgroundColor = "red";
});
<html>
<head>
<link rel="stylesheet" href="site.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<nav>
<p class="logo"> Logo! </p>
<ul id="ul01">
<li>NewsFeed</li>
<li>Discover</li>
<li>Following</li>
</ul>
<div class="logIn">
Login
Sign Up
</div>
</nav>
<a id="buttonId" href="#"> Click fo anouther div!!</a>
<div id=newDiv>
<div id=div01> Hello </div>
</div>
<script src="operations.js"></script>
</body>
</html>

$("buttonId") is a selector that won't match any element (as it searches for an element with a tag buttonId).
You should change it to $("#buttonId") for it to work.

There were some mistakes in your code.
$("buttonId").click(function () {
var structure = $("<div>Hello world</div>");
$("#newDiv").append(structure);
document.getElementById("div01").style.backgroundColor = "red";
});
In the above code. # character is missing before buttonId. So it will not match anything. This is the corrected version
$("#buttonId").click(function () {
var structure = $("<div>Hello world</div>");
$("#newDiv").append(structure);
document.getElementById("div01").style.backgroundColor = "red";
});
Also in your HTML, you have forgotten to place double quotes outside ids of newDiv and div01. Here is the corrected version
<html>
<head>
<link rel="stylesheet" href="site.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<nav>
<p class="logo"> Logo! </p>
<ul id="ul01">
<li>NewsFeed</li>
<li>Discover</li>
<li>Following</li>
</ul>
<div class="logIn">
Login
Sign Up
</div>
</nav>
<a id="buttonId" href="#"> Click fo anouther div!!</a>
<div id="newDiv">
<div id="div01"> Hello </div>
</div>
<script src="operations.js"></script>
</body>
</html>

It appears as though you're missing the '#' sign in front of your $('buttonId').
So it should be:
$("#buttonId").click(function () {
var structure = $("<div>Hello world</div>");
$("#newDiv").append(structure);
document.getElementById("div01").style.backgroundColor = "red";
});
Cheers,
David

Related

Can't Get Angular Controller to work in MVC Layout

I have an MVC app that uses the _Layout page to render a header and a sidebar in every page. I am trying to use Angular's Accordion for the menus. However, as soon as I try to place a controller in my _Layout page all of my angular code stops working (I have angular in the Index.cshtml which displays via RenderBody()).
Here is my _Layout page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>
<script src="~/Scripts/ui-bootstrap-custom-tpls-0.13.3.js"></script>
<link href="~/Content/Layout.css" rel="stylesheet" />
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/LayoutCtrl.js"></script>
<script src="~/Scripts/app/generalsearchService.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
</div>
<div class="float-right">
<nav>
</nav>
</div>
</div>
</header>
<div ng-app="myModule" ng-controller="LayoutCtrl">
<nav class='sidebar sidebar-menu-collapsed'>
<a href='#' id='justify-icon'>
<span class='glyphicon glyphicon-triangle-right'>
</span>
</a>
<ul>
<li class='active'>
<a class='expandable' href='#' title='Dashboard'>
<div id="myTab" class='vertical-text collapsed-element' style="color:blue; width:300px">Expand For Menu Options
</div>
<span class='expanded-element'>Dashboard</span>
</a>
</li>
<li>
<a class='expandable' href='#' title='APIs'>
<span class="collapsed-element"></span>
<span class='expanded-element'>APIs</span>
</a>
</li>
<li>
<a class='expandable' href='#' title='Settings'>
<span class="collapsed-element"></span>
<span class='expanded-element'>Settings</span>
</a>
</li>
<li>
<a class='expandable' href='#' title='Account'>
<span class="collapsed-element"></span>
<span class='expanded-element'>Account</span>
</a>
</li>
</ul>
<a href='#' id='logout-icon' title='Logout'>
<span class="collapsed-element"></span>
<span class='glyphicon glyphicon-off'></span>
</a>
</nav>
<nav>
<accordion close-others="oneAtATime">
<accordion-group is-open="status.open">
<accordion-heading>
</accordion-heading>
</accordion-group>
</accordion>
</nav>
</div>
<div id="myBody" style="margin-top:50px; margin-left:320px; width:80%; position:absolute">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<script type="text/javascript">
(function () {
$(function () {
var collapseMyMenu, expandMyMenu, toggleGlyphCollapse, toggleGlyphExpand, hideMenuTexts, showMenuTexts;
expandMyMenu = function () {
document.getElementById('myBody').style.width = '80%';
document.getElementById('myBody').style.marginLeft = '320px';
document.getElementById('myTab').style.color = '#E6E7E8';
return $("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
};
collapseMyMenu = function () {
document.getElementById('myBody').style.width = '99%';
document.getElementById('myBody').style.marginLeft = '70px';
document.getElementById('myTab').style.color = 'blue';
return $("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
};
showMenuTexts = function () {
return $("nav.sidebar ul a span.expanded-element").show();
};
hideMenuTexts = function () {
return $("nav.sidebar ul a span.expanded-element").hide();
};
return $("#justify-icon").click(function (e) {
if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-collapsed")) {
expandMyMenu();
showMenuTexts();
$(this).css({
color: "#000"
});
} else if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-expanded")) {
collapseMyMenu();
hideMenuTexts();
$(this).css({
color: "#FFF"
});
}
$(this).find('span').toggleClass('glyphicon-triangle-right').toggleClass('glyphicon-triangle-left');
return false;
});
});
}).call(this);
</script>
</body>
</html>
here is my Angular controller for the _Layout:
angular.module('myModule').controller('LayoutCtrl', function ($scope, generalsearchService) {
getmenuItems();
function getmenuItems() {
generalsearchService.GetMenuItems()
.success(function (data) {
$scope.menuItems = data;
});
};
});
The Angular in my Index.cshtml page works fine until I add the above to the _Layout page.
Can anyone tell me what I am missing? I've been working on this for hours and just can't seem to figure it out.
Any assistance is greatly appreciated!
I found a workaround for my issue, although it is not the best solution because it will require that I put everything in one controller. The workaround is to put a div around everything in the body of my _Layout page(which includes the "#RenderBody" which renders my Index page) and include the ng-app and ng-controller in that div on the _Layout page. If anyone knows of a better solution..I'm all ears. Thanks to those who took the time to try to help thus far.

partial page update with navigation

First of all, I apologize because this is my first time trying to code a website (or anything), so this might be a stupid question.
I have a web page where I would like to update only a single div when a link in the navigation bar is clicked.
<body>
<div id="wrapper">
<header id="header">
</header>
<section id="section1">
<div>
</div>
<nav id="mainnav">
<ul>
<li>
<b>1</b>
</li>
<li>
<b>2</b>
</li>
<li>
<b>3</b>
</li>
</ul>
</nav>
</section>
<section id="section2">
<div id="mainwrap">
<div id="main">
</div>
</div>
</section>
</div>
</body>
</html>
I know, it's a lot of useless stuff, but you get the point. What I'm trying to do is as you click on 1, 2, 3, etc., only the content of the div "mainwrap" changes, as does the URL (so the page does not refresh, but the URL changes from www.website/1.html to website/2.html, etc. and the content of the one div changes). I have different HTML files for 1, 2, and 3, each with different "main" divs, which ideally will be inserted into the "mainwrap."
I've tried following along with tutorials like https://css-tricks.com/rethinking-dynamic-page-replacing-content/ and other stackoverflow posts like how to do partial page update with jquery. That second one seems like what I want to do, but when I try to implement it, it still doesn't work. Is there a simple fix that I am just missing because I don't know much about coding? (Also, I'm using Dreamweaver. I don't know if that makes a difference.)
Thanks!
You are right how to do partial page update with jquery is exactly what you need. I assume you are new to jquery stuff so here is the complete markup http://jsfiddle.net/yrbvnayy/ that will get your job done!
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="edit-Type" edit="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="wrapper">
<header id="header">
</header>
<section id="section1">
<div>
</div>
<nav id="mainnav">
<ul>
<li>
<b>1</b>
</li>
<li>
<b>2</b>
</li>
<li>
<b>3</b>
</li>
</ul>
</nav>
</section>
<section id="section2">
<div id="mainwrap">
<div id="main">
</div>
</div>
</section>
</div>
<script type="text/javascript">
$("#mainnav li a").click(function(e) {
// prevent from going to the page
e.preventDefault();
// get the href
var href = $(this).attr("href");
$("#main").load(href, function() {
// do something after content has been loaded
});
});
</script>
</body>
</html>
I am using the same reference for jquery ajax to explain the answer. How to do partial page update with jQuery?
In your case I will apply the above usage as
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#mainnav a').click(function(e){
//either use e.preventDefault() to stop the default event or return false
var loc=$(this).attr('href');
$('#mainwrap').load(loc);
//This should load the html content to your div
})
});
</script>
EDIT
An alternative if you just want the div of the HTML pages you are pointing.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#mainnav a').click(function(e){
// either use e.preventDefault() to stop the default event or return false
e.preventDefault();
var loc = $(this).attr('href');
$.ajax({
url: loc,
type: 'GET', // can be GET or POST depending on your requirement
success: function(data, textstatus, xhr)
{
var div = $(data).find('#main');
$('#mainwrap').html(div);
},
error: function(xhr, status, error)
{
alert('Error - ' + xhr.responseText);
}
});
// This should load the html content to your div
})
});
</script>
Fore more ajax related documentation you can go through http://api.jquery.com/jquery.ajax/
The example you cite is using php, which can do what you want.

What is wrong with this nodeValue replacing code?

I am learning basic js operation on DOM, and it works fine with the first part of the code, which completes attributes replacing function.
Then it doesn't work with the second part code, which needs to replace the null value of the childNode.nodeValue of the "p" element.
I checked lots of times in the past 2 hrs, and the whole structure is also the same with the code in the book, but it just won't work.
I also checked the MDN about the node related entries, but also failed to get what is going on here.
gallery.js
function showpics(indexs){
var linky = indexs.getAttribute("href");
var holdy = document.getElementById("holder");
holdy.setAttribute("src",linky);
var texty = indexs.getAttribute("title");
var fun = document.getElementById("funnyWords");
fun.childNodes[0].nodeValue = texty;
}
Below is the HTML file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="IE=Edge,chrome=1">
<title>YTimes</title>
<script type="text/javascript" src="gallery.js"></script>
</head>
<body>
<h1>Our Story</h1>
<section>
<ul>
<li>F</li>
<li>2.0</li>
<li>Riverrun</li>
</ul>
</section>
<section>
<p id="funnyWords"></p>
<span>
<img src="" alt="" id="holder">
</span>
</section>
</body>
</html>
The problem is that #funnyWords has no content:
<p id="funnyWords"></p>
Therefore, fun.childNodes[0] is undefined.
You can create a new text node if necessary:
if(fun.childNodes.length)
fun.childNodes[0].nodeValue = texty;
else
fun.appendChild(document.createTextNode(texty));
Alternatively, new browsers support textContent:
fun.textContent = texty;
<head>
<meta charset="UTF-8" http-equiv="IE=Edge,chrome=1">
<title>YTimes</title>
<script type="text/javascript" src="gallery.js"></script>
</head>
<body>
<h1>Our Story</h1>
<section>
<ul>
<li>F</li>
<li>2.0</li>
<li>Riverrun</li>
</ul>
</section>
<section>
<p id="funnyWords">
<div class="childnode">
</div>
</p>
<span>
<img src="" alt="" id="holder">
</span>
</section>
</body>

jQuery Mobile - listview data-inset on refresh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$("#local").live('pageinit', function(evt) {
//$(document).ready(function(){
var edit = $('#edit');
edit.append('<li>test1</li>');
edit.listview('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#local">
<h3 class="ui-li-heading">Local Storage Test</h3>
<p class="ui-li-desc">Just a test</p>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="local">
<div data-role="content">
<ul id="edit" data-role="listview" data-inset="true">
<li>ntry already there. Append works...</li>
</ul>
</div>
</div>
</body>
</html>
So my problem is on the second page. I just added a new element and update the list view just to load the css jqm.
But if I use everything that is good pageInit except round the corners of the list view (data frame = "true"). He did not appear rounded, but I checked the css load, and should be all year. But when used document.ready everything is fine. Round the corners of the list view!
Please help me because I do not want to use document.ready.
$("#local").live('pagecreate', function (evt) {
var edit = $('#edit');
edit.append($('<li>test1</li>'))
});
Try replacing above code peace

3 iFrames, 3 Links - Show 1 iFrame using onclick, while hiding the others

I have 3 button-images in one page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I've browsed online, but i can't seem to make it work. :o
Here's my code:
<div id="tabs">
<div id="overview">
Overviews
</div>
<div id="gallery">
Gallery
</div>
</span>
<div id="reviews">
Reviews
</div>
</div>
Each wrapper# is the id of a div that contains the iFrame. The divs contained in the tabs div above are button-images.
How can I show 1 frame 1st, then when the other button-image is clicked, that iFrame will hide, and the iFrame corresponding to the button clicked will be the only 1 showing?
Thank you so much in advance!! :)
P.S. you can check out my website www.giroapps.com to get a better picture of what i'm trying to achieve. :)
There is a neat solution for you: http://www.stilbuero.de/jquery/tabs_3/
Quick example:
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<iframe>IFrame1</iframe>
</div>
<div id="fragment-2">
<iframe>IFrame2</iframe>
</div>
<div id="fragment-3">
<iframe>IFrame3</iframe>
</div>
</div>
</body>
Update
In regards of your application:
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("#tabs a").click( function() {
$("#tabs-1").load(this.href);
return false ;
} ) ;
$("#tabs a:first").click() ;
});
</SCRIPT>
<DIV id="tabs">
<DIV id="overview">
<A class="imagelink lookA" href="./toframe.html">Overviews</A>
</DIV>
<DIV id="gallery">
<A class="imagelink lookA" href="./tawagpinoygallery.html">Gallery</A>
</DIV>
<DIV id="reviews">
<A class="imagelink lookA" href="./trframe.html">Reviews</A>
</DIV>
</DIV>
<div id="tabs-1"></div>

Categories