Develop Reference

I wanto copy text in tag in list

Step 1
get id form button
Step 2
copy text in td for same id
Codepen)
https://codepen.io/terecal/pen/LoxmbP?editors=1010
$(".copy_code").click(function(e){
e.preventDefault();
var id = this.id
alert("id : ", id)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>code</td>
<td colspan="122" id="my_code_122"> hello world </td>
</tr>
</table>
<button type="button" name="button" id="122" class="copy_code">copy</button>
Is it possible?
p.s
I applied your method.
The following code works fine
`
$(".copy_code").click(function(e){
e.preventDefault();
var id = $(this).attr('id')
alert("id : " + id)
var text = document.getElementById(id),
textVal = text.innerText;
textTd = $(`#my_code_${id}`).text()
alert("copy code " + textTd) // textVal code copy
// I want to copy this text as if pressing ctrl + c. Is there a way? Thank you if you let me know.
});
`
The problem is almost solved.
I just want to copy the text I got as if I pressed ctrl + C
Can you tell me how?
ps2
current code is this
$(".copy_code").click(function(e){
e.preventDefault();
var id = $(this).attr('id')
alert("id : " + id)
var text = document.getElementById(id),
textVal = text.innerText;
textTd = $(`#my_code_${id}`).text()
alert("copy code " + textTd) // textVal code copy
// I want to copy this text as if pressing ctrl + c. Is there a way? Thank you if you let me know.
var dummy = document.createElement('textarea');
dummy.value = textTd;
//
document.body.appendChild(dummy );
dummy.select();
//
document.execCommand('copy');
document.body.removeChild(dummy);
alert("copy code2 " + textTd)
});
and copy is normally works
but after ctrl + v
it's new line(br) is not work ^^;;
original:
from django.contrib import admin
from django.urls import path, include
from . import views
app_name= 'css_challenge'
urlpatterns = [
]
copy:
from django.contrib import adminfrom django.urls import path, includefrom . import views
app_name= 'css_challenge'urlpatterns = [
]
is it possible to apply new line??

Perhaps try this. First of all you need to put a + rather than a , in your alert. Secondly, I don't know if you specifically need copy functionality because you want to paste the text somewhere else. AFAIK, I've only "copied" like that on inputs/textareas. I am unsure whether other elements support that type of API. Regardless, the below code should grab the text content. I haven't tested it but there ya go.
$(".copy_code").click(function(e){
e.preventDefault();
var id = this.id
alert("id : "+ id)
var text = document.getElementById(id),
textVal = text.innerText;
console.log(textVal);
});

Maybe you can try:
$(".copy_code").click(function(e){
e.preventDefault();
var id = $(this).attr('id');
alert(id)
// var copyText = document.getElementById("my_code");
// copyText.select();
// document.execCommand("copy");
// alert("Copied the text: " + copyText.value);
});

You can copy text to the clipboard using javascript - it's just a little inconvenient. The text has to be part of a html element.
Let's start by creating a dummy text element
var dummy = document.createElement('textarea');
and give it the value of your variable
dummy.value = textTd;
add the dummy to the DOM
document.body.appendChild(el);
select it
dummy.select();
finally copy it's text content to the system clipboard
document.execCommand('copy');
and ultimately remove the created element from the DOM again
document.body.removeChild(dummy);

Create button OnClientClick asp net

I'm creating button from code c#:
Button btnAddCalculation = new Button();
btnAddCalculation.ID = "btnAddCalculation";
btnAddCalculation.Text = "Add count";
btnAddCalculation.SkinID = "middleButton";
btnAddCalculation.Visible = true;
string sPath = String.Format(
"WindowCalculationArenda.aspx?{0}={1}&TempGuid={2}&IdDocument={3}",
SessionViewstateConstants.CalculationType,
CalcType.New,
Guid.NewGuid(),
oEditedDocument.Id.ToString()
);
// btnAddCalculation.Attributes.Add("onclick", #"window.open('InformationAboutAddAddr.aspx', '_blank', 'location=yes,height=500,width=450,scrollbars=yes,status=yes');");
btnAddCalculation.Click += new EventHandler(btnClick_cl);
btnAddCalculation.OnClientClick = clsCommonHelper.sGetWindowOpen(sPath, 1100, 500) + "return false;";
public static string sGetWindowOpen(string sLink, int iWidth, int iHeight)
{
return "javascript:setTimeout(function(){ WindowOpen('" + sLink + "', " + iWidth + ", " + iHeight + "); }, 100); ";
}
but in the client side the function OnClientClick does not work, when I click
nothing happens. What Did I do wrong???
Generated HTML:
<input type="submit" name="ctl00$ctl00$Main$EditorMain$tabTabContainer$ctl00$Attr‌​433$btnAddCalculatio‌​n"
value="Add count"
id="ctl00_ctl00_Main_EditorMain_tabTabContainer_ctl00_Attr43‌​3_btnAddCalculation"
disabled="disabled" class="blue_button" />

