Develop Reference

Get content of h1 from external page with jquery load()

I have a mediawiki where I would like to get the content from into another page. So I have:
http://bourlo.net/wiki/index.php/Lunet
And would like to display parts of this in a bootstrap modal on another page:
http://bourlo.net/stack/
The heading of the wiki page is retrieved by:
$("#wikiModal h4.modal-title")
.load( "http://bourlo.net/wiki/index.php/Lunet .firstHeading");
That works, yeah! But I don't want the complete
<h1 id="firstHeading" class="firstHeading" lang="nl-informal">Lunet</h1>
In the <h4> from the modal, but only the content >>> Lunet
How can I do this?

You need to use other ajax method instead. For the example:
$.get("http://bourlo.net/wiki/index.php/Lunet", function(html){
var txt = $(html).find('.firstHeading').text();
$("#wikiModal h4.modal-title").text(txt);
});

So you want to extract the text only from your ajax returned text:
$.get( "http://bourlo.net/wiki/index.php/Lunet", function(html){
$("#wikiModal h4.modal-title").text( $(html).find('.firstHeading').text() );
});
That's because you with .load(), you cannot manipulate the responseText before inserting into the DOM. Let's acknowledge that you can actually do something like this:
$h4 = $("#wikiModal h4.modal-title")
$h4
.load( "http://bourlo.net/wiki/index.php/Lunet #firstHeading", function(){
$h4.find('#firstHeading').replaceWith(function(){
return $(this).text();
});
});
This is definitely more clumsy. But I bothered to put this out because, once in a while, you're constrained to use the .load version instead of the .get version by factors beyond your control.

Use Jquery with the div of a data result of a post ajax

I have this post code in a one.jsp
$.post("<%=request.getContextPath()%>/two.jsp", {
vaedre: fullDate}
,function(result){
$("#theresult").append(result);
});
And it generate in one.jsp:
<div id="theresult">
<div id="kily"></div>
</div>
If I try to use this jquery code, that is in one.jsp it doesnt work:
$('#kily').click(function() {
alert("this is a test");
});
I think that is beacuse the div kily is in two.jsp but not in one.jsp altought it seems to be in one.jsp after the append.
Any help?
Thanks!!

Either us
. $(document)on('click', '#kily', function(){});
or create your click event after you append the element

How to load a html file's content into javascript variable in django?

I'd like to insert contents of abc.html after a div when some event fires.
I tried
var content = {% include "path/to/abc.html" %};
$(".myDiv").click(function() {
$("#anotherDiv").insertAfter(content);
});
However, it seems `{% include %} fails because of some sort of parsing error. (abc.html is multi-line)
abc.html contains django filters/tags.
any thoughts?

One alternative approach would be to put the contents into a hidden div, and just get your click function to unhide it.

If abc.html is pure html, then you could do a simple ajax request to load the file, e.g.
$(".myDiv").click(function() {
$.get('path/to/abc.html', {}, function(content) {
$(content).insertAfter("#anotherDiv");
});
});
Although if you're worried about loadtime, you could load it earlier into a variable.
Let me know if the code makes sense or if you have any questions :)

How to .load() just a specific div from a page into a a target div, not the whole page

I have the following script that loads a page into a div and not just the targeted div. This is most evident when going back to my index and my header and footer are jammed into the <div id="contentspace"></div>.
I read on here somewhere that the div needs to be placed in it's own page prior to being displayed. Not sure which method would do that. Is this possible without hashtags Thanks for your help
<script type="text/javascript">
$(function() {
$('#header a').click(function() {
$('#contentspace').empty();
$("#contentspace").load(this.href, function(response){
console.log($('#content', response).html())
event.preventDefault();
});
});
});
</script>

The method .load() can load page fragment, simply by specifying a valid jquery selector next to the url.
$('myelement').load('page.html #content', function() {
...
});
Note that when loading page fragments, jquery will remove any SCRIPT element it might contain.
In you example, you would do:
$("#contentspace").load(this.href + ' #content', function(response){
...
});

Did you read the documentation at all? Take a look at the section titled Loading page fragments in the jQuery API for .load(). Essentially you just pass a selector along with the URL of the page to load as the first argument of the method.

Jquery load function that will append onto HTML already present

I am trying to make an AJAX call which will append html i.e. add additional html to what is already present between the tags. Here is what my load function looks like.
<script>
$(document).ready(function(){
$(".tid-select").change(function(){
$(".tid-list").load("/saffron_main/test");
});
});
</script>
How would I modify this function in order to get it to append to the class .tid-list. Thanks in advance.

You have to get data via ajax and use $('.tid-list').append(data);
<script>
$(document).ready(function(){
$(".tid-select").change(function(){
$.get("/saffron_main/test",function(data){
$('.tid-list').append(data);
});
});
});
</script>
You may also use $('.tid-list').prepend(data); to insert before the current HTML.

Or instead of replacing the html you can just load the data into a variable and then add it to the DOM.
Example:
$.ajax({
url: '/saffron_main/test',
success: function (data) {
$('.tid-list').append(data);
}
});
This way events that have been bound to the existing html will stay bound.

Just change the change handler
$(".tid-select").change(function(){
$.get("/saffron_main/test", function(data){
$(".tid-list").append(data);
});
});
edit: yeah, the other guys are right that append makes more sense