Double Click with jQuery - javascript

I'm trying to make my webpage alert text when an element has been double-clicked using jQuery. Here's my JS:
$("#dashboard-acrs-map").dblclick(function () {
alert("asdasdasdasd")
})
And HTML:
<div class="dashboard-acrs-map-div" id="dashboard-acrs-map"></div>
Am I doing something wrong? Because the alert doesn't come up...
Note: It seems to be working UNLESS the element (#dashboard-acrs-map) is created using JS. How can I fix this?

That pretty much has to be your selected element not existing. It is possible that the script runs before the element is loaded. Place the script at the end of the body for example to make sure this is not the case.
$("#dashboard-acrs-map").dblclick(function () {
alert("asdasdasdasd")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dashboard-acrs-map">
Element
</div>
Dynamic element creation example:
document.querySelector("button").onclick = () => {
var element = document.createElement("div");
element.id = "double-click-me"; // Who cares though?
element.textContent = "Double Click Me";
element.ondblclick = () => alert("Double!"); // Hook up double click here.
document.body.appendChild(element);
};
<button>Create Double-Clickable</button>
(Furthermore, i believe that jQuery should never be used.)

Related

How to write callback for newly added element in DOM upon click action in javascript?

I have a button which adds new element to DOM. Now I want to write event listner for click on this new Element. But not able to do so because when page loads this element will not be in DOM. The code I have tried so far is
const initButton = document.querySelector(".wS .amr .amn .ams");
initButton.click() // this will add new element in DOM which will be async action
// now I want to perform following on newly added element
document.querySelector(".fX.aXjCH").setAttribute("style", "display:block");
document.querySelector(".aB.gQ.pE").click();
I need some callback mechanism so that I can execute the later code once the DOM is updated with new component. How can I achieve this? how can I make assure the DOM is updated? or is there any way I can write callback for the first click()?
Have the script tag just before the end body tag
Add readystatechange event like this -
after the append yo can access the newly added markup.
Note: this kind of appending child using in .innerHTML is not safe if the markup is coming from say a Database and can cause XSS unless we sanitize the str.
<body>
<ul id="ul_o">
<button class='wS amr amn ams'>WS </button>
<div class='container'>
</div>
</ul>
<script type='text/javascript'>
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
const initButton = document.querySelector(".wS.amr.amn.ams");
const container = document.querySelector(".container");
initButton.addEventListener('click', function(){
var str = '<p>something here</p>';
var temp = document.createElement('div');
temp.innerHTML = str;
container.appendChild(temp);
const span = document.querySelector("p");
console.log(span);
});
}
}
</script>
</body>

JavaScript, create div with link and then remove by clicking said div

I'm trying to create a vanilla javascript that creates one div or more when clicking on a specific link. When said div has appeared I want to be able to remove it by clicking on that div.
So far I've successfully made it so that a div is created when clicking a link.
The HTML:
<div class="content">
Click me!
<div id="target"></div>
</div>
And the JavaScript:
(function() {
'use strict';
var createTarget = document.getElementById('target');
var link = document.getElementById('create-div');
function createDiv() {
var content = '<div id="clickme"><div class="main"><div class="secondary"></div></div></div>';
createTarget.innerHTML = content;
}
link.addEventListener("click", function() {
createDiv();
});
})();
What I can't figure out is how to remove the div by clicking on it after it has been created? Bear in mind that I am new and trying to learn vanilla JavaScript for now. I know about jQuery and all the other libraries, but I'd rather just learn the basic JavaScript to begin with.
Through the power of Google I've found out about "removeChild" but I am yet to find out how to get it to work on a div by clicking it.
All help is appreciated!
Try this out :
createTarget.addEventListener("click", function() {
var elem = document.getElementById('clickme'); // to get the id of the div that dynamically created
elem.parentElement.removeChild(elem); // function removes specified child node of your specified element.
});
see this working FIDDLE

.removeClass not functioning within .replaceWith

I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
var webform = document.getElementById('block-webform-client-block-18');
var unmarriedbutton = document.getElementById('unmarried');
var buyingblock = document.getElementById('block-block-10');
$(unmarriedbutton).click(function () {
$(buyingblock).fadeOut('slow', function() {
$(this).replaceWith(function () {
$(webform).removeClass('hiddenbox')
});
});
});
});
</script>
The CSS on 'hiddenbox' is nothing more than "display: none.'
There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.
Can someone please tell me where the error is? Thanks!
Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.
The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.
I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:
$(this).replaceWith(function () {
return($(webform).removeClass('hiddenbox'));
});
NB, use jquery !
var webform = $('#block-webform-client-block-18');
var unmarriedbutton = $('#unmarried');
var buyingblock =$('#block-block-10');
unmarriedbutton.click(function () {
buyingblock.fadeOut('slow', function() {
$(this).replaceWith( webform.removeClass('hiddenbox'));
});
});
Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API