For Button being disabled
If the dynamic button is added to a container that is itself disabled, then this dynamic button will also be disabled. To make this sure that button is added properly, use a new container in HTML (e.g. <asp:PlaceHolder>) and add button to that container from codebehind.
Also good to check following :-
When Creating the new button, use CausesValidation = false. This will avoid any RequiredFieldValidator getting fired when this button is clicked. RequiredFieldValidator also stops button from being clicked.
e.g.
Button btnAddCalculation = new Button();
btnAddCalculation.ID = "btnAddCalculation";
btnAddCalculation.Text = "Add count";
btnAddCalculation.SkinID = "middleButton";
btnAddCalculation.Visible = true;
btnAddCalculation.Enabled = true;
btnAddCalculation.CausesValidation = false;

Fix this:
Button btnAddCalculation = new Button();
btnAddCalculation.ID = "btnAddCalculation";
btnAddCalculation.Text = "Add count";
btnAddCalculation.SkinID = "middleButton";
btnAddCalculation.Visible = true;
btnAddCalculation.Enabled = true;
string sPath = String.Format(
"WindowCalculationArenda.aspx?{0}={1}&TempGuid={2}&IdDocument={3}",
SessionViewstateConstants.CalculationType,
CalcType.New,
Guid.NewGuid(),
oEditedDocument.Id.ToString()
);
// btnAddCalculation.Attributes.Add("onclick", #"window.open('InformationAboutAddAddr.aspx', '_blank', 'location=yes,height=500,width=450,scrollbars=yes,status=yes');");
btnAddCalculation.Click += new EventHandler(btnClick_cl);
btnAddCalculation.OnClientClick = clsCommonHelper.sGetWindowOpen(sPath, 1100, 500) + "return false;";
public static string sGetWindowOpen(string sLink, int iWidth, int iHeight)
{
return "javascript:setTimeout(function(){ WindowOpen('" + sLink + "', " + iWidth + ", " + iHeight + "); }, 100); ";
}
By default the asp.net server will create the button as disabled unless you specify explicitly otherwise.

The ASP.NET code you provided looks ok; so I suspect the problem is related to a script that is run on the clientside. Maybe the submit-button is disabled because the form contents are not valid yet. In this case your button might be disabled, depending on the selector that is used to identify the submit-button.
To avoid this, change the behavior of the button so that it is rendered as an input of type button instead of submit. You can use the UseSubmitBehavior-property to achieve this:
btnAddCalculation.UseSubmitBehavior = false;

Dynamically generated html, document.getElementByID returns null

