Set ID with Jquery getScript - javascript

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.

Related

jQuery selector for ajax loaded content

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

Why the append body divs are removed while i used getElementById Removed Script for other ID

javascript experts,
i have this script in my template to load some html divs.
$(document).ready(function() {
$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft">'
+ $("#showlink").html()
+ '</div><div id="wrapright">This is text display by append</div></div></div>');
});
Now what problem i got
Now whenever i used to remove any other ID by getelemebyID script in a template then the above html all divs like wrap,inner-wrapp etc becomes completely removed. why it happened ?
Example i used the below script to remove some other IDs. but it also reflect that append body html div ids removed too. why as you see i set only slider id to remove which is not in that append body. but it reflect that append body html divs too. why ?
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
document.getElementById("slider").remove();
})
//]]>
</script>
working/showing the append divs when there is no "getelementbyid removed" script used for any Id: https://jsfiddle.net/83fbnwe4/15/
not working/not show the append divs when i set "getelementbyid removed" for any other iD: https://jsfiddle.net/83fbnwe4/18/
Please could you tell me why it happened. Why it reflect also the append html divs, since i only set #slider to removed, not that append bodys htmls.
Your issue is you are attempting to call the jQuery remove method on a standard DOM element. The remove method only works on jQuery objects. You really want to do this:
$(document).ready(function() {
$("#slider").remove();
});
If you do not want to use jQuery to remove the element, you can do this:
var element = document.getElementById("slider");
element.parentNode.removeChild(element);
This is how Javascript works. You cannot remove elements directly, you need to go to its parent and then use the removeChild method to remove an element. This is why jQuery uses this approach behind the scenes and makes it look a lot easier than it actually is.
In the newer versions of the Javascript specification, remove is an added method. However, it is still best practice to use the above approach or a polyfill (which uses this same approach) because Safari mobile does not support it, and none of the IE's (only Edge) supports it as well.

jQuery, Html element form external file to string in jquery, how?

I am working on a project where i need to get a specific element from an external html file as a string in my jQuery.
As i understand the .get(); function cannot get a specific element (by class or ID) and the .load() can, but loads it directly into the dom of the file.
Is there another function or a way to go about this?
What i need to do is get a specific html element and replace some macros in it with data from an object and then append it to an element (multiple times.) Therefore i cannot just load it in and replace the macros afterwards.
You can .get it and then only subselect.
$.get('myfile.html', function(response) {
var inside = $(response).find('#inner-id');
// do stuff with inside...
});

Linking a Jquery/html variable to javascript

What I'm trying to do, is I have an HTML textbox, that I want to grab what is entered in, and use it as a variable in my javascript file, do I use jquery or is there a way to just access whatever text is entered directly in the javascript code?
In your HTML, give the input element an id like so:
<input type="text" id="myText">
Then in your javascript, to get the value, use:
var text = document.getElementById("myText").value;
This answer uses vanilla JavaScript rather than jQuery.
You can use jQuery for this. You should give an id to your HTML element or you can call it with its type. Create a variable, select the HTML element with jQuery selector and use val() method to grab its value:
var input = $('selector').val() ;
If you decide to use jQuery don't forget to add the jQuery library in your HTML's head tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
You can also look at val(), html(), and text() (to set a new value) methods in jQuery web page.

Define variable before javascript load

I noticed that you can't import a javascript file and define a variable in the same <script>.
This is my problem:
<script type="text/javascript" src="js.js">
var id = "587587";
</script>
Is there a way to load the javascript after the variable without using another <script> tag?
If a script tag has a src attribute, anything between the script tags is ignored. The only way you could do something like this is by dynamically adding a new script tag with an ugly hack like this.
<script type="text/javascript">
var id = "587587";
document.write('<script type="text/javascript" src="js.js"><\/script>');
</script>
Using another script tag before the one with the id would certainly be the preferable and shorter solution.
src
This attribute specifies the URI of an external script; this can be
used as an alternative to embedding a script directly within a
document. script elements with an src attribute specified should not
have a script embedded within its tags.
http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script.html
So, you either have an external script, or you have something inside the <script> tag. You shouldn't have both at once; I'm not sure whether this actually does anything or not.
Use a second script tag.
A script element must either contain script code between the script start and end tags, or reference external script code via the src= attribute. It cannot do both. However, your external code can reference the details of your HTML via the DOM (Document Object Model). So you can treat any HTML element (e.g. a text input field) as a parameter to be passed to your external javascript, where it can be read by e.g. var param = document.getElementById('param').innerHTML;

Categories

Resources