I need write static web page with simple data.
In form i have data from user and in tag
<div id="prog"> my output
How using Opal writing string into specyfic place?
<div id="prog">
</div><script type="text/javascript">
<div id="prog">
</div>
</script>
pp = document.getElementById("prog").innerHTML = Opal.main()
</script>
Ok, so based on your sample code, you just need to make Opal.main() return a string
def main
# logic
return str
end
But I think that what you really want is use opal-jquery or opal-browser, I don't have much experience with the later, so here's a simple example of opal-jquery (of what I understood you were asking)
Document.ready?
Element["form"].on(:submit) do
Element["#prog].text = Element["#input-id"].value
end
end
Related
I am in beginning of a web project and I want to read my web site stings such as labels, title of pages, placeholder and ... from a json file. i think this approach may help me to increase my speed in changes and create a multi language web site.
is there any jquery library for doing this? and if ther is not how can i do this work by jquery?
You can make mustache templates and populate them with data using handlebars.js:
http://handlebarsjs.com/
Mustache templates use curly braces as placeholders and handlebars uses the json format to hold the data. It could look something like this (though not a full working example):
HTML:
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
Javascript:
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
Result:
<div class="entry">
<h1>My New Post</h1>
<div class="body">
This is my first post!
</div>
</div>
Here is a working example: https://jsfiddle.net/k4u64exL/
What you're searching for is a Javascript/jQuery Template Engine - there are lot of them (start e.g. with http://www.sitepoint.com/10-javascript-jquery-templates-engines/ ).
If you want to write your own template engine try the following:
1) Fetch JSON-Data with Ajax
2) Fetch Template with Ajax
3) Apply variables from JSON-File to Template File (simple replace)
4) Append the result to the current page.
I'm trying to make a javascript function that displays different string every 7 days for example. And I want to display that string in a footer of an html.
The part that bugs me is how to insert that string in a paragraph in html (or anything that will display the text).
I have 2 dimensional array in .js, let's say:
array = [[first1,first2],[second1,second2],[third1,third2],[fourth1,fourth2],[fifth1,fifth2]];
And I want do display, let's say
array[2][0] in one paragraph and
array[2][1] in another paragraph.
let's say
<div>
<p>In here i want array[2][0]</p>
<p>In here i want array[2][1]</p>
</div>
Please help.
HTML:
<div>
<p>In here i want <span id="placeholder-1"></span></p>
<p>In here i want <span id="placeholder-2"></span></p>
</div>
JS:
document.getElementById('placeholder-1').innerHTML = array[2][0];
document.getElementById('placeholder-2').innerHTML = array[2][1];
Fiddle: http://jsfiddle.net/8N95j/
select the html element by document.getElementById/getElementsByClassName and attach the js value like
var ele = document.getElementById('footerid');
ele.innerHTML += array[2][0];
note: getElementsByClassName would give u an array
update
here is a working fiddle using the same markup u shared.
One different approach would be to use a framework like Ember or AngularJS. These are quite easy to put in place nowadays, and leads to much easier to maintain code. For instance, your HTML would look like
<div ng-controller='MyController'>
<p>In here i want {{ array[2][0] }}</p>
<p>In here i want {{ array[2][1] }}</p>
</div>
where MyController references an AngularJS controller (basically a simple javascript object which defines a $scope in which the array is defined.
At that point, you no longer need to update the HTML, ever. Whenever your javascript does something like array[2][0] = 'foo' the HTML is automatically updated in real-time.
Use the below code to dynamically create a p tag and append it in a container div
HTML :
<div id="container">
<p>In here i want Test1</p>
</div>
JS :
var array = [['first1','first2'],['second1','second2'],['third1','third2'],['fourth1','fourth2'],['fifth1','fifth2']];
//If needed for loop can start here
var para = document.createElement("p");
para.innerHTML = 'In here i want ' + array[2][0];
document.getElementById('container').appendChild(para);
DEMO
How would I render a page and go to a specific id?
Right now I have a following function with this code:
#cherrypy.expose
#require
def page():
tmpl = lookup.get_template('page.html')
return tmpl.render()
However, now the page.html does have several subpages, which I can access through URL like mydomain.com/page#someid.
Is there a way to render a template to go directly to the id?
I think that you are mixing the ideas, the # part of the URL is the client duty to focus in the specific element id. Nevertheless, I suppose that you want to do that to dynamically embed chunks of a particular part of the page trough javascript, I can think on two possibilities:
One, compose the full page template with the different ids from different sub-templates, this is easy if you are using a template module, like mako, and make a cherrypy handler to return the indivudual parts, this is of course supposing that you are in control of the content of the page and the ids are not dynamic (generated from a db or something) and the main site is a bunch of includes.
#cherrypy.expose
def page_part(section):
tpl_name = 'page_%s.html' % section
# validate that the template exists, then:
tmpl = lookup.get_template(tpl_name)
return tmpl.render()
Mako templates:
page.html:
<html>
<body>
<div id="main">
This is the main content of the site!
</div>
<h4>Sections</h4>
<div id="section_1">
<%include file="page_section1.html" />
</div>
<div id="section_2">
<%include file="page_section2.html" />
</div>
</body>
</html>
page_section1.html:
<p> Content of section 1</p>
page_section2.html:
<p> Content of section 2</p>
Or two, use jQuery selectors or something similar to request the page once and make the sub-selects in the returned html.
$.get('/page.html',
function(data){
$('#this_page_id').html($('#sect_in_other_page', $(data)).html());
});
I am currently working on a project that lets users post comments with jquery and ajax. So far it is using Json and retunring several items, username, comment text, user photo url, comment ID number and stuff like that, I then need to use some sort of template to make all this data go into the correct div's before adding it all to the screen.
I am new to using javascript so this is a hard task for me. I am now considering the easy route.
Just have my PHP backend script return the whole block of code, div's and everything in place but I am wondering is this a bad idea? More importantly is it a bad idea with json?
Here is an example of a block of code that needs to be added to the screen when a comment is posted
<li class="admin" id="comment-1371">
<div class="photocolumn">
<!-- START Photo block -->
<div class="imageSub" style="width: 100px;">
<img class="male" src="http://cache2.mycrib.net/images/image_group34/0/39/T_653807517aff2b1f5662d865b40d87d527c8eb.jpg" alt="Something" width="100"/>
<div class="blackbg"></div>
<div class="label">JasonDavis</div>
</div>
<!-- END Photo block -->
</div><!-- END photocolumn -->
<div class="commenttext">
<p>02/12/3009</p>
<p>sample text for comment area!</p>
</div>
<!-- END COMMENTTEXT -->
</li>
I would say it depends on the situation/application. For instance I would use json and templating for a flight/hotel etc result screen. Why return 50k's worth of the same markup when a 4k json object will do and will allow for rapid clientside sort/filter. If you dont need quick clientside filtering/sorting then responding with dom fragments is ok. Horses for courses.
I don't see a problem with returning HTML via AJAX. A bonus of this is that you can generate most of the HTML in a view in PHP and still keep things fairly clean.
Tokenizing your data into an object is nice for re-use but can be overkill for a one-off.
Go the easy route, I can see no reasons of going with JSON array.
I have a JavaScript string containing HTML like this:
<div>
<div class="a">
content1
</div>
content 2
<div class="a">
<b>content 3</b>
</div>
</div>
and I want to remove the div's of class="a" but leave their content.
In Python I would use something like:
re.compile('<div class="a">(.*?)</div>', re.DOTALL).sub(r'\1', html)
What is the equivalent using Javascript regular expressions?
Why don't you use proper DOM methods? With a little help from jQuery, that's dead simple:
var contents = $('<div><div class="a">content1</div>content 2<div class="a"><b>content 3</b></div></div>');
contents.find('.a').each(function() {
$(this).replaceWith($(this).html());
});
You can achieve it with regular expressions in JavaScript
var html = '<div> <div class="a"> content1 </div> <div class="a"> content1 </div> ... </div>';
var result = html.replace(/<div class="a">(.*?)<\/div>/g, function(a,s){return s;});
alert(result);
RegExp method replace takes two parameters - first one is the actual re and the second one is the replacement. Since there is not one but unknown number of replacements then a function can be used.
If you want to do this in Javascript, I'm presuming that you are running it in a web browser, and that the 'javascript string' that you refer to was extracted from the DOM in some way.
If both of these case are true, then I'd say that it would be a good idea to use a tried and tested javascript library, such as JQuery (There are others out there, but I don't use them, so can't really comment)
JQuery allows you to do on-the-fly DOM manipulations like you describe, with relative ease...
$('div.a').each(function(){$(this).replaceWith($(this).html());});
JQuery is definitely one of those tools that pays dividends - a failry short learning curve and a whole lot of power.