jQuery call function after content get changed by .load() method - javascript

I have a very basic question concerning jQuery but I really don't know how to put it in a short sentence/ headwords to google for it. So first of all, I'm sorry if this might be a double post.
For my problem, I guess only those three files a relevant:
index.html
content.html
script.js
My index.html basically is just a file which keeps a navigation bar (build with Bootstrap v3.3.0).
<!DOCTYPE html>
<html lang="en">
<head>
...
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles CSS -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
...
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Content</li>
...
</ul>
</div><!-- end navbar-collapse -->
</div><!--end container -->
</nav> <!-- end navbar -->
<div class="container" id="mainContainer">
<!-- Load by default from the Navigation with jQuery -->
</div><!-- end container -->
<footer>
....
</footer>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>
My content.html basically only displays a "button" now (Actually it displays much more, but for this example it only displays a "button")
<div class="col-xs-12 col-md-6">
<a id="testButton" class="btn btn-success" href="#">This is a Test-Button</a>
</div>
My script.js basically only "changes" the content of the div-Element (<div class="container" id="mainContainer">…</div>).
$(document).ready(function () {
$('.nav li a').click(function(e) {
$('.nav li').removeClass('active');
var $parent = $(this).parent();
var $content = $(this).attr('href');
if (!$parent.hasClass('active')) {
$parent.addClass('active');
$('#mainContainer').hide().load($content + '.html').fadeIn('500');
$('#mainFooter').hide().fadeIn('500');
}
e.preventDefault();
});
$('#testButton').click(function(event){
alert("Test, this Button works!");
event.preventDefault();
});
});
Everything displayed here works pretty fine (I'm not sure if this is the way how you should use the navigation, but it works). When I change the content by clicking on the "Content-Item" from the navigation, the content.html file gets displayed in the div-element. But when I click on the Button from the content.html (which was loaded before), no alert gets fired. I guess because the "javascript file", can't find a reverence when the Webpage loads the first time. When I enter the javscript code directly into the content.html file the button actually fires an alert (same happens when I only link the file <script src="js/script.js"></script>).
I really do not want to enter this single line of code (<script src="js/script.js"></script>) to every "content-file". So is there an easier way how to do that? Maybe I also need to change the way how I use the navigation.
Thanks for your help

You want event delegate.
It means you delegate #testButton's click event to it's parent, even if the button is not yet exist in the dom, but when it is there, it's parent, in your situation, #mainContainer will be able to handle the button's event listener.
Like:
$('#mainContainer').on('click', '#testButton', function(event){
alert("Test, this Button works!");
event.preventDefault();
});

Related

Load content of external header on other page

I've only started working on my website and I've already run into a little hiccup, for some reason a script that I use doesn't work anymore and I can't find any fixes, there's nothing in the chrome console or any useful error information.
I was hoping you guys could help me out.
I'm simply trying to load a piece of a different HTML page onto my Index page.
Usually I run this script, and it should take the #nav div from the header.html and put it into the header below the script.
Index.html:
<!--added scripts-->
<script src="jquery/jquery-3.2.0.min.js"></script>
<!-- Css -->
<link rel="stylesheet" type="text/css" href="Sjvklusbedrijf.css">
<!--script-->
<script>
$(document).ready(function() {
$("#header").load("header.html #nav");
alert("test");
});
</script>
</head>
<body>
<header id="header">
</header>
requested script:
<div id="#nav">
<div class="logodiv"></div>
<ul>
<li>Home</li>
<li>Foto's</li>
<li>Garantie</li>
<li>Contact</li>
</ul>
I'm using jquery and have loaded it thusly: <script src="jquery/jquery-3.2.0.min.js"></script> and if I put an alert in the doc.ready script it pops up but it doesn't load the required data
I'm running on localhost but that shouldn't be a problem for jquery
Thanks for the help!
It did not work the first time because <div id="#nav"> should be <div id="nav">.
okay somehow it decided to work but I don't really get why.
I changed some things:
index:
<script>
$(document).ready(function() {
$("#header").load("header.html nav");
});
</script>
</head>
<body>
<!--header-->
<header id="header" class="header">
</header>
required script:
<nav>
<img src="fotos/test" alt="logo"/>
<ul>
<li>Home</li>
<li>Foto's</li>
<li>Garantie</li>
<li>Contact</li>
</ul>

Javascript csi and navigation (no iframes)

I am importing external html files using jQuery like this:
$("#header").load("header.html");
$("#content").load("home.html");
$("#footer").load("footer.html");
And the html:
<html>
...
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
What I want to be able to do is to also have this:
Import the Nav:
$("#hav").load("nav.html");
Into:
<div id="nav"></div>
So I would have:
<html>
...
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
The nav import would look like this:
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
Now, this is the hard part...
I need the pages from the nav to open in the content area but I need the header and footer to stay loaded as they are and only the content area to change.
How can I do this without iframes or angular (as I know angular can do this).
I haven't tested this out, but here's a way that might work.
$('#nav').on('click', 'li a', function(evt) {
evt.preventDefault();
var href = $(this).attr('href');
$('#content').load(href);
});
The listener is added to #nav only because that element exists at the time the listener is made, but it's actually listening for any bubbled elements of children, fitting the selector.
The preventDefault() is meant to prevent regular navigation from taking place. If that doesn't work, you could try the same with a link in appearances-only. (eg, <span class="linkLike" data-href="about.html">About</span>)

Using PHP to replace only (current) <div> content from <form> submit button

I have a single 'index' page that replaces the 'mainContents' when any button in the navBar is pressed.
This is so that I can re-load only the contents needed, and keep the header, navbar, and footer static.
This is causing me trouble in my "search.html" page (which is loaded into the #mainContents ).
search.html has a form which (will) call some sql queries via PHP. When I initially designed this webpage I had it spanning across multiple pages; re-loading header, footer, etc each time. So I just re-loaded the whole page with the new 'php' contents (which will be a table populated with data).
Now that 'search.html' is located inside the #mainContents of the 'index.html' page, when the 'go/submit' button is pressed, the entire page is reloaded, and I lose my header and footer...
I've been at this for a while now, and I am at a loss as to how to make it work.
I'll include relevant pages/scripts (though it seems like a bit much, I'd rather you have the information available)
Index.html (main page):
<!DOCTYPE html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="noteVote">
<!-- HEADER -->
<div data-role="header" align="middle" class="header">
<img src="images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- NAVBAR -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
<!-- /NAVBAR -->
</div>
<!-- /HEADER -->
<!--
This is the MAIN section.
This is where the contents will be replaced
-->
<div data-role="content" class="ui-content" id="mainContent">
Site-related text.
</div>
<!-- /MAIN -->
<!-- FOOTER -->
<div data-role="footer" class="footer">
This is the footer.
</div>
<!-- /FOOTER -->
</div>
<!-- /INDEX -->
<script src="./scripts/navScript.js"></script>
</body>
</html>
navScript.js is the script that causes the nav-buttons to replace only the #mainContents :
$(document).ready(function() {
// Actual script includes code for each nav-bar button.
$("#searchButton").on("click", function(e) {
e.preventDefault();
$("#mainContent").load("./pages/search.html");
});
Then the 'search.html' which only replaces the #mainContent .
(this is where it gets messy, as I've tried a few ways to get this to work how I want):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main" data-role="content" id="main">
<div id="holder">
<h1>Search</h1>
<div class="left">
<form id="searchForm">
<b>Course:</b>
<select name="course">
<option value="*">All</option>
<option value="COMM2216">COMM-2216</option>
<option value="COMP2121">COMP-2121</option>
<option value="COMP2510">COMP-2510</option>
<option value="COMP2526">COMP-2526</option>
<option value="COMP2714">COMP-2714</option>
<option value="COMP2721">COMP-2721</option>
</select>
<p>
Type:
<input type="radio" name="type" value="lec">Lecture
<input type="radio" name="type" value="lab">Lab
<input type="radio" name="type" value="*" checked>Both
<p>
<input type="submit" value="Go" id="searchGoButton">
</form>
</div>
</div>
</div>
<script src="./scripts/searchGo.js">
</script>
</body>
</html>
And finally 'searchGo.js', is the code that is supposed to enforce only the "search.html" page to change (inside the #mainContent ), so that the header, footer, etc stay present.
$(document).ready(function() {
$("#searchForm").submit(function(e)
{
e.preventDefault();
$.ajax({
type: "POST",
url: "./scripts/php_test.php",
data: "blah",
success: function(){
$("#holder").load("../pages/account.html");
}
}) ;
} );
This is just a sample/test to see if it would work; but it reloads the whole page.
It is my intention that searchGo.js will load a .php script that will call the sql queries, and populate a table and replace the #mainContent div with its
Again, I apologize for all the code, and if my problem is vague... I'm totally stumped, and would greatly appreciate any help. My alternative is to go back to reloading the navbar and header with each page; which I will resort to soon if no one can offer assistance.
Any suggestions of alternate means to accomplish this task are more than welcomed.
Try to add onsubmit="return false;" on the search form tag. The problem is that you don't override default submit button form behavior. That is the reason that your form submitting is refreshing the whole page.
Something like this:
<form onsubmit="return false;">
<input id="submitButton" type="submit" />
</form>
You can call your search function like this
$(document).ready(function() {
$('#submitButton').on('click', function() {
console.log('Form submitted');
console.log('Ajax call');
console.log('Insert returned data');
});
});
Js bin link
You need to delegate the event for that button -
$("body").on("submit", "#searchForm", function(e)...
Because search.html is loaded into the DOM via AJAX jQuery is "unaware" of it. The submit bubbles up the chain though and can be "captured" at a level that was already there when jQuery initially ran. The submit bubbles up to the body then jQuery sees it and acts.

Cannot get a popup to work in jQuery Mobile

I am sure I am just missing something basic, but can anyone see anything wrong with the following code? When I click the first button, it does not open a popup. The second button opens the popup as a dialog.
<!DOCTYPE html>
<html>
<head>
<!-- JQUERY MOBILE CSS -->
<link rel="stylesheet" href="//codeorigin.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<!-- JQUERY -->
<script src="//codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<!-- JQUERY MOBILE -->
<script src="//codeorigin.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<p>Open Popup</p>
<p>Open Popup(dialog)</p>
</div>
</div>
<div id="menu-items" data-role="popup">
<ul data-role="listview">
<li>google.com</li>
<li>google.com</li>
</ul>
</div>
</body>
</html>
Indeed it's a small thing you're missing! =)
jQuery 1.3 Mobile Pop-up Docs:
...then create a link with the href set to the id of the popup div, and add the attribute data-rel="popup" to tell the framework to open the popup when the link is tapped. This is a similar markup pattern to the dialog widget. A popup div has to be nested inside the same page as the link.
Move the <div id="menu-items"></div> to within the <div id="home" data-role="page"><div> node, then that should be it!
Working jsFiddle included. Dialogs are deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.
i think there are two things:
I). for opening a popup you have to place popup content inside the data-role='page'
II). for opening a dialog you have to place dialog content outside the data-role='page'
working fiddle : http://jsfiddle.net/REthD/10/

Open lightbox when page loads

I'm using this plugin to show lightbox on a website
http://www.zurb.com/playground/reveal-modal-plugin
I want to load some modal automatically when the page load.
I try using this but didn't work:
ON HEAD
<!-- REVEAL LIGHTBOX -->
<script type="text/javascript" src="jquery.reveal.js"></script>
<link rel="stylesheet" href="reveal.css">
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#flyer').reveal();
});
</script>
<!-- REVEAL LIGHTBOX -->
ON BODY
<div id="flyer" class="reveal-modal large">
<h1>Ahora tenemos flyer y todo</h1>
<div id="flyer-img"></div>
<a class="close-reveal-modal">×</a>
</div>
What I'm doing wrong?
This is the page that I'm working
www.cosaslindas.com/beta
Many thanks.
Try adding this after the $('#flier').reveal();
$('#flier').trigger('click');
This issue on Github explains how to do it. It's not a feature of Reveal, but it looks like it can be used to work. You need to have an element (in your case, #flyer have the attribute "data-reveal-onready").
Ive been looking to the modal plugin and i think the reveal function will only bind to a tags with the data-reveal-id attribute.
Not sure if this will work but i'd say give it a try!
add to you html:
<a id="triggerflyermodal" href="#" data-reveal-id="flyer" style="display:none">This is hidden</a>
And change the call to this:
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#triggerflyermodal').click();
});
</script>
EDIT:
Your loading jQuery library twice!
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
And
<script src="js/jquery.min.js" type="text/javascript"></script>
Trying removing the last one.
Edit2:
I just tested this in jsfiddle. If you remove the 2nd jquery library from your header your script should run fine!

Categories

Resources