jQuery selector for ajax loaded content - javascript

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);
});

Related

Set ID with Jquery getScript

I need to add this script with Jquery getScript, how can I add the attribute ID?
$.getScript('https://cdn.asksuite.com/infochat.js?dataConfig=https://control.asksuite.com/api/companies/hotel-latitud-buzios', function () {
ID --> How to add this
});
Script:
<script id="script-infochat" src='https://cdn.asksuite.com/infochat.js?dataConfig=https://control.asksuite.com/api/companies/hotel-latitud-buzios'></script>
getScript has no feature that makes that possible.
Instead, create the script element using the traditional way ($('<script></script>', attributeObject) and append it to your document.
If you have control over the script you are importing, consider using currentScript instead of depending on specific IDs.

How to select dynamically added elements with Jquery

I'm loading some html using jQuery function .load() and everything works fine. The problem is that I need to select some of the dynamic created elements to apply some styles with JS. For example:
$(".new-element-class").datepicker();
I know that dynamically added elements are not part of DOM and that I can trigger events this way:
$("body").on("click", ".new-element-class", function() {});
I have read a lot of answers with that solution but that's not what I need. I want to select and apply a function without having to wait for an event. I also tried find() and it didn't work.
You need to call .datepicker() in the code that adds the new element dynamically. You can do this in the callback function of .load()
$("#element").load("url", function() {
$(this).find(".new-element-class").datepicker();
});

Trying to add an image using jQuery .load method

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

How to remove this HTML?

I'd like to remove the following HTML:
Buy It
This HTML is added dynamically (not by me).
How is this done in jquery? Or is it better done in AngularJS?
i would solve this by using css..
.css-button {display: none !important} 
since it is added dynamically you would need a trigger function or search repedetly for that special container -> slows down the page
//EDIT with jQuery if necessary
if you really want to do it with jquery, is it always a certain container where the button appears? you could do something like this:
function removeButton() {
$('.css-button').remove();
}
// Listen DOM changes
$('.theContainer').bind("DOMSubtreeModified", removeButton);
see here: http://davidwalsh.name/dom-events-javascript
You can use .remove():
$('.css-button').remove();
In this case you should use :contains to find the button, keep in mind that is a string search:
$( "a:contains('Buy It')" ).remove()

Is there a way to allow document.write after document.ready?

I tried to redefine the document.ready function to capture what should have been written after document.ready
$(document).ready(function(){
document.write = function(html){
//... do something with HTML
};
});
I do have the HTML now which should be rendered, but I don't know where it should belong to.
Is there a way to find out which script called the document.write function (in order to place the HTML code in the right place)?
You don't need to use document.write in this situation. You use a jquery selector and the .html() method (or .append() or similar) to place content inside an element.
For example, if you had a div with the class container
var content = '<p>Some content</p>';
$('div.container').html(content);
this code would replace the contents of the container with the value of content. You'll notice that CSS style selectors are used for selecting elements, so to select the entire body you can use
$('body')
or for all text inputs, you can use
$('input[type="text"]')
.html() will replace the entire innner content, and .append() will add to the element after the other content.

Categories

Resources