I am trying to load an image called 'mole' using jQuery .load method, however I am not sure if this is the correct method or if there was just a syntax error. Thank you very much for any feedback.
<script>
$(document).ready( function() {
$('#mole').load(<img id="mole" src="img/mole.jpg" />);
});
</script>
load is an shorthand for an AJAX GET that immediately gets appended to the target element. All you wanted to do is add an image to #mole. No AJAX needed here.
$('<img id="mole" src="img/mole.jpg" />').appendTo('#mole');
.load() is suitable for loading HTML from the server asynchronously and inserts it into the matched element. While you could use this method, it seems that using .append() or .html() would be more applicable for this situation.
$('#mole').append('<img id="mole" src="img/mole.jpg" />')
OR
$('#mole').html('<img id="mole" src="img/mole.jpg" />')
Note that using .html() will replace all of the HTML that is within #mole while .append() will simply append to the end of whatever is already in there.
.load()
Load data from the server and place the returned HTML into the matched element.
Source : jQuery API Documentation
I think a simple append() is more suitable for your purposes.
$("#mole").append('<img id="mole" src="img/mole.jpg" />');
Note
It seems like you already have a #mole element on your page, you should not insert a new one with the same ID. The ID property should be unique.
Fiddle
Related
I have this HTML tag:
(show comments)
I would like to change its href. I am triying with jquery but It does not works:
$('a[href="show_comments.php?id=6"]').attr('href', 'xyz.php');
I also tried with querySelectorAll:
document.querySelectorAll("a[href='show_comments.php?id=6']").setAttrtibute('href','xyz.php');
UPDATE:
It was a timing problem. Using $( document ).ready(function() {}); both solutions works.
Why these solutions don't work? I would like to do it without jQuery but any solution is appreciated.
Try adding an id to this element and then selecting this id in jQuery or by play JS
Let's assume that the tag has an id called changeUrl
$("#changeUrl").attr('href', 'xyz.php');
or
document.querySelector("#changeUrl").setAttrtibute('href','xyz.php');
You'll have to do it individually on every node when you're using querySelectorAll because it returns you a NodeList which doesn't have setAttribute method. Only nodes have that method:
document.querySelectorAll("a[href='show_comments.php?id=6']").forEach(node => node.setAttrtibute('href','xyz.php'))
EDIT: If you have just a single node, use document.querySelector
document.querySelector("a[href='show_comments.php?id=6']").setAttrtibute('href','xyz.php')
Load your JS just before </body> to ensure JS has access to complete DOM
SOLVED:
It was a timing problem. Using $( document ).ready(function() {}); both solutions work.
The issue was that it is a CSRF attack, so html have to be loaded to attack successfully (the tag I wanted to change was loaded after the JS script).
I have used this library:
http://www.jacklmoore.com/autosize/
and in order to use it I should use syntax like below:
autosize($('textarea#description'));
or any other javascript selector.
But my textarea loaded by ajax and it is not working.
Is there any other selector that works with ajax elements?
Thank you
Just wrap the jquery selector around it and use .find() to narrow it down.
$.ajax({...}).done(function(responseHTML){
// depending on what the function is doing you may need to append it to the body first.
$(responseHTML).appendTo('body'); // or wherever you want to put it
$textarea = $(responseHTML).find('#description');
autosize($textarea);
});
I have form with id push-message-form and ajax call to server returns new form html to replace with. push-message-form id set on form itself, like:
<form id='push-message-form'>form content</form>
and ajax response html looks same.
From jQuery docs I understood that: html() will replaces the contents of the element, while replaceWith() replaces the actual element.
http://api.jquery.com/html/
http://api.jquery.com/replaceWith/
But I'm using
$('#push-message-form').html('<form id='push-message-form'>content</form>')
and it replaces form itself (whilst it should add another form inside current one).
The question is why html() works as replaceWith() in this case?
Update
Some answers suggests use append, sorry if it's not clear. But I don't want to append. I want to replace form with new one returned from server (keeping it's id), and replaceWith() does work just fine.
The question is why html() works too here. Since it should replace only content, but it replaces tag too.
You should be using .append() to add content to the container calling .html() is going to replace whatever is inside that container with the value you enter:
Also you're trying to append the form with the same id so you should use a class or change the id name
This:
$('#push-message-form').append('<form class="push-message-form">content</form>')
Instead of this:
$('#push-message-form').html('<form id='push-message-form'>content</form>')
.html() acutally clears the HTML inside the element & then places your new HTML in it. While you need .append() to actually make you new HTML added in the Current HTML
$('#push-message-form').append('<form id='new-form-id'>content</form>')
I wonder if anyone knows what exactly .load() method does with data it retrieved from url?
Does it replace the target selector content with data retrieved?
OR append that data to the target selector?
Still, it seems to me that .load() method replaces (overrides) the content of the target element...
The documentation is a bit blurry:
Description: Load data from the server and place the returned HTML into the matched element.
OR
.load() sets the HTML contents of the matched element to the returned data.
It replaces the content. Agreed the documentation could be clearer, although if it were appending I'd expect that to be explicit.
Essentially, and ignoring some details, this:
$("selector").load(url);
is effectively this:
$.get(url, function(html) {
$("selector").html(html);
});
It's a bit more complex if you tell jQuery you only want to load a fragment of the returned HTML.
yes it replaces..
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as , , or elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
I'm working on a program that needs to load two sprite images. I'm now using a different implementation, but I first had:
$(sprite1 && sprite2).load(function() {
// code to run on load
});
I realize that I was actually calling load() on a bool, which in theory doesn't seem to me like it should it should work - but it did, or at least seemed to.
Any thoughts on why using load() this way works?
According to docs. Jquery Load()
If no element is matched by the selector — in this case, if the
document does not contain an element with id="result" — the Ajax
request will not be sent.
So Your load method will not call an ajax request.
.load() sets the HTML contents of the matched element to the returned data.
.load()
Description: Load data from the server and place the returned HTML into the matched element.