I am generating an html table dynamically in my code behind file
protected void PopulateMemberTable()
{
var guid = "";
string[] selectedColumns = new[] { "MEMBID", "MEMBER_NAME", "BIRTH", "IPA", "HPNAME" };
if (Session["guid"] != null)
guid = Session["guid"].ToString();
StringBuilder html = new StringBuilder();
DataTable dt = MemberSearch(guid, membFirst.Text.ToString(), membLast.Text.ToString(), membDob.Text.ToString(), membId.Text.ToString());
if (dt != null)
{
DataTable new_dt = new DataView(dt).ToTable(false, selectedColumns);
html.Append("<table class='table table-hover data-table'>");
html.Append("<thead>");
html.Append("<tr>");
foreach (DataColumn column in new_dt.Columns)
{
html.Append("<th>");
switch(column.ColumnName.ToString())
{
case "MEMBID":
html.Append("Member ID");
break;
case "MEMBER_NAME":
html.Append("Member Name");
break;
case "BIRTH":
html.Append("DOB");
break;
case "IPA":
html.Append("IPA");
break;
case "HPNAME":
html.Append("Health Plan");
break;
}
html.Append("</th>");
}
//btn column (no header)
html.Append("<th></th>");
html.Append("</tr>");
html.Append("</thead>");
html.Append("<tbody>");
var counter = 0;
foreach (DataRow row in new_dt.Rows)
{
counter++;
string btnId = "\"" + "<%btnMembGrid" + counter.ToString() + ".ClientId%>" + "\"";
html.Append("<tr onclick='document.getElementById(" + btnId + ").click()'>");
var btnValue = new StringBuilder();
foreach(DataColumn column in new_dt.Columns)
{
html.Append("<td>");
html.Append(row[column.ColumnName]);
btnValue.Append(row[column.ColumnName]);
btnValue.Append(";");
html.Append("</td>");
}
html.Append("<td><asp:button runat='server' OnClick='selectMember' CssClass='btn btn-default' style='display:none' value = '"
+ btnValue.ToString() + "' id= 'btnMembGrid" + counter.ToString() + "'/></td>");
html.Append("</tr>");
}
html.Append("</tbody>");
html.Append("</table>");
}
else
html.Append("<div class='alert alert-danger' role='alert'>No Members Found</div>");
membTable.Controls.Add(new Literal { Text = html.ToString() });
}
The table is generated just fine, but now I am trying to call some server side code when a row is clicked
foreach (DataRow row in new_dt.Rows)
{
counter++;
string btnId = "\"" + "<%btnMembGrid" + counter.ToString() + ".ClientId%>" + "\"";
html.Append("<tr onclick='document.getElementById(" + btnId + ").click()'>");
var btnValue = new StringBuilder();
foreach(DataColumn column in new_dt.Columns)
{
html.Append("<td>");
html.Append(row[column.ColumnName]);
btnValue.Append(row[column.ColumnName]);
btnValue.Append(";");
html.Append("</td>");
}
html.Append("<td><asp:button runat='server' OnClick='selectMember' CssClass='btn btn-default' style='display:none' value = '"
+ btnValue.ToString() + "' id= 'btnMembGrid" + counter.ToString() + "'/></td>");
html.Append("</tr>");
}
I attempted to accomplish this task by placing a hidden <asp:Button/> in each row and then adding a corresponding onclick attribute to each <tr> tag
This is how the generated html looks like in the dev console
However when I attempt to click the row I get the following error message
I am having a hard time understanding what exactly I'm doing wrong. I'd appreciate some input, or possibly even an alternative approach.

You can use jquery and use the delegation model to handle click on dynamic elements. if for example you have some html like
<div id="dynamicname'></div>
then use
the jquery code snippet
$(document).on('click','#dynamicname',function(){
//handle your event here
});
dynamic html should always be handled by delegation model. And you can use
var dynamic_name="#"+getYourDynamicRowName;//variable for dynamic id's of dynamic html element
$(document).on('click',dynamic_name,function(){
//handle your event here
});

