I'm trying to replace a part of a page with external content on the fly.
Here is the source.html:
<!DOCTYPE html>
<html>
<head>
<%= foobar %>
</head>
<body>
This is body
</body>
</html>
And a replacement string inject.js:
var REGEXP = /^\'$/i; var foo = 1;
A ruby code that outputs a file by combining both.
pageContent = File.read('./source.html')
jsContent = File.read('./inject.js');
output = pageContent.gsub("<%= foobar %>", jsContent)
File.open('./dest.html', "w+") do |f|
f.write(output)
end
However, I get the messed up dest.html which is happening because of \' in inject.js.
<!DOCTYPE html>
<html>
<head>
var REGEXP = /^
</head>
<body>
This is body
</body>
</html>$/i; var foo = 1;
</head>
<body>
This is body
</body>
</html>
How do I get rid of this issue?
Try using gsub block form:
output = pageContent.gsub("<%= foobar %>") { jsContent }
This one can help you in this case.
Could you please try %q{jsContent} something like that.
Related
I seem to have a very specific problem where something is missing and I just can't see it.
From and index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript" src="./js/a1.js"></script>
<script language="javascript" type="text/javascript" src="./js/a2.js"></script>
<style>
</style>
</head>
<body onLoad="javascript:Scan()">
<div id = "TheDiv">?
</div>
</body>
</html>
From onLoad, I call Scan()
function Scan()
{
divResultado = document.getElementById('TheDiv');
//instanciamos el objetoAjax
ajaxScan=objetoAjax();
ajaxScan.open("GET", "myscan.php", true);
DBScan = setTimeout(Scan,15000 );
ajaxScan.onreadystatechange=function()
{
if (ajaxScan.readyState==4)
{
//mostrar resultados en esta capa
divResultado = ajaxScan.responseText;
}
};
ajaxScan.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajaxScan.send( );
}
myscan gets data from a database and in debug, I see that information is properly transfered to divResultado above.
But the data doesn't appear in the div with id = "TheDiv"
I've done this hundreds of times before, but something somwhere has made itself
invisible to me.
In the raw data HTML, I think it appears below and outside of the context.
What am I not seeing
Because you're not writing the data to the page, you're just assigning it to a variable:
divResultado = ajaxScan.responseText;
Which means divResultado no longer refers to the element on the page, it now refers to the text from the AJAX response.
To set the text to that element, try:
divResultado.innerText = ajaxScan.responseText;
Or, if the result is HTML:
divResultado.innerHTML = ajaxScan.responseText;
I need to change the background image of a div using an onhover function.
I have tried several iterations of "document.getElementByID" without success
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="css/gallery.css">
<script src = "js/gallery.js"></script>
</head>
<body>
<div id = "image">
Hover over an image below to display here.
</div>
<img class = "preview" alt = "Styling with a Bandana" src =
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg"
onmouseover = "upDate(this)" onmouseout = "unDo()">
</body>
</html>
Following is the latest function I tried:
function upDate(previewPic){
document.getElementById("image").body.backgroundImage =
"url('img_bacon.jpg')";
I am expecting the div to include the background image but it does not.
Try using .innerhtml and pass in whatever you want the body to be.
document.getElementById("image").innerhtml = "<div>CONTENT HERE</div>"
This should work:
document.getElementById("image").style.backgroundImage = "url(someimage.jpg)";
You could consider using jquery.. then it would look something like this:
$('#image').css("background-image", "url(someimage.jpg)");
How do I add a comment into an XML file using Nokogiri?
For example, I have an existing html file. I want to add <!--doc-->. How should I do it so I get:
...
<body>
<!--doc-->
</body>
...
I'd use:
require 'nokogiri'
doc = Nokogiri::HTML('<html><body></body></html>')
doc.at('body') << '<!-- foo -->'
puts doc.to_html
# >> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
# >> <html><body><!-- foo --></body></html>
Or you can use a bit longer code:
doc.at('body').add_child('<!-- foo -->')
Which results in the same thing.
It gets a little more interesting/complicated if <body> has more nodes, and you care where the comment goes, but that's still basically locating where you want the comment to be inserted, and then doing one of the above.
I use following code fix:
require 'nokogiri'
d = Nokogiri::HTML(%Q(<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
))
d.css('body')[0].add_child(Nokogiri::XML::Comment.new(d, "doc"))
puts d.to_s
I have a DOM and I want to insert a new node using Hpricot. Here my DOM structure:
<html>
<head>
</head>
<body>
...
...
</body>
</html>
What I want is I have to insert a script tag as a last child of <body> something like:
<body>
...
<script>
console.log(document.cookie)
</script>
</body>
This is what I have:
doc = Hpricot.XML(%{<html>
<head>
</head>
<body>
...
...
</body>
</html>
})
doc.at('body')
But now I'm not getting any desired method to move forward and the documentation of hpricot sucks. Has anyone done this before?
Achieved but using Nokigiri pasting it incase if someone want to do this
Here the HTML
h1 = Nokogiri::XML.parse %{<html>
<head>
<script>
alert("hello");
</script>
</head>
<body>
<p> THIS IS WAR </p>
</body>
</html>}
apend your tag (my case script tag) as last child of body
h1.search('body').children.after(%{<script> alert ('Hello') </script>})
Hope this help to some
Using the Sinatra library, I'm trying to condense two functions that display HTML code into a single function. Both these functions differ by only a small amount of HTML.
Here's an example.
def make_start_page()
<<EOS
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p> Hello </p>
<img src="..." />
</body>
</html>
EOS
end
def make_guess_page()
<<EOS
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p> Something different </p>
<a href="..." >1</a>
</body>
</html>
EOS
end
In the Ruby function that will call these two functions, I was wondering if it is possible to take the small portion of HTML that differs and pass it to a single, condensed version of these two functions that will display the page.
def handle()
if 1
var = "<p> Hello </p>
<img src="..." />"
elsif 2
var = "<p> Something different </p>
<a href="..." >1</a>"
make_start_guess_page(var)
end
You can interpolate variables in heredoc:
def make_start_page(var)
<<EOS
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
#{var}
</body>
</html>
EOS
end
For example.
There no reason why you could not do that. However if you want to print it, you'll probably have to use functions like String#html_safe in rails, or != in haml