I simply cannot find an object in DOM using Firebug (FF).
I want to see elrteOptions object in DOM. I right-click "Inspect Element" on the page, going to DOM tab and typing elrteOptions in the search box. No results.
How to I see it? =)
Thanks.
Code is as simple as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>some</title>
<script src='js/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
var elrteOptions = {
cssClass : 'el-rte',
lang : 'ru',
toolbar : 'maxi',
cssfiles : ['styles/elrte-inner.css']
}
});
</script>
</head>
<body>
test
</body>
</html>
Looks like it had something to do with the browser (Firefox 9.0.1).
After complete re-install: objects started to appear normally.
Related
EDIT: I have found the solution. Since others may make the same mistake, I will put the answer at the bottom.
I am using Visual Studio Code. I am new to it.
I have Debugger For Chrome and Debugger For Edge installed.
I have Live Server installed.
I have launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://127.0.0.1:5500/a.html",
"webRoot": "${workspaceFolder}"
}
]
}
I have my basic html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="myfunc()">Click</button>
</body>
<script>
function myfunc(){
alert("clicked");
}
</script>
</html>
I have my breakpoint on the line alert("clicked");.
I click the Debugging icon on the left with the spider, and then click the green button to launch.
Now the weird bit:
The program launches and breaks immediately on the alert line, even though the button has not been pressed.
I continue.
But then when I click the button and expect the break point to be met. It is not. The alert occurs without breaking at all.
Anyone know what I am doing wrong?
Solution:
It does not like the <script> outside the body. If you change the html file to have the <script> inside the body, then it works fine.
Like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="myfunc()">Click</button>
<script>
function myfunc(){
alert("clicked");
}
</script>
</body>
</html>
I found out what was going wrong.
It does not like the outside the body. If you change the html file to have the inside the body, then it works fine.
Like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="myfunc()">Click</button>
<script>
function myfunc(){
alert("clicked");
}
</script>
</body>
</html>
I am trying to setup a D3 project and I want to color the visBdy div at the start. But the selection doesnt seem to be grabbing the visBdy div, it grabs html, even if I spell it wrong.It steps through the code and I do get the var, its just wrong (I think) Must be something simple....
setup();
function setup() {
var bd = d3.select(".visBdy");
bd.style("color", "red");
bd.style("background-color", "green");
}
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CCC</title>
<link href="css/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/app.js"></script>
<div class="visMnu">XXX</div>
<div class="visBdy">XXX</div>
</body>
</html>
Nokogiri isn't grabbing anything beneath the iframe tag.
doc.search("iframe") returns only the iframe tag. doc.search("body.content-frame") returns empty. doc.errors returns empty also. Why isn't Nokogiri registering the HTML beneath the iframe? How can I grab it?
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body onunload="clearMyTimeInterval()">
<iframe id="content-frame" frameborder="0" src="/sportsbook/betting-lines/baseball/2014-08-21/?range=day" onload="javascript:checkLoadedFrame(this);" style="background-color: rgb(34, 34, 34); height: 1875px;" name="content-frame" scrolling="no" border="0">
#document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body class="content-frame">
#ETC.......
That's because the contents of the iframe are not part of the page. In fact, they are in a completely different location (note the src attribute of the iframe). You'll have to fetch that content separately, which is how a browser would do it.
Here is code that handles it:
page = Mechanize.new.get "http://page_u_need"
page.iframe_with(id: 'beatles').content
I have a simple page which uses the mediaelement.js audioplayer plugin. The player attaches and functions correctly when loaded normally. However, when the page is loaded via ajax, the mediaelementplayer does not attach to the audio tag.
I use this code to call the file via ajax and jquery:
<html>
<head>
<link href="/test-vocabulary.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ajax_vocab_link").click(function(evento){
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", {chrisSearch: searchTerm}
);
});
})
</script>
</head>
<body>
<p><button class='ajax_vocab_link' id='ajaxlink_1' title='clothes'>Link to load ajax doc</button></p>
<div class='ajax_vocab_container' id='ajaxcontainer_1'>This is div id ajaxcontainer_1</div>
</body>
</html>
The audioplayer page is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- Audio Player CSS & Scripts -->
<script src="http://www.ingles23.com/audioplayer/js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://www.ingles23.com/audioplayer/css/style4.css" media="screen">
<!-- end Audio Player CSS & Scripts -->
<script>
$(document).ready(function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
</script>
</head>
<body>
<div class='display_vocab_container' >
<div class='display_vocab_text' >
<div class='audio-player-slim'>
<audio controls='controls' type='audio/mp3' src='/sound/mp3/i23-crear-frases-ingles-5.mp3' id='audio-player-vocab0'></audio>
</div>
</div>
</div>
</body>
</html>
I've tried many combinations including using on, live, success and moving the css/js links between the documents, but these have all made the situation worse.
What can i do get the file to attach medaielementplayer when loaded via ajax?
Try to put the mediaelementplayer() function call in the ajax success function, that worked for me. So unless you want to use .ajax instead of .load you'll need to pass it as the second argument to the load function. Or use http://api.jquery.com/ajaxSuccess/
$(".ajax_vocab_link").click(function(evento) {
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
});
Hello and thank you for reading my post.
Here is what I basically want to do:
in a first HTML page ("parent.html"), there is a button ;
when a user clicks the button a new window pops up ("child.html")
AND the contents of a "div" element in the child window is updated.
The final action is unsuccessful under "Firefox" and "Chrome".
parent.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Parent window document</title>
</head>
<body>
<input
type="button"
value="Open child window document"
onclick="openChildWindow()" />
<script type="text/javascript">
function openChildWindow()
{
var s_url = "http://localhost:8080/projectroot/child.html";
var s_name = "ChildWindowDocument";
var s_specs = "resizable=yes,scrollbars=yes,toolbar=0,status=0";
var childWnd = window.open(s_url, s_name, s_specs);
var div = childWnd.document.getElementById("child_wnd_doc_div_id");
div.innerHTML = "Hello from parent wnd";
}
</script>
</body>
</html>
child.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Parent window document</title>
</head>
<body>
<div id="child_wnd_doc_div_id">child window</div>
</body>
</html>
IE9 => it works.
Firefox 13.0.1 => it doesn't work. Error message: "div is null".
Chrome 20.0.1132.47 m => doesn't work.
Do you understand that behaviour?
Can you help me make it work in these three cases?
Thank you and best regards.
I think that the window/document is not loaded at the time when you try to access the elements from it. You can do something like
childWnd.onload = function() {
var div = childWnd.document.getElementById("child_wnd_doc_div_id");
div.innerHTML = "Hello from parent wnd";
}
Also you can take a look at the mdn doc.
A better approach to the problem may be to do the changes in the 'child'. You can access the parent window with window.opener. But you should keep in mind that the parent window could be closed so you should consider some type of local storage (e.g. cookie).