Is there a function that gets triggered when an element is rendered?

Is there some sort of on render function in jQuery. I'd like this function to get triggered whenever a new element with the specified class or ID is added on the screen, either on the page load, or after AJAX requests that return HTML.
Edit: I want a callback that fires whenever a new element with the class or ID that I've defined is created. Not when something changes. I'd prefer not to use a plugin.
mmmmm.....
My Advice :
Create a Factory function of Creation of elements .
Every time you want to create an element ,
pass it through a centrelized function WHICH create the element.
She will have prameter of "what to create"
and she will create it.
then , put your code for "after creating element" in the same func
There is a new event for that but as usual it won't work for < IE9:
<head>
<script type="text/javascript">
function AddTextToContainer () {
var textNode = document.createTextNode ("My text");
if (textNode.addEventListener) {
textNode.addEventListener ('DOMNodeInserted', OnNodeInserted, false);
}
var container = document.getElementById ("container");
container.appendChild (textNode);
}
function OnNodeInserted (event) {
var textNode = event.target;
alert ("The text node '" + textNode.data + "' has been added to an element.");
}
</script>
</head>
<body>
<div id="container" style="background-color:#e0d0a0; width:300px; height:100px;"></div>
<br /><br />
<button onclick="AddTextToContainer ();">Add a text node to the container!</button>
</body>
I'm solving it this way:
$('html').change(function() {
$('.element').each(function() {
// Do stuff.
});
});
This way I can have an array that keeps track of all my elements, and when a HTML change is triggered check if there are elements that are not in my array, thus new elements.
$(document).on('DOMSubtreeModified',function(){
// something changed
});
Maybe this works for you but I'm not sure if every browser supports this event.
EDIT: Even this event is deprecated. So you should not use it.
Quick overview about events available:
http://www.quirksmode.org/dom/events/#t18

change the position of div tag dyanmically with javascript

I have an ASP button in a div to the right side of a page. I want to change the position to the left in the same row dynamically with onchange event of a dropdown.
I did this way:
document.getElementById('divButtonGo').style.Paddingleft="80px"
How do I do this with Javascript?
The example you have provided already is javascript. If you want to change what triggers the code to run, change where you place it.
from an onchange event, into a function in a script tag that is called by something else.
example
<input type="button" onclick="movediv()" />
<script>
function movediv(){
document.getElementById('divButtonGo').style.Paddingleft="80px"
}
</script>
There's several things wrong here. In order of increasing importance:
You're missing the closing slash from your i tag.
I don't see a "divButtonGo" in your html. If it's not there at all, obviously it won't work. If it is, include it in your code snippet.
I'm pretty sure to set the style you're going to need elem.style.paddingLeft, not elem.style.Paddingleft
Your script isn't wrapped inside <script> tags. All Javascript has to be wrapped in these tags, and, in order for that code to operate sucessfully, it's going to have to be placed after the "divButtonGo", or you'll have to wire up an onload event, like window.onload = function() { /* Bombs away! */ };
Your final result should look something like...
<div id="divButtonGo">
My Awesome Content
</div>
<script type="text/javascript">
var el = document.getElementById("divButtonGo");
el.style.paddingLeft = "30px";
</script>
Also, to note, padding wont' exactly change the position of the div, only the position of the content inside. If you want to change the position of the div, use margin-left (in JS, element.style.marginLeft, i believe)
EDIT:
I forgot you wanted it in the onchange event of a dropdown; so you'd do somethign like:
var dropdown = document.getElementById("MyDropDown");
dropdown.onchange = function() {
var el = document.getElementById("divButtonGo");
el.style.paddingLeft = "30px";
};

Categories