Ive successfully appended a html file to my website containing only the menu and title image.
I wanted every web page on my website to have the same menu , title and structure.
Everything works fine but I have no idea how to edit a div that I added using append function (jquery).
for example: lets say that I appeneded a file named "include.html" and that file contains a div named "website". is there any way I can add code/content to that DIV after appending it ?
I need access to the DIVS appended by the APPEND function in order to add unique texts/information for each page..
here is some code:
A sample page :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cstyles.css">
<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type='text/javascript' src='menu2.js'></script>
<script type='text/javascript' src='menu_load.js'></script>
</head>
<body>
<script>loadContent();
$(document).on('mouseenter', "#menulist", function() {
mainmenu();
});
</script>
</body>
</html>
here's the menu2.js code:
function mainmenu() {
$(" #menulist li").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"}).show(300);
},function() {
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function() {
mainmenu();
});
here's the menu_load.js code:
function loadContent() {
$("body").append($("<div id='index'>").load("include.html"));
}
The reason Im trying to do that is that I want to add unique information on the main DIV containing the website.. If theres a better way doing that (without JQUERY append) i would love to know..
Thanks in advance!
use html() or text() .. to append content inside div with id website.. after the include.html is appended on load callback function
callback function: If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.
try this
function loadContent()
{
$("body").append($("<div id='index'>").load("include.html", function() {
$("#website").text("HELLO"); // OR $("website").html("HELLO");
});
}
Yes. Find the id (or some other jquery way of finding that div), and just call a function on the load:
function loadContent() {
$("body").append($("<div id='index'></div>").load("include.html", {}, function() {
$("#div_id").html(new_content);
});
}
Let me know if you have any problems.
You can pass a callback function to the load(...) call in jQuery. So, you could do something like this:
$("body").append($("<div id='index'>").load("include.html", function () {
$(this).append("<div>your html content</div>");
}));
This will insert the text your html content to the end of the div. Obviously, you could use something other than append if you wanted it to be somewhere else.
Related
<div id='here'></div>
I am trying to refresh a certain div within a bunch of divs. The div content is basically generated by PHP along with data from a MySQL database in addition to many variables being sent with the help of an XMLHttpRequest.
The idea is to reload/refresh the div itself and not load a php file or to overwrite it with .text or .html. In this case, I cannot use .load('file.php')
What I have tried :
<script type='text/javascript'>
function updateDiv()
{
document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
}
</script>
and (for a every 3 second refresh) :
$(document).ready(function () {
setInterval(function () {
$('#here').load('#here'));
}, 3000);
});
Ideally, I would require something like :
function reloadDIV () {document.getElementById("here").innerHTML.reload}
function reloadDIV () {$('#here').load(self)}
so that I can use it in a onClick :
<a onclick='reloadDIV ();'>reload div</a>
To reload a section of the page, you could use jquerys load with the current url and specify the fragment you need, which would be the same element that load is called on, in this case #here:
function updateDiv()
{
$( "#here" ).load(window.location.href + " #here" );
}
Don't disregard the space within the load element selector: + " #here"
This function can be called within an interval, or attached to a click event
For div refreshing without creating div inside yours with same id, you should use this inside your function
$("#yourDiv").load(" #yourDiv > *");
Complete working code would look like this:
<script>
$(document).ready(function(){
setInterval(function(){
$("#here").load(window.location.href + " #here" );
}, 3000);
});
</script>
<div id="here">dynamic content ?</div>
self reloading div container refreshing every 3 sec.
You can do the following to just reload a <div> element:
$('#yourDiv').load('#yourDiv > *')
Make sure to: use an id and not a class. Also, remember to paste:
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> in the <head> section of the HTML file, if you haven't already. In opposite case it won't work.
You can use jQuery to achieve this using simple $.get method. .html work like innerHtml and replace the content of your div.
$.get("/YourUrl", {},
function (returnedHtml) {
$("#here").html(returnedHtml);
});
And call this using javascript setInterval method.
Using MVC...
<a onclick="confirmDeactivate(#mobileDevice.Id, '#mobileDevice.IsActive');" class="show-pointer"><i class="icon-trash"></i></a>
So Id, and boolean will be passed to confirmDeactivate...
<script type="text/javascript" language="javascript">
function confirmDeactivate(mobileDeviceId, mobileDeviceIsActive) {
var i =1;
}
</script>
It is telling me confirmDeactivate is undefined.
what am i doing wrong?
EDIT
inspect element:
You need to make sure that the script where you have your function is loaded before you try to call it. If it is an external file, Make sure you load that in your HEAD section/ Top of your razor view.
OR you can try an unobutrusive approach
I updated the markup a little bit, Added a css class name and some data attributes.
<a class="show-pointer clicky" data-deviceid="#mobileDevice.Id"
data-active="#mobileDevice.IsActive"><i class="icon-trash"></i></a>
and in your javscript, Bind a click event to your anchor tag and wrap it inside your document ready.
<script>
$(function(){
$("a.clicky").click(function(e){
e.preventDefault();
var _this=$(this);
var deviceId=_this.data("deviceid");
var isActive=_this.data("active");
alert(deviceId+", " +isActive);
//do something with the values now
});
});
</script>
I am trying to execute some JavaScript when my html page loads. The top method populateSelectWithDates() is called, but the jquery portion does not. Any ideas?
function doInitialPopulation() {
//This works
populateSelectWithDates();
//This does not
$(document).ready(function() {
alert('ok');
//Credit to: http://www.pewpewlaser.com/articles/jquery-tablesorter
// Adds sort_header class to ths
$(".sortable th").addClass("sort_header");
// Adds alternating row coloring to table.
$(".sortable").tablesorter({widgets: ["zebra"]});
// Adds "over" class to rows on mouseover
$(".sortable tr").mouseover(function() {
$(this).addClass("over");
});
// Removes "over" class from rows on mouseout
$(".sortable tr").mouseout(function() {
$(this).removeClass("over");
});
});
}
In your HTML file, make sure you are including the scripts in this order:
<!-- first include jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- then include your script(s) -->
<script src="YOUR_SCRIPT.js" type="text/javascript"></script>
I dont see any use of $(document).ready(function() { try removing it. And let us know if alert('ok') works. Also can we see the function populateSelectWithDates() ?
How can I run this script, tried to run it in html file, but it doesn't seem to work..
I want this code to be in single html file, is it possible? or do I need different files?
http://jsfiddle.net/ambiguous/jcnMa/1/
<script type="text/javascript">
$('.question, .answer')
.css("display", "none");
$('.section')
.click(function ()
{
var $others = $('.question:visible')
.not(this);
$others.next('.answer')
.hide();
$others.slideToggle(500);
$(this)
.next('.question')
.slideToggle(500);
});
$('.question')
.click(function ()
{
$(this)
.next('.answer')
.slideToggle(500);
});
</script>
First make sure you're including the jQuery library:
<script src="path/to/jquery.min.js"></script>
Make sure you're not including the jQuery within those tags, so you've got:
<script src="path/to/jquery.min.js"></script>
<script>
/* Your jQuery here */
</script>
And then ensure you're using a $(document).ready(), or $(window).load(), handler:
<script src="path/to/jquery.min.js"></script>
<script>
$(document).ready(
function(){
/* Your jQuery here */
});
</script>
The requirement for the $(document).ready() (or $(window).load()) is to ensure that the DOM is constructed, and the elements to which you want to bind events are present. Without those handlers the browser will try to bind events as soon as it encounters your script, without waiting for the elements to exist or be created, which results in non-functioning event-binding.
put this code before the body close tag
Your Code
</body>
I would go this way:
<head>
...
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.question, .answer').css("display", "none");
$('.section').click(function ()
{
var $others = $('.question:visible').not(this);
$others.next('.answer').hide();
$others.slideToggle(500);
$(this).next('.question').slideToggle(500);
});
$('.question').click(function ()
{
$(this).next('.answer').slideToggle(500);
});
});
</script>
...
</head>
First you need to ensure jquery lib is loaded, then you might notice that your code is referring to object in DOM, so you can access them only when the page is loaded (or after they are entered in the body code). I prefer to store my js code in the head section whenever it's possible.
I have a <div> containing a number of images. I want to fade this <div> in after all contained images have loaded, as they make up one unit that I'd rather have display cleanly instead of momentarily all over the place (while loading).
Is there something similar to window.onLoad that I can apply to a certain element?
e.g.
$("#id").onLoad(function()
{
$(this).fadeIn(500);
});
var images = $("#id img");
var imgCount = images.size();
var i = 0;
images.load(function() {
if(++i == imgCount){
$("#id").fadeIn(500);
}
});
one way of doing it is to add this in the head section of the HTML document:
$(function() {
$("#id").fadeIn(500);
});
the idea behind $(function() { /* code */ } ) is that it will be ran when the DOM is loaded, you can have as many of this as you want in your head section, but it would be more readable IMHO if you only have one.
Another way of doing it is to have a main javascript file that will be ran for each page when it's ready, let's call the HTML file index.html and the javascript file index.js
index.html
<!doctype html>
<head>
<!- include the javascript/css/etc. files -->
<script type="text/javascript" language="javascript">
$(function() {
// the following function exists in index.js file
onPageLoadedIndex();
});
$(function() {
// this code will also be executed when the DOM is ready
// however I strongly recommend having only one of these
});
</script>
</head>
<body>
<!-- snip -->
</body>
</html>
index.js
function onPageLoadedIndex() {
// some code
$("#id").fadeIn(500);
// more code
}
In this way you'll be avoiding having too much javascript in the HTML page
You probably already know how to assign a function to run on page load. In case you don't, try:
window.onload = function() {
$('div').fadeIn(500);
}
jQuery only solution:
$('div img.class').load(function() {
// img.class is your largest (in bytes) image.
$('div').fadeIn(500);
});
try this:
$("#id").load(function()
{
$(this).fadeIn(500);
});
good luck