So i am using perl CGI to create a table from arrays in my perl code. i also have HTML implemented in my perl file. I have the content printing out on the browser, but its printing on top of the HTML part of the web page. I want it to be lower so it will display in the actual HTML part of the .pl file. For a better understanding i will post a screenshot of how it loads on the browser.
Here is my perl code which prints out this data..
#!/usr/bin/perl -w
use CGI qw/:standard/;
use strict;
use warnings;
use JSON qw( decode_json );
use LWP::Simple 'get';
use Data::Dumper;
print "content-type:text/html; charset=utf-8\n\n";
my #sessionArr;
my #classArr;
my #timeArr;
my #adminArr;
my #profArr;
my #descArr;
my $i = 0;
my $myURL = "leaving URL out";
my $json = get($myURL);
die "Could not get $myURL!" unless defined $json;
my $decoded_json = decode_json ($json);
my #sessionID = #{ $decoded_json->{'items'} };
foreach my $d ( #sessionID ) {
$sessionArr[$i] = $d->{"sessionID"};
$i = $i + 1;
}
$i = 0;
my #class = #{ $decoded_json->{'items'} };
foreach my $d ( #class ) {
$classArr[$i] = $d->{"classField"};
$i = $i + 1;
}
$i = 0;
my #time = #{ $decoded_json->{'items'} };
foreach my $d ( #time ) {
$timeArr[$i] = $d->{"startTimeField"};
$i = $i + 1;
}
$i = 0;
my #usrcreater = #{ $decoded_json->{'items'} };
foreach my $d ( #usrcreater ) {
$adminArr[$i] = $d->{"leader"};
$i = $i + 1;
}
$i = 0;
my #professor = #{ $decoded_json->{'items'} };
foreach my $d ( #professor ) {
$profArr[$i] = $d->{"professorField"};
$i = $i + 1;
}
$i = 0;
my #description = #{ $decoded_json->{'items'} };
foreach my $d ( #description ) {
$descArr[$i] = $d->{"descriptionField"};
$i = $i + 1;
}
$i = 0;
foreach my $p ( #description ) {
$i = $i +1;
}
foreach my $i (0..$#sessionArr) {
print "<tr>\n";
print " ";
foreach my $ra (\#sessionArr, \#classArr, \#timeArr, \#adminArr, \#profArr, \#descArr) {
print "<td>$ra->[$i]</td>\n"
}
print "<h2></tr></h2>\n";
}
print qq(<!DOCTYPE html><head></head><body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>AU Study Sessions</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="../images/favicon.png">
<script src="../js/pace.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="preloader"></div>
<! -- ******************** MASTHEAD SECTION ******************** -->
<main id="top" class="masthead" role="main">
<div class="container">
<div class="logo"> <img src="../images/aulogo2.png" alt="logo">
</div>
<h1>View Study Sessions</h1>
<table>
<-- *****This is where i want my table to be displayed -->
</table>
<br>
<br>
Add a Study Session
<!--<a href="index.html#explore" class="scrollto">
<p>SCROLL DOWN TO EXPLORE</p>
<p class="scrollto--arrow"><img src="../images/scroll_down.png" alt="scroll down arrow"></p>
</a> -->
</div><! --/container -->
</main><! --/main -->
<! -- ******************** FOOTER SECTION ******************** -->
<div class="container" id="explore">
<div class="section-title">
<h2>With Adelphi Study Sessions Website</h2>
<h4>You will be able to do the following</h4>
</div>
<section class="row features">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_01.png" alt="analytics-icon">
<div class="caption">
<h3>View Study Groups</h3>
<p>See the most up to date study sessions taking place on our garden city campus.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_02.png" alt="analytics-icon">
<div class="caption">
<h3>Add and create new study sessions</h3>
<p>If you or some classmates want to create a new study session you will be able to add a new group along with course information, sudy topics, and time and location taking place.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_03.png" alt="analytics-icon">
<div class="caption">
<h3>See description of session</h3>
<p>The student who creates the study session will give a short description about what the study session will cover.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_04.png" alt="analytics-icon">
<div class="caption">
<h3>Available on campus</h3>
<p>All study sessions will take place on our Garden City campus therefore are available to all students who commute or live on campus.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
</section><! --/section -->
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/easing.js"></script>
<script src="../js/nicescroll.js"></script>
</body>);
It seems that your code first generates the markup for the table (prints it) and then the rest of the web page's HTML. If this is the case, the following may be useful.
Here is HTML for a "web page", with a table. When displayed in a browser this will show the table, along with other contents, formatted and styled in whatever way it is set up.
<!DOCTYPE html>
<!-- metadata: links, styling, etc -->
<body>
<!-- ... some HTML ... -->
<table>
<tr> <td>a</td> <td>A</td> </tr>
<tr> <td>b</td> <td>B</td> </tr>
</table>
<!-- ... more HTML ... -->
</body>
</html>
You can generate this text from Perl by doing print "<!DOCTYPE html>\n" etc, line by line.
However, this is something else
<table>
<tr> <td>a</td> <td>A</td> </tr>
<tr> <td>b</td> <td>B</td> </tr>
</table>
<!DOCTYPE html>
<!-- metadata: head, links, styling, etc -->
<body>
<!-- ... some HTML ... -->
<!-- ... more HTML ... -->
</body>
</html>
When this is thrown at the browser none of the web page styling and other elements will be applied to the table. The browser will merely show the data, a A and b B, in a puritan tabular layout -- and then the (rest of the intended) web page. (Further, in your code I don't see the <table> tags printed so I would expect a browser to show one line with a A b B.)
It seems that this is happening in your code. It first prints the table, then the actual page. So it is generating the above markup, from the second example. Change your program so that the HTML markup for the table (that the prints generate) lands among the rest of HTML, where you need to place the table.
I hope this helps. For more detail, or if this is off the mark, please show your HTML and how it's made.
Given that the question was updated with full code here is a simple fix, needing only a very small change. PLease note that this is not a comment on how to generate HTML, nor a recommendation for writing it in this way.
After the table's data is printed, the HTML for the page is generated using
print qq(<!DOCTYPE html><head></head><body>
... HTML markup goes for screenfuls ...
</body>);
You are using the qq operator, which is a generic way to form double quoted strings. It can also use delimiters other than (), so you can say qq{...} etc. Part of the table at perlop
Customary Generic Meaning Interpolates
'' q{} Literal no
"" qq{} Literal yes
`` qx{} Command yes*
qw{} Word list no
...
<<EOF here-doc yes*
* unless the delimiter is ''.
Please see the link for the full table and the rest.
So your code is practically the same as
print "<!DOCTYPE html><head></head><body>
<head>
...
</body>";
except that in this version you'd have to escape double quotes anywhere in the text. Yet another way of doing this is by using here-doc.
The qq operator interpolates variables, and includes newlines. This means that the above is really
print "<!DOCTYPE html><head></head><body>\n";
print "\n";
print "<head>\n";
# ...
print "</body>\n";
I hope that now things are clear. Your qq(...) merely sends a very long string (with newlines), your HTML text -- which is equivalent to printing each line separately. You need to insert the table generation code into this.
Here is a simple way to change your code to do that. It is not good code but it should work with least changes to what you have. Break up your qq into two. The first qq(...); prints HTML up to the table. Then print the table (move the code that prints it). Then have another qq(...); print the rest.
# Print HTML up to where the table needs to be
print qq(<!DOCTYPE html><head></head><body>
...
<h1>View Study Sessions</h1>
);
# Now generate markup for the table
print "<table>\n";
foreach my $i (0..$#sessionArr) {
# rest of table-data printing code
}
print "</table>\n";
# Now resume generating the rest of your HTML
print qq(
<br>
<br>
Add a Study Session
... rest of your HTML
</body>
);
Please note: this is not good code. It is hard to review, modify, extend, and maintain. I'd still suggest that you do this first, to promptly see how a page is generated. Then reach out and find a better way to produce HTML out of Perl code. I don't use modules for that so cannot recommend any, but there is quite a bit out there.
Here's a rewrite that uses Template Toolkit ("TT") to build the HTML page and include the data from your JSON
There are many problems with your original HTML. Tags are unbalanced, and you have head-only elements within the body. I can't guarantee that this fixes everything but I can't spot any more errors. You should be careful to keep your HTML indented so that you can more easily spot unbalanced tags. It also obviates the need to comment the closing tags
I've included a block of code that shows you how to more easily extract arrays of the same field from each of a list of hashes. The variables aren't used, so please delete that code once you've understood the lesson
The templates for Template Toolkit are normally held in separate .tt files. In this case I've used the DATA file handle as it's more in keeping with the way you wrote your original code. But bear in mind that a TT template may contain include statements that refer to other separate files. For instance you could put your footer section in an external file and then [% INCLUDE footer.tt %] in your main template. But that is for the future
Note that Template Toolkit allows you to access Perl data structures directly. Anything that the template needs to use must be passed in the second parameter of the process methods call. In this case I have passed { json => $decoded_json } so that TT can now use the json identifier to refer to the hash that you have downloaded. Within the template, json.items is now the array of data (accessible as json.items.0, json.items.1 etc.) and here I have written [% FOREACH item IN json.items %] which declares a new TT variable item and assigns it to each element of the items array in turn
I hope all of that is clear
#!/usr/bin/perl
use utf8;
use strict;
use warnings 'all';
use CGI qw/:standard/;
use JSON qw( decode_json );
use LWP;
use Template;
use Data::Dumper;
use constant JSON_URL => 'http://example.com/json';
### This code uses a literal JSON data item. The live code should
### fetch the real data from the JSON_URL. The code to do this
### is here but has been commented out
=comment
my $json = do {
my $ua = LWP::UserAgent->new;
my $resp = $ua->get(JSON_URL);
unless ( $resp->is_success ) {
die sprintf "Could not retrieve JSON data: %s", $resp->status_line;
}
$resp->decoded_content;
};
=cut
my $json = <<END;
{
"items": [
{
"sessionID": "session1",
"classField": "class1",
"startTimeField": "start1",
"leader": "leader1",
"professorField": "prof1",
"descriptionField": "desc1"
},
{
"sessionID": "session2",
"classField": "class2",
"startTimeField": "start2",
"leader": "leader2",
"professorField": "prof2",
"descriptionField": "desc2"
}
]
}
END
my $decoded_json = decode_json($json);
### Note that these variables are unused. This is just an example
### of a better way to extract a list of values from an array of hashes
### Please remove this code before deploying
my $items = $decoded_json->{items};
my #sessionArr = map { $_->{sessionID} } #$items;
my #classArr = map { $_->{classField} } #$items;
my #timeArr = map { $_->{startTimeField} } #$items;
my #adminArr = map { $_->{leader} } #$items;
my #profArr = map { $_->{professorField} } #$items;
my #descArr = map { $_->{descriptionField} } #$items;
### All that needs to be done its to use CGI to print the HTTP
### header and invoke Template Toolkit to build an HTML page that
### includes the data from the JSON hash
print CGI->header(
-type => 'text/html',
-charset => 'utf-8',
);
my $tt = Template->new;
$tt->process(\*DATA, { json => $decoded_json } );
__DATA__
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>AU Study Sessions</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="../images/favicon.png">
<script src="../js/pace.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="preloader"></div>
<!-- ******************** MASTHEAD SECTION ******************* -->
<main id="top" class="masthead" role="main">
<div class="container">
<div class="logo">
<img src="../images/aulogo2.png" alt="logo">
</div>
<h1>View Study Sessions</h1>);
<table>
[% FOREACH item IN json.items %]
<tr>
<td>[% item.sessionID %]</td>
<td>[% item.classField %]</td>
<td>[% item.startTimeField %]</td>
<td>[% item.leader %]</td>
<td>[% item.professorField %]</td>
<td>[% item.descriptionField %]</td>
</tr>
[% END %]
<br/>
<br/>
Add a Study Session
<!--
<a href="index.html#explore" class="scrollto">
<p>SCROLL DOWN TO EXPLORE</p>
<p class="scrollto--arrow"><img src="../images/scroll_down.png" alt="scroll down arrow"></p>
</a>
-->
</div> <!-- class="container" -->
</main>
<!-- ******************** FOOTER SECTION ******************** -->
<div class="container" id="explore">
<div class="section-title">
<h2>With Adelphi Study Sessions Website</h2>
<h4>You will be able to do the following</h4>
</div>
<section class="row features">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_01.png" alt="analytics-icon">
<div class="caption">
<h3>View Study Groups</h3>
<p>See the most up to date study sessions taking place on our garden city campus.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_02.png" alt="analytics-icon">
<div class="caption">
<h3>Add and create new study sessions</h3>
<p>If you or some classmates want to create a new study session you will be able to add a new group along with course information, sudy topics, and time and location taking place.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_03.png" alt="analytics-icon">
<div class="caption">
<h3>See description of session</h3>
<p>The student who creates the study session will give a short description about what the study session will cover.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_04.png" alt="analytics-icon">
<div class="caption">
<h3>Available on campus</h3>
<p>All study sessions will take place on our Garden City campus therefore are available to all students who commute or live on campus.</p>
</div>
</div>
</div>
</section>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/easing.js"></script>
<script src="../js/nicescroll.js"></script>
</div> <!-- class="container" id="explore" -->
</body>
</html>
output
Content-Type: text/html; charset=utf-8
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>AU Study Sessions</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="../images/favicon.png">
<script src="../js/pace.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="preloader"></div>
<!-- ******************** MASTHEAD SECTION ******************* -->
<main id="top" class="masthead" role="main">
<div class="container">
<div class="logo">
<img src="../images/aulogo2.png" alt="logo">
</div>
<h1>View Study Sessions</h1>);
<table>
<tr>
<td>session1</td>
<td>class1</td>
<td>start1</td>
<td>leader1</td>
<td>prof1</td>
<td>desc1</td>
</tr>
<tr>
<td>session2</td>
<td>class2</td>
<td>start2</td>
<td>leader2</td>
<td>prof2</td>
<td>desc2</td>
</tr>
<br/>
<br/>
Add a Study Session
<!--<a href="index.html#explore" class="scrollto">
<p>SCROLL DOWN TO EXPLORE</p>
<p class="scrollto--arrow"><img src="../images/scroll_down.png" alt="scroll down arrow"></p>
</a> -->
</div>
</main>
<!-- ******************** FOOTER SECTION ******************** -->
<div class="container" id="explore">
<div class="section-title">
<h2>With Adelphi Study Sessions Website</h2>
<h4>You will be able to do the following</h4>
</div>
<section class="row features">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_01.png" alt="analytics-icon">
<div class="caption">
<h3>View Study Groups</h3>
<p>See the most up to date study sessions taking place on our garden city campus.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_02.png" alt="analytics-icon">
<div class="caption">
<h3>Add and create new study sessions</h3>
<p>If you or some classmates want to create a new study session you will be able to add a new group along with course information, sudy topics, and time and location taking place.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_03.png" alt="analytics-icon">
<div class="caption">
<h3>See description of session</h3>
<p>The student who creates the study session will give a short description about what the study session will cover.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_04.png" alt="analytics-icon">
<div class="caption">
<h3>Available on campus</h3>
<p>All study sessions will take place on our Garden City campus therefore are available to all students who commute or live on campus.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
</section><! --/section -->
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/easing.js"></script>
<script src="../js/nicescroll.js"></script>
</body>
</html>
There's a big problem with your sequencing of the HTML output that I'm sure you could see if you ran your program from the command line
The first thing your code does is send the HTTP header with
print "content-type:text/html; charset=utf-8\n\n";
That should be okay
Then you fetch some JSON data from the internet and decode it. That data must be an array of hashes, which you unpack into six separate arrays. That's unnecessary but it does no harm, and I can understand you choosing to do it that way if you're unfamiliar with Perl references
Right after that your loop starting with this line
foreach my $i (0..$#sessionArr) {
prints a number of <tr> elements, each with six <td> items whose contents come from your six arrays
That's the first thing your CGI code is sending back to the client after the Content-Type HTTP header. No <html> or <body> or even <table>. That's a bit wrong, but even so your browser does its best and displays the information with the missing elements defaulted
Then you send the document type declaration and the rest of the page, where you have put
and below here is just html
---this section is where im trying to get the data to display
which is really as important as the rest of the Perl code, and what I asked to see
Your Perl program will send the text in the order you print it. It won't know to insert your <tr> elements inside the appropriate <table>. As I said, you should be able to see what your code produces by running it from the command line
The usual solution to this is to use a template module. Template is the big one but there are many others
Of course you may just scatter print statements through your program in the correct order, but that will make your code much less intelligible
I hope that helps
Related
i am trying to render an view page inside the add customer view page ,this is giving me an error in the view page , which is not able to load in the html view,
Thanks in advance..
Create New user
#model acer.Table1
#{
ViewBag.Title = "CreateNewUser";
}
<h2>CreateNewUser</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.Partial("View")
<h4></h4>
<hr />
Shared view code is below-->
#{
Layout = "~/Views/Shared/View.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-
[enter image description here][1]scale=1">
</head>
<body>
<div class="sidenav">
Home
Profile
Employees
CreateNewUser
</div>
<div class="main">
</div>
<div class="container body-content">
#RenderBody()
#*<footer>
<p>© #DateTime.Now.Year - MyASP.NET
Application</p>
</footer>*#
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
// the error message Picture Shows in the below link...
1: https://i.stack.imgur.com/dyuFE.png
Dont call this #Html.Partial("View") directly.
Create new partial view called "_InnerView" inside this view use
#{
Layout = "~/Views/Shared/View.cshtml";
}
and then called #Html.Partial("_InnerView")
Hope this will help you.
I am trying to create a webpage to be able to sell things online, and have come up with an issue while creating a file to automatically create a new item. I am trying to use Ruby to temporarily take off the end of the file, append the correct line to the file, and put the end back. My code so far is
puts "what is the item number?"
item_num = gets.chomp
puts "what is item description?(not optional)"
desc = gets.chomp
file_text = File.read("template.html")
file_text = file_text.gsub(/Item#/, "Item #{item_num.to_s}")
file_text = file_text.gsub(/<img class="item-image" src="">/, '<img class="item-image" src="' + item_num.to_s + '">')
file_text = file_text.gsub(/Item-desc/, desc)
puts file_text
file_create = File.new(item_num.to_s + ".html", "w")
file_create.puts(file_text)
file_create.close
item_page_end = '
</div>
<div class="col-sm-12">
<div class="headings">
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="width=80%"/>
<script src="../js/jquery-3.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="https://use.fontawesome.com/55b73bf748.js"></script>
<script src="../js/jquery.magnific-popup.js"></script>
<script src="../js/script.js"></script>
</body>
</html>
'
file_to_update = File.read("item_page.html")
file_to_update = file_to_update.gsub(item_page_end, "")
file_to_update = File.open("item_page.html", "a+")
file_to_update.puts( '<p class="col-md-4"><img src="../images/' + item_num + '.jpg" />Item' + item_num + '</p>')
file_to_update.puts(item_page_end)
sleep 10
The HTML file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SHS Metal | Store</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/logo-icon.png"/>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../css/owl.carousel.css" rel="stylesheet">
<link href="../css/owl.theme.default.min.css" rel="stylesheet">
<link href="../css/magnific-popup.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="main element">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="title mt80">Store</h2>
</div>
<div class="col-sm-12">
<div class="headings">
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="width=80%"/>
<script src="../js/jquery-3.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="https://use.fontawesome.com/55b73bf748.js"></script>
<script src="../js/jquery.magnific-popup.js"></script>
<script src="../js/script.js"></script>
</body>
</html>
What ends up happening is that the program inserts the HTML line I want to add to the "item_page.html" file to the end and then adding the "item_page_end" string at the end. Does anyone know how to fix it put the HTML line in the Ruby program after
<h2 class="title mt80">Store</h2>
Any other solution I have found is either for an array, a string or simply doesn't work.
If you can edit the HTML file, I see two possible answers:
(Please note that in all cases I use a function called add_all_elements which is a function that just returns whatever you want placed in your file.)
Cut your file in two, read the first half, add your elements and then read the second half. It should be something like this:
buffer = File.read("template_first_half.html")
buffer += add_all_elements()
buffer += File.read("template_second_half.html")
It is easy to use, but the HTML can be difficult to read.
You can also add a reference in the file and use gsub to replace it:
buffer = File.read("template.html")
buffer = buffer.gsub("#####anchor#####", add_all_elements())
Also easier to use, it will require that you place a unique sub-string within the file. The problem is that the reference must absolutely be unique within the file. The advantage is that the HTML file remains easy to read.
If you cannot edit the HTML file:
line_num = 0
buffer = ''
break_point = 42
text.each_line do |line|
if line_num == break_point
buffer += add_all_elements()
end
buffer += line
line_num += 1
end
Basically, you read the file line-by-line and place it into a buffer. When the line count reaches the required value (here, the variable break_point that I set at 42) you insert into the buffer all of the elements.
The inconvenient is that if the file is edited, the breaking point must be re-set each time. You could also use a string as a break point to avoid most of that problem.
You could do something like this:
file_to_update = File.read("item_page.html")
file_to_update = file_to_update.sub(/(?<=<h2 class="title mt80">Store<\/h2>)/,file_text)
File.write("item_page.html",file_to_update)
With this there's no need to create a new file for file_text.
Basically whats happening is the second line here uses a lookbehind assertion to insert file_text into file_to_update after "Store</h2>". Then you just overwrite the contents of item_page.html with the updated string.
I am making a WebApp with angularJS and I have something that irritates me.
<!doctype html>
<html>
<head>
<title>webapp</title>
<link href="css/angular-bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="app">
<div class="container">
<h1>WebApp</h1>
<div ng-controller="home as homeCtrl" ng-cloak class="ng-cloak" class="wrapper">
<div ng-include="'blocks/item.html'"></div>
<div ng-include="'blocks/something.html'"></div>
<div ng-include="'blocks/health.html'"></div>
<div ng-include="'blocks/mana.html'"></div>
<div ng-include="'blocks/running.html'"></div>
<div ng-include="'blocks/out.html'"></div>
<div ng-include="'blocks/of.html'"></div>
<div ng-include="'blocks/ideas.html'"></div>
</div>
</div>
</body>
</html>
Every item, i have to write another include. is there a way to include these and any additions in the future with one command?
Firstly, in your controller create the alphabet array (as shown here)
function genCharArray(charA, charZ) {
var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
for (; i <= j; ++i) {
a.push(String.fromCharCode(i));
}
return a;
}
$scope.charArray = genCharArray('a', 'z'); // ["a", ..., "z"]
Then, in your template:
<div ng-controller="home as homeCtrl" ng-cloak class="ng-cloak" class="wrapper">
<div ng-repeat="letter in charArray" ng-include="'blocks/' + letter + '.html'"></div>
</div>
[edit]
If you want to work with any generic list and not specifically the alphabet as in the original post, just use an array and initialize it with whatever.
$scope.charArray = ['lemon', 'tree', 'apple'];
The point here is using ng-repeat to iterate over any number of objects you like, and dynamically create the ng-include elements appropriately.
I am making a home appliance control device using arduino. I got this html code from the website. What is the code to get the value from the Arduino?
I think
$("#temperatureDisplay").load('temperature_display.php');
This part would be a receiving the value from the Arduino, but I am confusing. If I know what is code for receiving the value, how can I use if statement to change the background color with different value of output from Arduino?
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.0.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Weather Station</title>
</head>
<body>
<div class="data">
<div class="dataTitle">Temperature: </div>
<div id="temperatureDisplay">Waiting for data ...</div>
</div>
<script type="text/javascript">
setInterval(function()
{
$("#temperatureDisplay").load('temperature_display.php');
}, 1000);
</script>
</body>
</html>
This is php file and the data file is just number. This number is always changed with the Arduino.
<?php
$myFile = "temp_data.txt";
$fh = fopen($myFile, 'r');
$line = fgets($fh);
fclose($fh);
echo $line;
?>
On this site: http://www.gruene-chemnitz.de/abgeordnete the right sidebar gets placed below the main content. Which of course isn't supposed to happen.
But this is the only page where this happens on the entire site. I'm not able to find the difference or get a clue whats wrong.
I would really appreciate your help in fixing the error.
Edit: The index.php of the used template looks like this:
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="shortcut icon" href="templates/<?php echo $this->template ?>/images/favicon.ico" />
<?php if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left') != 0) $contentwidth = "81";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>
</head>
<body>
<div id="page-outer">
<div id="top"><jdoc:include type="modules" name="top" style="xhtml"/></div>
</div>
<div id="page">
<div id="header"></div>
<div id="shadow"><div class="shadow"><jdoc:include type="module" name="breadcrumbs"/></div></div>
<div class="inside">
<div id="sidebar">
<div class="insideleft"><jdoc:include type="modules" name="left" style="xhtml"/></div>
</div>
<div id="content<?php echo $contentwidth;?>"><jdoc:include type="component" />
<div id="footer">©Bündnis 90 die Grünen <?php echo date("Y",time());?></div>
</div>
<div id="sidebar-2">
<div class="insideleft"><jdoc:include type="modules" name="right" style="xhtml"/></div>
</div>
</div>
</div>
</body>
</html>
check below div control position on your page html source
content60 and
sidebar-2
i think there is a html break on module with div content60. so check html first.
hope this will help you.
thanks
First you have tables based layout. Second your div#sidebar-2 is inside the div#content60. Remove the div#sidebar-2 ouside the div#content60 in your HTML markup.
Like for example here gruene-chemnitz.de, the div#sidebar-2 is outside the div#content60 and these two along with div#sidebar are the children of div.inside
Almost all occurences of templates blowing apart on specific pages can be traced down to invalid html within an article - or module.
Within your content it looks like you have closed a div that wasn't open - this is then interpreted by the browser as an earlier div as well as closing some intermediate td tags and other things - basically blowing your template apart.
The easiest fix would be to view the source within your article - within the wysiwyg editor and count how many times you open divs versus how many you close.
To give you an idea of where to look use the html validator:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.gruene-chemnitz.de%2Fabgeordnete