I using .load() function to load content from another page. My page is http://example.org/mypage.htmland contains this jQuery:
$(".content").load("http://example.org/12333.html .data");
How I can get this URL http://example.org/12333.html dynamically from another page: http://example.org/static.html to my jQuery code?
My static.html looks like:
<div class="link">
Link
</div>
You can use this id "target" for another page.
$("#b" ).load( "article.html #target");
Related
How can I get html-code of a webpage from an angular directive?
in my example I have an html code:
<div class="modal-body" data-ng-bind-html="myHTML">
</div>
I want to place inside the div the content of another page! In my directive I do something like:
$rootScope.myHTML = link;
Where link should contains the whole html of the page! If myHtml="http://www.google.com", how can I retrieve the content of 'link'?
It sounds like you really just want to apply the external site inside your view, and then you should just link it in an iframe.
<iframe src="http://www.google.com"></iframe>
you can directly insert all the html of directive in html it self only. In your parent html you can insert directive.html like
<directive></directive>
I need to modify content loaded via ajax, but can't seem to access it. I don't have access to the js file that is doing the initial load so I need to write a separate function to change the content.
The content needs to be modified automatically WITHOUT the user clicking or interacting with anything on the page.
In the example below the 'news' div is hard coded and the 'article' divs are loaded via ajax.
HTML
<div id="news">
<div class="article"><img src="headline1_small.jpg">
<div class="article"><img src="headline2_small.jpg">
<div class="article"><img src="headline3_small.jpg">
</div>
jQuery
$(document).ready(function() {
console.log( $("#news").html() );
});
Console
<div id="news">
</div>
How can I access the articles? I want to remove '_small' from the img src.
Thanks!
This should work:
$(document).ajaxStop(function() {
$("#news").find('img').attr("src", function(_, src){
return src.replace('_small', '');
});
});
How can I access the articles? I want to remove '_small' from the img src.
For example like this:
$('#news .article img').attr('src', function() {
return this.src.replace('_small', '');
});
You can execute this code on AJAX successful completion
$(document).ajaxSuccess(function() {
// above code
});
You said the article divs are loaded through AJAX, seems that this script is running before they are loaded. Try putting this script after #news so all the content is already loaded when it is executed.
<div id="news">
<div class="article"><img src="headline1_small.jpg">
<div class="article"><img src="headline2_small.jpg">
<div class="article"><img src="headline3_small.jpg">
</div>
<script>
$(document).ready(function() {
console.log( $("#news").html() );
});
</script>
To remove "_small" from src of the img tag, there is another way for that. you dont need to get access to the html() -> innerHTML of the #news div.
all you could do is get hold of the all the ".article" div's and then alter the img tag.
$(".article img").each(function() {
$(this).attr('src', $(this).attr('src').replace("_small", ""));
});
Thanks
I have a link (A link), which dynamically creates some html content into the page by a js file placed in the head content. This works well.
<head>
<script src="my.js">
</head>
<body>
<div>
<a href="A link">
</div>
</body>
Than clicked the A link, and this is created:
<div>
<a href="B link">
</div>
The newly created html content also contains a link (B link), which should use the same js file, as used before, but it seems, that the B link cannot see it, however the js file is still in the header content.
Works only if I put the js file in a script tag to the end of the dynamically created html content generated by A link, like this.
<div>
<a href="B link">
<script src="my.js">
</div>
But this means I load this js file twice. What am I missing here?
Thanks.
If you want the newly created element to perform some action then you should use this technique using jquery.
$(document).on('click', '.linkclass', function()
{
// Perform your action here.
alert('I was clicked');
});
live of Jquery is now obselete and is better to use on. In this way your all newly created element or already created elements having class as .linkclass will perform alert(); action. Hope it helps.
I want to dynamically load content using jquery's .load() function. Im storing the links in the .rel attribute of the links. I've got it setup like this:
<script>
$(document).ready(function(){
$('.sidebar_link').click(function(){
var link = this.attr('rel');
event.preventDefault();
$('#content').empty();
$('#content').load(link '#content');
});
});
</script>
<div class="main_menu">
<a class="sidebar_link" href="#" rel="photos.htm">Photography</a>
<a class="sidebar_link" href="#" rel="furniture.htm">Furniture</a>
<a class="sidebar_link" href="#" rel="services.htm">Services</a>
</div>
</div>
Its not working - It doesn't seem to be grabbing the link out of the rel attribute and Im not sure why. Any ideas?
Try this:
var link = $(this).attr('rel');
.attr is not a native JavaScript function, it is from jQuery so you have to wrap this with jQuery
And this:
$('#content').load(link);
You can pass an id for loading fragments, however the url and the id need to be a string literal like so $('#content').load('photos.htm #content') The photos.htm page would need to have an element on the page with id content. If you just want to display the entire contents of the page, just use the url.
In your click handler this is a pure dom element; you need to call the jQuery function on it before accessing the rel attribue
$('#content').load($(this).attr("rel"));
$('#content').load(link '#content');
This is almost certainly throwing a syntax error -- check your JavaScript console. I think you just want .load(link);.
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("#results").load( "jquery-routing.php", { pageNo: $(this).text(), sortBy: $("#sortBy").val()} );
return false;
});
});
</script>
<div id="results"> </div>
1
2
that code works fine, only problem that after I run it all my a href links stop to work! The links become jquery ajax calls.. why?
You're $("a") selector matches all <a ...> tags, you need to change it to something more specific:
$("a#someid")
$("a.someclass")
$("div#somecontainer a")
To target specific links, use the id or class tag on your anchor tags.
E.g.
<a class="link1" href=""></a>
<a id="link2" href-""></a>
Do note that id tags are unique within a page and can only be used once.
Reference those links in jQuery using:
$('a.link1').click(function() {}
$('#link2').click(function() {}
or you can combine both:
$('a.link1, #link2').click(function() {}
What you need to do is assign an id or class tag to the link that will call the ajax request. E.g. <a class="ajax" href="">ajax</a> and referencing it with $('a.ajax').click(function () {}
Your setting the onclick event of all anchor tags on the page. Try only selecting the link that you want instead of the more general $("a")
Your selector $("a") indicates all the hiperlink in your page.
You may need to give a specific id to the hiperlink where you want your ajax call to work and then change the selector based on that.
ex:
<a id= "my-link" href="" >ddd</a>
$("a#my-link").click()