i've got a slight jQuery problem.
What i want is to load a particular area of an external html doc into a div,
instead it loads the whole document, not the specified area.
This is the trigger:
$('a').click(function(){ // my link to trigger the load
var pid = $(this).attr('href'); //the pid is the links href
getproject(pid); //trigger the load function, pass variable
});
This is the triggered function:
function getproject(pid) {
$('#container').load('data.html', pid);
}
So when i click my link, it should load the element with the id (#) specified by the link into my container, but it loads the whole data... i cant seem to find a solution to this.
The Link looks like this (cant use exact markup here):
a href="#elementtoload"
The data document looks like this:
div id="elementtoload"
div id="..."
and loads of more elements with content, which should be loaded by id from the links href.
Looking at the documentation for $ load, you should be able to do this:
function getproject(pid) {
$('#container').load('data.html #' + pid);
}
http://api.jquery.com/load/
Second section, Loading Page Fragments. For us to say exactly how this is relevant, you'd need to provide an example of the triggering link, and ideally the document you're loading.
Not sure what your actual intent is but it seems to me that you are going to alot of trouble to get the pid but then not using it in your load routine. I'm guessing the code should look more like this:
function getproject(pid) {
$(pid).hide().load('data.html');
}
String concatenation:
.load('data.html ' + pid);
Regarding your update:
<div id="#elementtoload"> should be <div id="elementtoload">
I was trying something similar and after some hours (...) michael came finally with something that works :) this did the trick for me, the # should be in the url string, like this:
$('#div1').load('data.html #' + x);
Related
Im after an answer as to why this does this more than a solution.
Why will this include the script tags that load js files within the page being loaded..
$(document).ready(function(){
$("#nav ul li label").on("click", function(){
var a = $(this).attr("id");
$("#mainCalcHolder").load(a + ".php");
});
});
and this not include the script tags that load js files that are purposely inside the "getMe" div?
$(document).ready(function(){
$("#nav ul li label").on("click", function(){
var a = $(this).attr("id");
$("#mainCalcHolder").load(a + ".php #getMe");
});
});
If anyone could give me a brief explanation I'd appreciate it
I think your problem is the space between .php and #getMe. Try removing it:
$("#mainCalcHolder").load(a + ".php#getMe");
EDIT: as specified in the comments, removing the space loads the whole page instead of just the fragment, so the code snippet is equivalent to not specifying the #getMe part at all.
The reason why it wasn't working for you before is that your content consists of a script, which is stripped when loading a fragment (as specified in the documentation) but is executed when loading the full page.
load accepts three parameters (doc), the first one is the url to load. in your second case you are passing a wrong parameter: a + ".php #getMe", which is a url, followed by a space (which is invalid in a url) followed by an identifier. Not sure what is the purpose of the #getMe div
I have a page that i dont have access to its an obvius site. I would like to remove a script html tag with a content. For now i have this but is not working. I am using userscripts like coding!
function main(){
var def = $('script[type="text/javascript"]').html();
$('script[type="text/javascript"]').each(function() {
if (def == 'document.write("<scr"+"ipt type=\'text/javascript\' src=\'http://storing.com/javascripts/"+(new Date()).getTime()+"/3e155555e1b26c2d1ced0f645e_1_1.js\'></scr"+"ipt>")')
$('script[type="text/javascript"]').remove();
}
}
UPDATE:
<script type="text/javascript">document.write("<scr"+"ipt type='text/javascript' src='http://somedomain.com/javascripts/"+(new Date()).getTime()+"/3e1a0cd37f25a6e1b26c2d1ced0f645e_1_1.js'></scr"+"ipt>")</script>
This is the whole script what i want to remove... it inserts a div that i am removing right now i just wanted to know if there is any other method. BUt as i see the only is the hosts file thing :)
I don't believe this will work, since a loaded script will already have run.
That said, you probably want something like this:
$('script').each(function() {
if (this.src.substring(0, 31) === 'http://storing.com/javascripts/') {
$(this).remove();
}
});
It's impossible to match the <script> tag based on the output of .html() because that only returns the contents of the element, and not the outer <script> element nor the element's attributes.
When a script is loaded in a page, it is evaluated and executed by the browser immediately after. After the script has been executed, the content of the script tag is irrelevant.
You might be able to achieve what you want by unbinding the events which might have been loaded by the script. Are there any events you want to disable?
If the script is in a certain domain and you want to block all traffic to it, you could add the following entry to your hosts file:
127.0.0.1 storing.com
This will prevent the request to reach it's destination.
Not sure I titled this well.. show's that I'm in unfamiliar territory. How can I run a JavaScript function based off of the element called in a jQuery function?
Theory:
<script type="text/javascript">
$.fillit('video');
</script>
(run fillit on video tag present in page.. interchangable with other elements)
$.fillit = function(){
this is where it says "run on the tag defined in the jQuery function"
}):
$.fn.extend({
fillit : function(){...}
});
then...
$('.video').fillit();
Edit (after comments)
To fill a dom element with other elements/html:
var img = document.createElement('img');
img.setAttribute('src', 'somesrc.jpg');
$('.video').append(img);
or
$('.video').html('<img src="somesrc.jpg"/>');
You can do it the way you described like so
<script type="text/javascript" language="javascript">
$.fillit = function(content)
{
$("result").html(content);
}
//call function
$.fillit("HELLO WORLD");
</script>
or as Alexander just posted if you want to do it on the selected element.
I don't think adding functions directly to jquery with $.func = is a good idea though. If jQuery ever adds a fillit method your method will conflict with theirs.
technopeasant, it sounds like you are using a jquery plugin (in your example, a plugin called 'fillit') and it is asking you to run the plugin on a tag or series of tags. Sorry if I misunderstood your question.
If that is the case, all you need to do is one of two things. If you are trying to run it on a very specific element in the HTML page (one with an id like <div id="myvideo"></div>) then all you need to do is run:
$('#myvideo').fillit();
//Notice the '#' symbol, that looks up the element with an id of 'myvideo'
If you want to run the plugin on a series of elements (like all <p> tags in the entire document, you'd run something like:
$('p').fillit()
//notice no '#', it's just looking up all <p> tags regardless of ID.
Take a look at the jQuery documentation regarding selectors to get a more concrete idea of how these selectors work:
http://docs.jquery.com/How_jQuery_Works
Someone answered with a link to this: http://docs.jquery.com/Plugins/Authoring
exactly what I was looking for. claim your kudos!
(function( $ ){
$.fn.fillit = function() {
this.fadeIn('normal', function(){
var container = $("<div />").attr("id", "filled")
.appendTo(container);
});
};
})( jQuery );
I am coding a big website but I have cut down my problem into the following tiny html file:
http://dl.dropbox.com/u/3224566/test.html
The problem is that if I (re)load with JQuery a content that features a facebook code, the latter won't appear, even if I reload the script (leading to a duplication of that all.js script, which is another issue).
How can I fix this?
Regards,
Quentin
Use the FB.XFBML.parse() docs after you load the new content
function loadPage() {
$('#test').load('test.html #test', function() {
FB.XFBML.parse( );
}).fadeOut('slow').fadeIn('slow');
}
Note, that loading a fragment with id test in a div with id test will create multiple (two) elements with the same id (nested in each other) in the page, which should never happen as it is invalid.
To avoid this use the more verbose $.get method
$.get('test.html',
function(data) {
var temp = $('<div>').html(data).find('#test');
$('#test').html(temp.html());
}
);
I am working on a pure jquery/js site, mostly to practice some jquery. I am using a load statement to load a menu from a file of common html, like so:
$('#categoryListing').load('../common.html #categoryLinksUL');
which loads:
<ul id="categoryLinksUL">
<li>Anklets</li>
<li>Bracelets</li>
</ul>
The problem is where I am using it now I need to alter the href of the above links, but they are not part of the dom. In previous instances I was able to use .live(click... But not here. Is there a way I can accomplish this?
Specifically I need to load the links and change the href from #anklets to ?category=anklets
What about the following?
$('#categoryListing').load('../common.html #categoryLinksUL', function() {
$('li a[href^="#"']').each(function () {
this.href = '?category=' + this.href.substr(1);
});
});
In my example, after the load is completed, the anonymous function is called. It takes every anchor with a hash HREF and replaces it with an HREF based on your description.
Thank you Dimitry, you solution basically worked. I finally used:
$('#categoryListing').load('../common.html #categoryLinksUL', function() {
$('#categoryListing li a').each(function () {
var hashPos=this.href.indexOf("#");
var tCategory = this.href.substr(hashPos+1,this.href.length );
});
});
So why did jQuery recognize categoryListing there? I tried moving the each function outside of the load function and categoryListing did not contain any links. Is it because maybe the load was not completed when it tried to get categoryListing links? Seems like that is possible.
Thanks,
Todd