Complete Polyer noob here trying to write a simple little Polymer app.
What I'm trying to do is drive navigation of my iron-pages from a custom element (client-table) but can not figure out how to do this.
I've tried various permutations of using attr-for-selected and selected attributes within the table, but that doesn't seem to work. I've also tried setting up an anchor tag around the paper-button, and almost got that working, but it would trigger a full page refresh and not display my #clientInfo section when the page loaded.
Any suggestions on how to accomplish this, links to documentation that better explain routing/navigation in Polymer (esp. in cases of using custom elements), any default Polymer elements I should inspect the source of, etc?
<!-- snippet from index.html -->
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<paper-material elevation="1">
<h2>Clients</h2>
<client-table></client-table>
<a data-route="clientInfo" href="/">test</a>
</paper-material>
</section>
<section data-route="clientInfo">
<paper-material elevation="1">
<h2></h2>
<p>This is the users section</p>
Rob
</paper-material>
</section>
</iron-pages>
<!-- snipped from client-table.html -->
buildTable: function() {
var domTable = this.$.table;
var tableData = this.parseTableJson(this.buildTableJson());
var tableMarkup = this.buildTable_initTable() + "<tbody>";
for (var index in tableData) {
row = tableData[index];
var rowMarkup = "<tr>";
rowMarkup += "<td>" + row.clientFirstName + "</td>";
rowMarkup += "<td>" + row.clientLastName + "</td>";
rowMarkup += "<td>" + row.clientEmail + "</td>";
rowMarkup += "<td>" + row.clientPhone + "</td>";
rowMarkup += "<td>" + row.clientZipCode + "</td>";
rowMarkup += "<td><paper-button><iron-icon icon='card-membership'></iron-icon></paper-button></td>";
rowMarkup += "</tr>";
tableMarkup += rowMarkup;
}
tableMarkup += "</tbody>";
$(domTable).append(tableMarkup);
}
And then I found routing.html.
Related
I am generating HTML from controller (Backend) but browser can not parse that HTML properly.
Controller code:
def getValue (returnIndex) {
String dropDown = "<select name='" + returnIndex + "' style=''>"
def CatArr = new BudgetViewDatabaseService().executeQuery("SELECT c.id,c.name AS categoryName FROM chart AS a LEFT JOIN crtClass AS b ON a.id=b.chart_class_type_id LEFT JOIN chart_group AS c ON b.id=c.chart_class_id WHERE c.status=1")
if (CatArr.size()) {
for (int i = 0; i < CatArr.size(); i++) {
def catId = CatArr[i][0]
def ProductArr
ProductArr = new BudgetViewDatabaseService().executeQuery("SELECT id,accountCode,accountName FROM bv.crtMsr where status='1' AND chart_group_id='" + catId + "'")
if (ProductArr.size()) {
dropDown += "<optgroup label='" + CatArr[i][1] + "'>"
for (int j = 0; j < ProductArr.size(); j++) {
dropDown += "<option value='" + ProductArr[j][1] + "' >" + ProductArr[j][1] + " " + ProductArr[j][2] + "</option>"
}
dropDown += "</optgroup>"
}
}
}
dropDown += "</select>"
return dropDown
}
view page's code:
<div class="fieldContainer fcCombo">
<label>
My GL <b>:</b>
</label>
${new CoreParamsHelperTagLib().getValue('formFourGLAccount')}
</div>
issue:
Generated HTML looks like:
When I am opening that HTML on edit mode from browser then its looks like:
<select name='formFourGLAccount' style=''><optgroup
label='Overige immateriële bezittingen'><option value='0430' >0430 Overige niet
materiële bezittingen</option></optgroup><optgroup label='Computers en
computerapparatuur'><option value='0210' >0210 Computers en
computerapparatuur</option><option value='0211' >0211 Afschrijving computers en
computerapparatuur</option></optgroup><optgroup label='Overige materiële
bezittingen'><option value='0250' >0250 Overige materiële
bezittingen</option><option value='0251' >0251 Afschrijving overige materiele
bezittingen</option></optgroup><optgroup label='Waarborgsommen'><option
value='0300' >0300 Waarborgsommen</option></optgroup><optgroup
label='Deelnemingen in andere bedrijven'><option value='0310' >0310 Aandeel of belang
in andere bedrijven</option></optgroup><optgroup label='Strategische langlopende
beleggingen'><option value='0320' >0320 Strategische langlopende
beleggingen</option></optgroup><optgroup label='Verstrekte langlopende leningen
(hypotheek ed)'><option value='0330' >0330 Verstrekte langlopende leningen (hypotheek
ed)</option></optgroup><optgroup label='Overige financiële
bezittingen'><option value='0340' >0340 Overige financiële bezittingen</option></optgroup><optgroup label='Voorraad'><option
If I copy returns result (HTML) from controller and past it on browser manually then its working fine
You have not shown how that HTML is being rendered so it isn't clear specifically how to fix it, but what is happening is the content is being HTML encoded, which you do not want if you want the browser to evaluate the HTML tags.
EDIT Based On Comment:
<div class="fieldContainer fcCombo">
<label>
My GL <b>:</b>
</label>
${new CoreParamsHelperTagLib().getGLAccountExpanseBudgetForReconcilationOthersDropDown('formFourGLAccount')}
</div>
There is no good reason to create an instance of a taglib. You should invoke the tag as a GSP tag.
You are returning hardcoded HTML from your controller as a model variable. That is a bad idea, but not what you are asking about. If you really do want to do that, then you will need to prevent the data from being HTML encoded in your GSP. You can use the raw(your unescaped html code here) method in your GSP as one way to avoid the encoding.
I'm trying to create a website content management using asp.net and C# and bootstrap. I already done this using asp.net and C# and a server control like gridview but I want create this version one like as wordpress CMS.
I will describe my project to clear my purpose.
First I fill a DataTable from database. This Datatable has messageId int, Subject varchar, name varchar, email varchar, message text, isRead bit, and so on columns.isRead column is bit type for specifies that the message is read or not.
I Fill my DataTable using below Method:
DataTable dt = cls.Fill_In_DataTable("MessageFetchMessage");
Then I generate html text using another method dynamically: on Page_Load
protected void Page_Load(object sender, EventArgs e)
{
messeges = cls.fetchMessages();
}
messege the string variable, will append generated html code to aspx page:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-clock-o fa-fw"></i> Last messages From users</h3>
</div>
<div class="panel-body">
<div class="list-group">
<%=messeges %>
</div>
<div class="text-right">
View All messages <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</div>
the message content has these text from fetchMessages()method:
public string fetchMessages()
{
string post = ""; string readed = "";
DataTable dt = cls.Fill_In_DataTable("MessageFetchMessage");
if (dt.Rows.Count>0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
DateTime dtTemp = DateTime.Parse(dt.Rows[i]["messageDate"].ToString());
if (dt.Rows[i]["isRead"].ToString() == "True")
readed = "MessageReaded";
else
readed = "MessageNew";
post += "<div class='modal fade' id='myModal" + dt.Rows[i]["messageId"].ToString() + "' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>"
+ "<div class='modal-dialog' role='document'>"
+ "<div class='modal-content'>"
+ "<div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button><h4 class='modal-title' id='myModalLabel'><span style='font-weight:bold'>Subject</span> : " + dt.Rows[i]["subject"].ToString() + "</h4></div>"
+ "<div class='modal-header'><p><span style='font-weight:bold'>Date</span> : " + dtTemp.ToString("yyyy/MM/dd") + "</p>"
+ "<p><span style='font-weight:bold'>Time</span> : " + dt.Rows[i]["messageTime"].ToString() + "</p>"
+ "<p><span style='font-weight:bold'>Email</span> : " + dt.Rows[i]["email"].ToString() + "</p></div>"
+ "<div class='modal-body'>" + dt.Rows[i]["message"].ToString() + "</div>"
+ "<div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button><input type='submit' ID='btn" + dt.Rows[i]["messageId"].ToString() + "' class='btn btn-danger' onserverclick='btn_Click' value='Delete message' /></div>"
+ "</div></div></div>";
string narrow = Special.TimeToNarrow(dt.Rows[i]["messageDate"].ToString(), dt.Rows[i]["messageTime"].ToString());
post += "<a data-toggle='modal' data-target='#myModal" + dt.Rows[i]["messageId"].ToString() + "' href='#' class='list-group-item " + readed + "'><span class='badge'>" + narrow + "</span><i class='fa fa-fw fa-comment'></i> <span>"
+ dt.Rows[i]["name"].ToString() + "</span> : <span>" + dt.Rows[i]["subject"].ToString() + "</span></a>";
}
}
return post;
}
finally I add server code behind for btn_Click Event:
protected void btn_Click(object sender, EventArgs e)
{
string id = (sender as Control).ClientID;
//Then give Id to database class for CRUD Intractions
}
but btn_Click never called from client side. I search for similar question within 2 days and didn't get answer. please help me :)
Here I will put my Website screen Shots:
Then after click on one of the rows a pop up window will show using modal bootstrap:
Add your Modal, button and any other mark up you have to the ASPX page (mark up). Then you can get your ID on click event. The dynamic generation of your code is not registering the controls with the server side in Webforms.
Once you have captured your Message ID, you can place it in ViewState, Session or a hidden field on the UI. That way you can have the ID to use whenever you need it.
i want to make some elements in my asp form like below, unfortunately input button dose not work and "btnsave_ServerClick" dose not fire!
any body has idea?
<div class="clear"></div>
<%
string matn="";
System.Data.DataTable ds = new System.Data.DataTable();
try
{
// databaselinker is a class which is connected to the database
databaselinker link = new databaselinker();
// id is QueryString parameter
ds = link.selectplan(id);
}
catch (Exception Ex) { }
int i=0;
foreach (System.Data.DataRow DRow in ds.Rows)
{
TableRow tRow = new TableRow();
matn += "<div class='frame' id='frame" + DRow["PlanID"] + "'>";
matn += " name <input id='Text1' type='text' /> * ";
matn += "</br>";
matn += "Family <input id='Text2' type='text' /> * ";
matn += "<input id='Button1' type='button' value='Save' runat='server' onServerClick='btnsave_ServerClick' />";
matn += "</div>";
i++;
}
Response.Write(matn);
%>
When you type that button as string on this line
matn += "<input id='Button1' type='button' value='Save' runat='server' onServerClick='btnsave_ServerClick' />";
the asp.net did not know anything about that button, even if you have place the runat= is still a string.
when you have render that string using the
Response.Write(matn);
asp.net compile the response.write but NOT compile the string that you render of.
And that is the reason that is not working and not fire.
To make it work you need to create it dynamically.
Some examples on how to do it:
HOW TO: Dynamically Create Controls in ASP.NET by Using Visual C# .NET
Dynamic Controls Made Easy in ASP.Net
Persistent dynamic control in ASP.Net
Im learning Asp.Net, after writing a master page, I couldnt make it run on client (to actually see the animation). The thread waiting action is done on server before publishing the web page so animation is not dynamic. It shows only the final state of the page.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body bgcolor="red">
<center>
<h2>Hello w3schools!</h2>
<h4 id="aa">qq</h4>
<h3>
<p><%
for (int i = 0; i < 30; i++)
{
System.Threading.Thread.Sleep(25);
int txtLeft = 300 + (int)(100*Math.Sin(i));
int txtTop = 300+(int)(100*Math.Cos(i));
string theText = "Hello there!";
Response.Write("<div style=\"position:absolute; left: "+ txtLeft + "px; top:" + txtTop + "px; \">" + theText +"</div>");
}
%></p>
</h3>
</center>
</body>
</html>
I tried
runat="client" (near the "p" letter which is in brackets)
but it failed:
Runat must have value Server.
Take a look at this jsFiddle:
$(Start);
function Start() {
var txtLeft, txtTop, theText, theHTML;
theText = "Hello there!";
for (var i = 0; i < 30; i++) {
txtLeft = 300 + (100 * Math.sin(i));
txtTop = 300 + (100 * Math.cos(i));
theHTML = '<div style="position:absolute; left: ' + txtLeft + 'px; top:' + txtTop + 'px;">' + theText + '</div>';
$('#Demo').append(theHTML);
}
}
Basically, there's no need for server-side programming to generate the output you want; use asp.net for server work. What you can do is add this script to the page in a script tag along with the jquery reference and you're done.
html += '<tr style="display:none;"><td class="leftval">ID:</td><td><span id="' + _uniqueId + '-id">' + one + '</span></td></tr>';
html += '<tr><td class="leftval"><label for="' + _uniqueId + '-itemdesc" title="This is the descriptive text that will actually appear in the email.">Description: </label></td>';
html += '<td><input value="' + four + '" class="CDinput" name="itemdesc" id="' + _uniqueId + '-itemdesc" type="text"></td></tr>';
html += '<tr><td class="leftval"><label for="' + _uniqueId + '-title" title="This is the title text that is used in the email. The text usually is used as the anchor text of a link.">Title: </label></td>';
html += '<td><input value="' + five + '" class="CDinput" name="title" id="' + _uniqueId + '-title" type="text"></td></tr>';
html += '<tr><td class="leftval"><label style="color:#f16d44;" for="' + _uniqueId + '-enddate" title="This is the expiration of the offer. The formating here is arbitrary and does not impact how the end date would look in the actual template.">End Date: </label></td>';
html += '<td><input style="width:230px" value="' + six + '" class="CDinput" name="enddate" id="' + _uniqueId + '-itemenddate" type="text">';//I'm overriding the default width for the calendar image
html += '<img style="cursor:pointer;" class="CDdate" id="' + _uniqueId + '-dateselector"src="/images/Calendar_hyperlink.png"></td></tr>';
I can think of 3 reasons:
string connector operands like ' + ' make it harder to read
Indentation is more difficult since it's awkward to indent the field to simulate a properly formatted html snippet.
Display logic is mixed in tightly with business application logic, making diversifying focus difficult.
You have 3 good reasons listed, and are in the top three. Trying to mix the two makes for ugly code, hard to read, hard to maintain, etc.
One other thing, though, that I hadn't thought of until recently, is that some editors, such as Netbeans, will tell you when your HTML is broken. Forgetting to close tags, wrong values, etc. I'm using PHP for my work, and I've gotten into the habit of doing soemthing like this:
<li>
<span class='name'><?php echo _TAG_INDEX ?>:</span>
<span class='value'><?php echo $get_zone_array['DB_ID'] ?></span>
</li>
Using it like this, if I forgot to close a tag, like if I forgot the closing </span> somewhere, it would point it out for me, so I could go in and fix it. However, if I was putting the HTML into a variable, or echoing it directly, like this:
$html = "<li><span class='name'>"._TAG_INDEX.":<span>" // notice missing / in </span>
. "<span class='value'>".$get_zone_array['DB_ID']."</span>"
. "</li>";
echo $html;
then there wouldn't be any HTML-checking from the editor, making finding those nasty little xHTML errors harder to find.
Some of the reasons:
It's butt-ugly!
It's slow. (The += operator in Java is not fast. Sometimes acceptable, but definitely not fast because it has to do a lot of object creation and buffer copying.)
It's too easy to introduce XSS vulnerabilities through strings not being properly quoted.
It's too inflexible; change anything on the layout and you have to change all the code.
Use a templating library instead. So much easier to get right.