I'm new on Browser Extension dev.
I'm trying to do some easy stuff, but I don't really know why doens't work.
What is the problem? I can't manipulate DOM of my popup.html file.
Here an example:
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</head>
<body id="content">
<p> Hello world </p>
<button id="go" />
</body>
</html>
And here my very simple main.js file:
$(document).ready(function() {
$('#go').click( function(){
$( "#content" ).empty();
alert("Done");
});
});
After click, the content of my Body seems doesn't disappear, but if I put an alert, I can see that my code work (when the alert show). But after click() event (when I close the alert), the popup file it's restored and paragraph is still here.
So, what I'm doing wrong? Can I manipulate the DOM of my popup file? Or my JS code need fix?
I've made some tests, and I notice that any event, any data and any action die after click() event.
I've also try
location.href = "other_page.html";
the redirect work, but as I said after click I return in popup.html file.
Thanks, I'm here for more specification
I had the same problem....
I think Edge doesn't like jquery click() function.
Try with this:
document.getElementById("logout").addEventListener("click", function() {
$( "#content" ).empty();
alert("Done");
}
I've solved in this way :)
Related
I know IE9 is kind of old now, but it is the lowest version of IE that I still must support in a Web application I'm building.
Anyway, while doing some DOM manipulation and testing in different browsers, I noticed that IE9 was doing something very strange. I had a <script> block in a DIV element, and when I deep-cloned that DIV element using Node.cloneNode(true), and attached the clone to the document somewhere using document.body.appendChild or document.body.insertBefore, the cloned <script> block would get executed again! No other browser exhibits this behavior.
If I'm not mistaken, <script> blocks aren't supposed to be executed when appended to the document after the document has initially loaded, am I right? If I'm correct, is this a bug in IE9?
Here is a simple HTML document where you can see this behavior in action. Create an HTML document with this code and load it up in Internet Explorer using IE9 emulation. You should see an alert popup that says "hey". Next, click the "Click Me" button, and you will see the same popup get executed again!
<!DOCTYPE html>
<html>
<head>
<title>IE9 Script Tag Bug Test</title>
<script>
function ButtonClick(){
var Elem = document.getElementById('mydiv');
var ElemClone = Elem.cloneNode(true);
document.body.insertBefore(ElemClone,Elem);
}
</script>
</head>
<body>
<div id="mydiv">
This is a DIV.
<script>
alert("hey");
</script>
</div>
<button onclick="ButtonClick();">Click Me</button>
</body>
</html>
I want to alter the content of my newtab using javascript. In my manifest.json I have this
"chrome_url_overrides": {
"newtab": "index.html"
}
then in my index.html I have
<script src="jquery.js"></script>
<script src="script.js"></script>
<body>
<h1>hello world</h1>
</body>
then in my script.js I do $('h1').remove() nothing triggered. Why? When I try to do console.log($) it worked.
Your code runs as soon as Chrome inserts the <script> tag into the DOM tree.
By the time that happens, <h1> is not there yet.
There are two solutions; one is to simply move the <script> tag below the nodes you refer to.
The other, preferable solution is to use an event that says "okay, DOM tree is complete, you can work with nodes now". Using jQuery, it will be the ready event:
$(document).ready(function() {
/* your code here */
});
Or, shortened,
$(function() {
/* your code here */
});
Below is part of my code which is working fine if run on browser but function "incrementClickCounter" is not being triggered if used with phonegap and run on device
<div class="newsheading">
<h1><a id="newsTitle" data-bind="text:title,click:function () {
incrementClickCounter(title, content, publish_date, $index());}"></a></h1>
</div>
function incrementClickCounter(title=null, content=null, date=null, index=null){
alert('hello');
}
I tried calling button click event as well. but no luck.
Am i missing anything like js file?
Your function should be situated in <head>, like this:
<head>
<script>
function incrementClickCounter(){
alert('hello');
}
</script>
</head>
And, by the way, what are attributes for? You are not accessing them, so remove them.
i'm using HTML code and i wan't to show un Alert Message or alert box, i don't know what it is called, but a message with a "OK" button.
i want to show this alert when the page is loaded.
How do i do this?
And how to do this with a title in the Alert box?
Do I need JavaScript? if no, How to do this without javascript?
Jonathan
Yes you need javascript. The simplest way is to just put this at the bottom of your HTML page:
<script type="text/javascript">
alert("Hello world");
</script>
There are more preferred methods, like using jQuery's ready function, but this method will work.
You can use a variety of methods, one uses Javascript window.onload function in a simple function call from a script or from the body as in the solutions above, you can also use jQuery to do this but its just a modification of Javascript...Just add Jquery to your header by pasting
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to your head section and open another script tag where you display the alert when the DOM is ready i.e. `
<script>
$("document").ready( function () {
alert("Hello, world");
});
</script>
`
This uses Jquery to run the function but since jQuery is a Javascript framework it contains Javascript code hence the Javascript alert function..hope this helps...
you need a tiny bit of Javascript.
<script type="text/javascript">
window.onload = function(){
alert("Hi there");
}
</script>
This is only slightly different from Adam's answer. The effective difference is that this one alerts when the browser considers the page fully loaded, while Adam's alerts when the browser scans part the <script> tag in the text. The difference is with, for example, images, which may continue loading in parallel for a while.
If you use jqueryui (or another toolset) this is the way you do it
http://codepen.io/anon/pen/jeLhJ
html
<div id="hw" title="Empty the recycle bin?">The new way</div>
javascript
$('#hw').dialog({
close:function(){
alert('the old way')
}
})
UPDATE : how to include jqueryui by pointing to cdn
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
For making alert just put below javascript code in footer.
<script>
$(document).ready(function(){
alert('Hi');
});
</script>
You need to also load jquery min file.
Please insert this script in header.
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.0.min.js'></script>
<script type="text/javascript">
window.alert("My name is George. Welcome!")
</script>
<script>
$(document).ready(function(){
alert('Hi');
});
</script>
You can try this.
$(document).ready(function(){
alert();
$('#reportVariablesTable tbody').append( '<tr><td>lll</td><td>lll</td></tr>');
});
I am trying to use jQuery's .load function to dynamically load content into my webpage. This seem so simple, but I cannot make it work. To try and figure it out, I made a test page with just basic structure, but the external content still won't load:
jquery.html
<html>
<head>
<title>JQuery Test</title>
<script src="jquery1.5.min.js"></script>
</head>
<body>
<script>
$('#foo').load('test.html');
</script>
<div id="foo"></div>
</body>
</html>
test.html
<p>Text text</p>
I'm sure I have made a tiny error, but I can't find it anywhere!
You need to encapsulate your script in the $(document).ready() otherwise #foo won't exist when the script is executed:
<script>
$(document).ready(function(){
$('#foo').load('test.html');
});
</script>
You need to wait for the document to be ready before you can access the DOM. Just add a $(document).ready() around your original code:
<html>
<head>
<title>JQuery Test</title>
<script src="jquery1.5.min.js"></script>
</head>
<body>
<script>
$(document).ready( function() {
$('#foo').load('test.html');
});
</script>
<div id="foo"></div>
</body>
</html>
or if you want a shorter code:
$(function() {
$('#foo').load('test.html');
});
Informally, what's happening is that, as your browser reads the code you wrote, it's drawing its contents as it goes along. When it reaches your <script> tag, it executes it. But when $("#foo") gets executed, the browser's still processing the <script> and hasn't reached the part of the code where you told it there's a div called foo, so the browser doesn't know it exists, and jquery will just find nothing.
Of course, the idea that the browser will just sequentially read your code and render it as it goes is naive at best, so while it might seem that just moving the <script> tag to the bottom of the code would work, you're not actually guaranteed it will work. Instead, the browser will notify you when it's done drawing the page by firing a load (and possibly a DOMContentLoaded) event. So all code that depends on the whole html being drawn should be executed in an event handler bound to those events.
jQuery makes waiting for the page to be loaded easy, just use something like this:
$.ready(function() {
doStuff();
});