As per my experience we can not use asp tag while you are creating dynamic HTML.
If you see your code of dev console you can see that controls are not rendered properly..rendered with asp tag..
To achieve it you can use javascript/Jquery to call server side function.
<input type="button" ID="btn" runat="server" onclick="fn();" />
And in your javascript:
fn = function(){
__doPostBack("<%=btn.ClientID%>", "");
}
And in your code:
`
protected override void btnEvent(IPostBackEventHandler source, string eventArgument)
{
//call the button event
//base.btnEvent(source, eventArgument);
if (source == btn)
{
//do some logic
}
}

After figuring out that passing an <asp:button/> as a string wasn't going to work, I took an alternative approach.
In populateMemberTable()I added an href attribute to the first column in each row
var href = true;
foreach(DataColumn column in new_dt.Columns)
{
html.Append("<td>");
if (href)
{
href = false;
html.Append("<a href='/default.aspx?guid=" + Session["guid"] + "&membid=" + row[column.ColumnName] +"'>");
html.Append(row[column.ColumnName]);
html.Append("</a></td>");
}
else
{
html.Append(row[column.ColumnName]);
btnValue.Append(row[column.ColumnName]);
btnValue.Append(";");
html.Append("</td>");
}
}
And then I saved the membId as a session variable in Page_Load()
protected void Page_Load(object sender, EventArgs e)
{
//save guid (http://url.com?guid=xxxxxx) as session variable
Session["guid"] = Request.QueryString["guid"];
var membId = Request.QueryString["membid"];
if (membId != null)
{
Session["membid"] = membId;
}
}
It might not be the most elegant solution, but it got me what I needed and was straightforward to implement. Thanks for the input everyone!

C# errors running javascript and getting cell content

I'm trying to make a graph with the content in a GridView, and now I have this codes:
string js0 = #"var data = {}; CarregarGrafico(data);";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Graph0L", js0, true);
var i = 0;
foreach (GridViewRow row in GridView1.Rows)
{
string periodo = "" + row.Cells[0].Text + "/" + row.Cells[1].Text + "";
string prevReceb = row.Cells[6].Text.ToString();
string totalReceb = row.Cells[10].Text.ToString();
string js1 = #"myBarChart.addData([{1}, {2}], '{0}');";
js1 = js1.Replace("{0}", periodo).Replace("{1}", prevReceb).Replace("{2}", totalReceb);
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Graph1L", js1, true);
i++;
if (i >= 10) break;
}
But I'm dealing with some problems:
Script aren't appearing at the page
I can't get the prevReceb and totalReceb values because it was in a <span> tag. How can I use only text into span of the cell?
Please, help me, thanks.

How do you dynamically create a radio button in Javascript that works in all browsers?

Dynamically creating a radio button using eg
var radioInput = document.createElement('input');
radioInput.setAttribute('type', 'radio');
radioInput.setAttribute('name', name);
works in Firefox but not in IE. Why not?

Taking a step from what Patrick suggests, using a temporary node we can get rid of the try/catch:
function createRadioElement(name, checked) {
var radioHtml = '<input type="radio" name="' + name + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
var radioFragment = document.createElement('div');
radioFragment.innerHTML = radioHtml;
return radioFragment.firstChild;
}

Based on this post and its comments:
http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html
the following works. Apparently the problem is that you can't dynamically set the name property in IE. I also found that you can't dynamically set the checked attribute either.
function createRadioElement( name, checked ) {
var radioInput;
try {
var radioHtml = '<input type="radio" name="' + name + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioInput = document.createElement(radioHtml);
} catch( err ) {
radioInput = document.createElement('input');
radioInput.setAttribute('type', 'radio');
radioInput.setAttribute('name', name);
if ( checked ) {
radioInput.setAttribute('checked', 'checked');
}
}
return radioInput;
}

Here's an example of more general solution which detects IE up front and handles other attributes IE also has problems with, extracted from DOMBuilder:
var createElement = (function()
{
// Detect IE using conditional compilation
if (/*#cc_on #*//*#if (#_win32)!/*#end #*/false)
{
// Translations for attribute names which IE would otherwise choke on
var attrTranslations =
{
"class": "className",
"for": "htmlFor"
};
var setAttribute = function(element, attr, value)
{
if (attrTranslations.hasOwnProperty(attr))
{
element[attrTranslations[attr]] = value;
}
else if (attr == "style")
{
element.style.cssText = value;
}
else
{
element.setAttribute(attr, value);
}
};
return function(tagName, attributes)
{
attributes = attributes || {};
// See http://channel9.msdn.com/Wiki/InternetExplorerProgrammingBugs
if (attributes.hasOwnProperty("name") ||
attributes.hasOwnProperty("checked") ||
attributes.hasOwnProperty("multiple"))
{
var tagParts = ["<" + tagName];
if (attributes.hasOwnProperty("name"))
{
tagParts[tagParts.length] =
' name="' + attributes.name + '"';
delete attributes.name;
}
if (attributes.hasOwnProperty("checked") &&
"" + attributes.checked == "true")
{
tagParts[tagParts.length] = " checked";
delete attributes.checked;
}
if (attributes.hasOwnProperty("multiple") &&
"" + attributes.multiple == "true")
{
tagParts[tagParts.length] = " multiple";
delete attributes.multiple;
}
tagParts[tagParts.length] = ">";
var element =
document.createElement(tagParts.join(""));
}
else
{
var element = document.createElement(tagName);
}
for (var attr in attributes)
{
if (attributes.hasOwnProperty(attr))
{
setAttribute(element, attr, attributes[attr]);
}
}
return element;
};
}
// All other browsers
else
{
return function(tagName, attributes)
{
attributes = attributes || {};
var element = document.createElement(tagName);
for (var attr in attributes)
{
if (attributes.hasOwnProperty(attr))
{
element.setAttribute(attr, attributes[attr]);
}
}
return element;
};
}
})();
// Usage
var rb = createElement("input", {type: "radio", checked: true});
The full DOMBuilder version also handles event listener registration and specification of child nodes.

Personally I wouldn't create nodes myself. As you've noticed there are just too many browser specific problems. Normally I use Builder.node from script.aculo.us. Using this your code would become something like this:
Builder.node('input', {type: 'radio', name: name})

My solution:
html
head
script(type='text/javascript')
function createRadioButton()
{
var newRadioButton
= document.createElement(input(type='radio',name='radio',value='1st'));
document.body.insertBefore(newRadioButton);
}
body
input(type='button',onclick='createRadioButton();',value='Create Radio Button')

Dynamically created radio button in javascript:
<%# Page Language=”C#” AutoEventWireup=”true” CodeBehind=”RadioDemo.aspx.cs” Inherits=”JavascriptTutorial.RadioDemo” %>
<!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 runat=”server”>
<title></title>
<script type=”text/javascript”>
/* Getting Id of Div in which radio button will be add*/
var containerDivClientId = “<%= containerDiv.ClientID %>”;
/*variable count uses for define unique Ids of radio buttons and group name*/
var count = 100;
/*This function call by button OnClientClick event and uses for create radio buttons*/
function dynamicRadioButton()
{
/* create a radio button */
var radioYes = document.createElement(“input”);
radioYes.setAttribute(“type”, “radio”);
/*Set id of new created radio button*/
radioYes.setAttribute(“id”, “radioYes” + count);
/*set unique group name for pair of Yes / No */
radioYes.setAttribute(“name”, “Boolean” + count);
/*creating label for Text to Radio button*/
var lblYes = document.createElement(“lable”);
/*create text node for label Text which display for Radio button*/
var textYes = document.createTextNode(“Yes”);
/*add text to new create lable*/
lblYes.appendChild(textYes);
/*add radio button to Div*/
containerDiv.appendChild(radioYes);
/*add label text for radio button to Div*/
containerDiv.appendChild(lblYes);
/*add space between two radio buttons*/
var space = document.createElement(“span”);
space.setAttribute(“innerHTML”, “ &nbsp”);
containerDiv.appendChild(space);
var radioNo = document.createElement(“input”);
radioNo.setAttribute(“type”, “radio”);
radioNo.setAttribute(“id”, “radioNo” + count);
radioNo.setAttribute(“name”, “Boolean” + count);
var lblNo = document.createElement(“label”);
lblNo.innerHTML = “No”;
containerDiv.appendChild(radioNo);
containerDiv.appendChild(lblNo);
/*add new line for new pair of radio buttons*/
var spaceBr= document.createElement(“br”);
containerDiv.appendChild(spaceBr);
count++;
return false;
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:Button ID=”btnCreate” runat=”server” Text=”Click Me” OnClientClick=”return dynamicRadioButton();” />
<div id=”containerDiv” runat=”server”></div>
</div>
</form>
</body>
</html>
(source)

for(i=0;i<=10;i++){
var selecttag1=document.createElement("input");
selecttag1.setAttribute("type", "radio");
selecttag1.setAttribute("name", "irrSelectNo"+i);
selecttag1.setAttribute("value", "N");
selecttag1.setAttribute("id","irrSelectNo"+i);
var lbl1 = document.createElement("label");
lbl1.innerHTML = "YES";
cell3Div.appendChild(lbl);
cell3Div.appendChild(selecttag1);
}

Quick reply to an older post:
The post above by Roundcrisis is fine, IF AND ONLY IF, you know the number of radio/checkbox controls that will be used before-hand. In some situations, addressed by this topic of 'dynamically creating radio buttons', the number of controls that will be needed by the user is not known. Further, I do not recommend 'skipping' the 'try-catch' error trapping, as this allows for ease of catching future browser implementations which may not comply with the current standards. Of these solutions, I recommend using the solution proposed by Patrick Wilkes in his reply to his own question.
This is repeated here in an effort to avoid confusion:
function createRadioElement( name, checked ) {
var radioInput;
try {
var radioHtml = '<input type="radio" name="' + name + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioInput = document.createElement(radioHtml);
} catch( err ) {
radioInput = document.createElement('input');
radioInput.setAttribute('type', 'radio');
radioInput.setAttribute('name', name);
if ( checked ) {
radioInput.setAttribute('checked', 'checked');
}
}
return radioInput;}

Patrick's answer works, or you can set the "defaultChecked" attribute too (this will work in IE for radio or checkbox elements, and won't cause errors in other browsers.
PS Full list of attributes you can't set in IE is listed here:
http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html

why not creating the input, set the style to dispaly: none and then change the display when necesary
this way you can also probably handle users whitout js better.

My suggestion is not to use document.Create(). Better solution is to construct actual HTML of future control and then assign it like innerHTML to some placeholder - it allows browser to render it itself which is much faster than any JS DOM manipulations.
Cheers.