I am trying to call up an "example.js" file containing an image gallery (the bulk of the code for the gallery, seeing as how i will have 3 to choose from) using:
<img src="img.jpg" onClick="thisAction()" />
What I want to do is place all of the contained "example.js" code within a div elsewhere in the page. I have a seperate javascript.js file that references the thisAction() function, but I can't seem to figure out where to go from there, nothing is working.
I have tried a load function, and I've delved into ajax, not really knowing what I'm doing... Please help!
Ok, so just to clarify ^^^above^^^, I am not actually trying to call in any javascript in my "example.js", I was simply instructed to do so, because of some reason I can't recall that had to do with recognizing the formatting.... because what I actually want is some html to be inserted, which includes some divs. What i'd like, if possible, is to insert all the code in "example.html" which may contain something like this:
<div id="navbuttonleftcontainer"></div>
<div id="image_holder"><img src="examplepic.jpg" /></div>
<div id="navbuttonrightcontainer"></div>
into a div elsewhere on the page in my existing "gallery.html" by calling the function with the
<img src="examplenavpic.jpg" onClick="thisAction() />
tag.
The closest I've been able to come was with this:
function thisAction()
{
$('#divonmygalleryhtml').html('gallery1.html');
}
But this doesn't actually spit out the above mentioned example.html code, it just puts the text "gallery.html" into the div. I've tryed simply copying all the code from example.html and replacing it with
function thisAction()
{
$('#divonmygalleryhtml').html('
<div id="navbuttonleftcontainer"></div>
<div id="image_holder"><img src="examplepic.jpg" /></div>
<div id="navbuttonrightcontainer"></div>
');
}
But that won't do a thing... Ive tried the last 2 suggestions with no luck... Any suggestions would be great.
Not sure if i get you right. With jQuery's AJAX - function and the HTML - function you can reload code from the server and place it in a div on your page:
$(document).ready(function({
function thisAction(){
$.ajax({
url: "/pathToFile/example.js",
cache: false
}).done(function( data ) {
$("#targetDiv").html( data );
});
}
thisAction();
});
To call a external javascript file you would do
function thisAction(){
var divfill = getElementById(targetDiv);
var newscript;
newscript.src ="example.js";
divfill.innerHTML = (newscript);
}
Hope that works :).
Looks like you can use jQuery then you can use the .load() to load the contents of a remote source to an element
function thisAction() {
$('#divonmygalleryhtml').load('example.html');
}
Related
I am having some issues fully loading an html file into my div. After reading though different questions here I realized that I should use an iframe instead of trying to mess around with divs, ajax, or JS. This has served me well, however, upon loading it returns the page though in a scroll box as so:
how can I solve this issue?
Code snippets below:
This part comes from the index.html:
<div class="blurbs" id="blurbs">
<iframe id = "frame" width="100%" height="100%" frameborder="0" ></iframe>
</div>
the rest comes from the january html file which is a large one that just contains all that information so i am uncertain if y'all need to see it as I doubt it has anything to do with this.
this here is the javascript that is called when January is clicked:
function load_january() {
var ajaxCall = document.getElementById("frame");
ajaxCall.setAttribute("src", "../HTML/months/january.html");
}
I think you are interested in resizing the iframe height to match the height of the source HTML. This way you won't see the scrollbar.
This problem has been solved here:
Adjust width height of iframe to fit with content in it
So i got around this by using a div instead, and calling an ajax function. Iframes are too much of a hassle with my knowledge level of CSS at this time.
$(document).ready(function() {
$("#jan").click(function () {
$.ajax({
url: "../HTML/months/january.html", success: function (result) {
$("#blurb").html(result);
}
});
});
});
I've come to a road block and I'm hoping someone can explain where my error is. I'll do my best to explain my script, sorry if I overly break it down.
I have a div on page1.html that is being replaced by a div on page2.html via jquery's .load(). My script which is found in the <head> is as following:
<script>
$(document).ready(function(){
$(".info").click(function(event){
var gallery = event.target.id;
$("#replace").load( "folio/" + gallery + ".html #grab", function () {
jQuery("#gallery").unitegallery({
theme_enable_preloader: true,
tiles_col_width: 250,
tiles_space_between_cols: 10,
tiles_min_columns: 1,
tile_enable_image_effect:true,
tile_image_effect_type: "blur",
tile_image_effect_reverse: true,
lightbox_show_numbers: false,
lightbox_top_panel_opacity: true,
lightbox_overlay_opacity:1
});
$("#return").on("click", function(){
$("replace").load(" Portfolio1.html #replace1") });
});
});
});
</script>
The script executes when a <a id="folio1" class="info"> is clicked. A variable gallery will store the id value of the <a id="folio1" class="info"> that was clicked. I then select the <div id="replace"> which will have its content updated via Jquery's .load(). Variable gallery that is storing the id will be used inside the .load to determine the appropriate page url the new content will be loaded from. So far this works perfectly.
On success of .load() I create a call back function which executes .unitegallery(). Unitegallery() successfully executes and beautifully creates the image gallery. After unitegallery() I have another function which is waiting using .on("click" for a click event on <a id="return">. This function will perform another .load that will return <div id="replace"> back to its previous state. This is when things stop working.
Note:The selector used for the function <a id="return">, was inserted into the webpage via the first .load().
Issue: This .on("click" is not executing.
Ideas on why that portion of the script is not executing? Is the <a id="return"> loaded into the document by the first .load() not able to be selected?
Ask me questions for clarification! :)
please see my comment below if it works.
$("#return").on("click", function(){
$("replace").load(" Portfolio1.html #replace1") // you need the # because i think the event registration will not recognize 'replace'
//enter code here`
});
Also if this does not work, can you please paste your html so we can see the structure of your document.
I also just want to point out, there is nothing wrong when the event registration will be moved outside of the load scope.
I am trying to create a website with dynamically loaded text, using Knockoutjs, that I want the user to be able to click on and have it copied to their clipboard. For the copy to clipboard functionality I'm using Zclip and I have it working when the text is statically loaded.
In my ViewModel, I have a function copyFunction that looks like this:
self.copyFunction = function(html) {
console.log(html);
$('#copytext').zclip({
path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
copy: function() {
return $('#copytext').text();
}
});
}
This is called anytime one of the items is clicked on the web-page.
And in my HTML I have this sort of content being dynamically generated for each item I have:
<div class="row" data-bind="foreach: itemList">
<div class="col-xs-3 text-center">
<a data-bind="click: $parent.copyFunction, text: text" href="#" id="copytext"></a>
</div>
</div>
I know that my copyFunction isn't correct but I don't know what I need to do to get it working for me. Ideally, I would like to apply the ZClip to the <a> tag that calls it, but I have no clue how to accomplish this.
The only way I've used ZClip before is the most well-known example: setting up an id in your HTML and using a jQuery event handler. However, I can't get that to work either because I'm new to JS and I'm pretty sure that the id isn't fully loaded when my jQuery function is, and thus it doesn't link up to the DOM correctly.
If you could help me gain insight as to how I can get this working I would greatly appreciate it.
Solved my problem by passing in the event as a parameter to the function.
Here is how the function looks now:
self.copyFunction = function(html, event) {
var target = event.target;
$(target).zclip({
path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
copy: function() {
return $(target).text();
}
});
}
An additional quirk I'm having is the Zclip only works when I upload the website to my server, but not from my localhost. Does anybody have a clue as to why this could happen?
Here's what's happening.
My page loads. Then jQuery loads a feed which is injected into a contentCol div...
in that feed is:
Comment
There is also:
<div class="storyItemComments" id="storyItemComments_66" style="display:none;">....
For some reason this is not working:
$(".commentWrite").live("click",function(){
cmt2open = $(this).attr('name');
$("#" + cmt2open).show();
return false;
});
Any ideas? The only thing I can think of is that it has something to do with the fact that I am using jQuery AJAX to load in the content which the LIVE statement above is referencing....
thanks
on most occasions people should use the die() function before the live... so that will clear any previews instructions and that function is only triggered once...
another thing could be that the instructions are called before the contents are retrieved from the ajax. therefore you should use .success to check if the ajax was successfully loaded and then trigger the click instructions.
as it seems that the <div id="storyItemComments_66" has not been picked up from the DOM.
Following from your comment to this answer
Can you try the following instead of show()?
$("#" + cmt2open).attr('display', 'block');
Can you place your javascript inside;
$(document).ready(function(){
//your code here
});
Not sure this will fix it but it's good practice I find.
Also have you alerted out your variables to see what you get?
What is the error you are getting if any?
Have you tried putting an alert at the top of the function to see if the click event works?
edit
let me know if the above does not fix it and I'll remove this answer to clear out the noise
I have a page that has multiple links with various attributes (these attributes will be pulled in from a database):
index.php
<html>
<head>
<script type='text/javascript' src='header.js'></script>
</head>
<body>
My_Link_1
My_Link_2
<div id='my_container'> </div>
</body>
</html>
My header.js file has:
$(document).ready(function(){
$('.link_click').click(function(){
$("#my_container").load("classes/class.project.php", {proj: $(this).attr('id')} );
return false;
});
});
class.project.php is pretty simple:
<?php
echo "<div id='project_container'>project = ".$_POST['proj']." : end project</div>";
?>
This loads and passes the ID variable (which actually comes from a database) to class.project.php. It works fine for the first link click (either link will work). Once one link is clicked no other links with this div class will work. It feels like javascript loads the class.porject.php and it will not refresh it into that #my_container div.
I tried running this as suggested by peterpeiguo on the JQuery Fourm, with the alert box for testing wrapped inside .each:
Copy code
$(document).ready(function() {
$('.link_click').each(function() {
$(this).click(function() {
alert($(this).html());
});
});
});
This seems to work fine for the alert box. But when applying it to .load() it does not reload the page with the new passed variable. As a matter of fact, it doesn't even reload the current page. The link performs no function at that point.
The example site can be viewed here: http://nobletech.net/gl/
I looked at the link you posted, and the problem is that when you're doing load you're replacing the elements on the page with new ones, thus the event handlers don't work anymore.
What you really want to do is target the load. Something like:
$("#project_container").load("classes/class.project.php #project_container", {proj: $(this).attr('projid')} );
This only loads stuff into the proper container, leaving the links and other stuff intact.
Ideally, the php script should only return the stuff you need, not the whole page's markup.
BTW- Caching shouldn't be an issue in this case, since .load uses POST if parameters are passed. You only have to worry about ajax caching with GETs
Sounds like the request is getting cached to me.
Try this:
$.ajaxSetup ({
// Disable caching of AJAX responses */
cache: false
});
Sorry but this might be completely wrong but after examining your XHR response I saw that you are sending back html that replaces your existing elements.
So a quick fix would be to also send the following in your XHR response (your php script should output this also):
<script>
$('.link_click').each(function() {
$(this).click(function() {
alert($(this).html());
});
</script>