This function call ResizeableTextbox('myRT'); works well inside javascript(produces a resizeable text box) but doesn't work inside jQuery code.Why?
This produces the resizeable textbox.
<script type="text/javascript">
ResizeableTextbox('myRT');
</script>
But if I give it like this in the jquery code,I dont get the resizeable textbox.
$(".select").change(function () {
$(".select"+increment+" option:selected").each(function ()
{
if($(this).text() =='String')
{
$("<label id=labelid >"+label+"</label>").appendTo(".menu li");
ResizeableTextbox('myRT');//this does not work.How else to code?
}
});
});
Is there any method for function call in jQuery?
Update:
The function call ResizeableTextbox('myRT'); doesn't work anywhere within the jQuery code. It works only inside <script>.
How else to write this function call? some one help me please..
You want to append the resizable textbox to .menu li?
You could do this:
var rt = new ResizeableTextbox('myRT'); //this is for making resizeable text box
$('.menu li').append(rt);
However Im not quite sure if this is what you wan't. Your question is rather vague.
It depends greatly on exactly what 'rt' will contain and how it is then added to the DOM.
If it just contains HTML then obviously $(parentSelector).html(rt) would solve the problem.
If it returns a DOM element then $(rt).appendTo(parentSelector);
If it something else, or is added to the DOM inside your ResizeableTextbox code then I couldn't possibly guess.
Update: If you are using the resizable textbox detailed here: http://www.switchonthecode.com/tutorials/javascript-controls-resizeable-textbox then you would use the following code:
$(document).ready(function() {
var rt = new ResizeableTextbox();
$('#resizable').append(rt.GetContainer());
rt.StartListening();
});
Related
This is the jquery code below:
$('div').on('click', function() {
$(this).toggleClass('show-description');
});
I want to convert it to JavaScript because I get this error message:
"$ is undefined "
when I put the jquery code in the JavaScript section of codepen.io.
Is there a reason the jquery code is producing an error? How can I fix this?
If it is not possible to fix, how can I convert the Jquery code to JavaScript?
I'm trying to use toggleClass on all the divs when the div is clicked.
Here is a link to the codepen for reference: https://codepen.io/sophiesucode/pen/jOExXKw
Option 1: Use should push the jquery lib above </body>, Here is your demo
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Option 2: Use pure javascript like below
document.querySelector('div').onclick = function(){
this.classList.toggle("show-description");
};
$('div').on('click', function() {
$(this).toggleClass('show-description');
});
Can be represented by vanilla javascript as:
var divs = document.querySelectorAll('div'); //Get a list of all div elements
for (const div of divs){ //Loops through every div element
div.onclick = function(e) { //Adds the on click function to each
e.currentTarget.classList.toggle('show-description'); //Defines the function as toggling a class on the element of the click function
}
}
Jquery code actually is javascript. Jquery is a library built for javascript. To solve the error "$ is undefined" you would have to add jquery to your webpage, or import it in your script.
There is this wonderful article on W3 Schools which teaches multiple ways to add jquery to your webpages.
Your code doesn't work because you linked your script path as a relative path.
Change this
<script src="/assets/jquery.js"></script>
into this
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
another way is to link the jquery file using the settings menu in codepen.
Settings > Javascript > then search jquery in the CDNsearch bar
I have such problem:
I have a software which make an order confirmation in .html . I had to figure out how to delate some strings which I do not want to have on confirmation. Because of fact that I have not enough knowledge, I made something like that :
<script type="text/javascript">
document.body.innerHTML=document.body.innerHTML.replace(/<div id="boxik"><div class="nazwa">SZ.*font>/, '');
</script>
Very unprofessional code to remove everything between some div, but it is enough for my solution. It works perfectly in jsfiddle, but not in any browser. Maybe I should load so jquery libary ? I am not sure it is why I am asking for help.
http://jsfiddle.net/LTfyH/79/
Be aware of the fact you're using the id boxik two times. You can only use a id once.
If you want to remove only one element you can use something like:
var el = document.getElementById('boxik');
el.parentNode.removeChild(el);
If you want to remove multiple elements you can select them based on a class for example:
var elementsToRemove = document.querySelectorAll('.remove-me');
A example of both methods:
http://jsfiddle.net/LTfyH/81/
Notice that i added the class remove-me on two elements.
Try to do it in the document onload if you are using pure javascript:
(function () {
document.body.innerHTML=document.body.innerHTML.replace(/<div id="boxik"><div class="nazwa">SZ.*font>/, '');
})();
Or if you are using jQuery:
$(function() {
document.body.innerHTML=document.body.innerHTML.replace(/<div id="boxik"><div class="nazwa">SZ.*font>/, '');
});
I'm trying to load a widget in javascript which creates a HTML table once it has been loaded.
Example:
<td class="foo"><a class="bar" href="http://example.com">Example</a></td>
Inside the table are links where I'd like to remove the href attribute.
So the result looks like this
<td class="foo"><a class="bar">Example</a></td>
I tried the following jQuery:
function myfunction() {
$("td a").each(function(){
if($(this).hasClass("bar")){
$(this).removeAttr("href");
}
});
};
Reference: http://www.tutorialrepublic.com/faq/how-to-remove-clickable-behavior-from-a-disabled-link-using-jquery.php
I tried it also with onload="myFunction()" but that neither worked out.
Why this is not working? Any input is much appreciated!
have you try:
$(window).load(function(){
myFunction();
})
The problem, you're facing is, contents are added after the full document load. You should use .on() method to call your function or to run the script.
$(".widget").on("load", function(){
alert("It was loaded/ load your function/write your code here.");
});
Note, .widget and load are my assumptions. You should better use the correct values or provide your jsfiddle or code here to diagnose the problem if it still exists.
I am trying to understand the difference between JQuery and JavaScript.
And apologies if this is a silly question.
This is my attempt at JQuery. On pressing the button the text in <p> should change as requested. I cannot get this to work.
http://jsfiddle.net/QaHda/7/
this is my JavaScript attempt. I cannot get this to work either
http://jsfiddle.net/aLhb8/1/
Can someone please help me with
my jQuery above to get it working.
my jscript above to get it working.
I was trying to get to a point where I could write my JQuery in such a way that it could be written in javascript. Can anyone help me do this?
Thanks
EDIT
Thanks for all the answers/corrections: what I was looking for part 3 was this enter link description here which basically does part 1 using javaScript,I think. In future I should be careful,using left hand pane, to include Jquery library and to make sure jsript is wrapped in head/body
jQuery
You need to include jQuery library to your page by selecting a jQuery version in the first dropdown in the left panel
Demo: Fiddle
JS Sample
The problem is since your function is defined within the onload callback, it was not available in the global scope causing an error saying
Uncaught ReferenceError: myFunction is not defined
The solution is to add the script to the body elements, instead of inside the onload callback by selecting No Wrap - in <body> in the second dropdown in the left panel
function myFunction()
{
alert("Hello World!");
}
Demo: Fiddle
jQuery is library of javascript function and you need to add jquery file in html file that y jquery function was not working and for javacript function you need to change the setting in jfiddele left to no-wrap in head
http://jsfiddle.net/aLhb8/1/
http://jsfiddle.net/hushme/QaHda/10/
here is code
$("button").on("click", function () {
$("p").text("this text will now appear!!")
});
If you have internet connection, This should work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function() {
$('button').click(function() {
alert("This is a simple alert message");
});
});
But if don't then just download the jquery framework and include into your page
Hope it helps and anyway jquery is a framework of javascript, so they are both or they are the same. Don't confuse yourself.
Here is a JavaScript version - http://jsfiddle.net/aLhb8/4/
JavaScript
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
alert(myButton.textContent);
});
Check this link out if you want to start learning more about JavaScript - http://javascriptissexy.com/how-to-learn-javascript-properly/
For the pure JS code, on the top left panel, select 'No wrap - in body'. This will make your code run without a problem.
In the jQuery code, make sure you've selected the jQuery library, as opposed to pure JS. You hadn't selected this before, so your code was invalid.
I need to write a user defined function using jQuery to swap two div tags within the page. I created the function but it is not swapping them as desired. In fact, when I move the same code inline it works fine. Is there something I am missing?
It is impossible to debug something that I cannot see, but I wrote a "swapper function" for you:
function swapem($el1, $el2) {
var $t=$el2.clone().insertAfter($el1);
$el1.insertAfter($el2);
$el2.remove();
}
$('#swapper').click(function () {
swapem($('#div1'), $('#div2'));
});
jsFiddle Demo