Add Underline and Bold to current clicked element in JavaScript

Richa

SOLVED CLOSED ACTIVE ANSWERED
User: Richa
Posted: on Oct 22, 2018 09:02 AM
Forum: JavaScript
Answer: 1
Views: 7094
Sample Code: Download

There is a code written in code behind to generate HTML tag's dynamically, upon click of particular tag, inner text must be bold and highlight.

<div>

//dynamically added code from code behind (code taken from browser inspect element)
<p id='ContentPlaceHolder1_divps_subProD__1_0' style='cursor:pointer;' onclick='showSubProcess('f01d668d-9c9d-4907-bd66-128c21c4c32d','FEL1-MCM','1','yes', 'divps_subProD__1_0');'>
	PROJECT1 
	<i> </i>
</p>

</div>

C# code:

protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
	{	
		//some code
		
		HtmlGenericControl divp = new HtmlGenericControl("p");
		divp.ID = "divps_" + controlName + "_" + divcnt + "_" + intSubProcess;
		divp.Style.Add("cursor", "pointer");
		
		ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "showSubProcess", "showSubProcess(1,1,1,1)", true);
		string processCompleted = "yes";
		if (drSubP["PROCESS_STATUS"].ToString() == "0" && currentProcesCode == (drSubP["PROCESS_CODE"].ToString()))
			processCompleted = "no";
		divp.Attributes.Add("onclick", "showSubProcess('" + projectId + "','" + drSubP["PROCESS_CODE"].ToString() + "','" + divcnt.ToString() + "','" + processCompleted + "', '" + divp.ID + "');");
		
		
		HtmlGenericControl divm = new HtmlGenericControl("i");
                                
		divp.Controls.Add(divm);
		divgrgridContent.Controls.Add(divp);
		HtmlGenericControl diva = new HtmlGenericControl("a");
		HtmlGenericControl divi = new HtmlGenericControl("i");
		diva.Style.Add("cursor", "pointer");
		diva.Style.Add("font-style", "normal !important");

		diva.InnerHtml = drSubP["PROCESS_NAME"].ToString(); 
		diva.Attributes.Add("href", strvarUrl);
		diva.ID = "divis_" + controlName + "_" + divcnt + "_" + intSubProcess;

		if (drSubP["PROCESS_STATUS"].ToString() == "COMPLETED")    
			divi.Attributes.Add("class", "fa fa-lightbulb-o green");
		else if (drSubP["PROCESS_STATUS"].ToString() == "NEW")
			divi.Attributes.Add("class", "fa fa-circle grayborder");
		else if (drSubP["PROCESS_STATUS"].ToString() == "PENDING")
			divi.Attributes.Add("class", "fa fa-lightbulb-o red");                          
									   
		divi.Attributes.Add("aria-hidden", "true");
		divm.Controls.Add(divi);
		divm.Controls.Add(diva);
	}	
}

public static string GetSubSubProcesses(string projectId, string currentProcesCode, string processCompleted, string pID)
{
	StringBuilder strsubProcess = new StringBuilder();
	//some code
	
	return strsubProcess.ToString();
}

Javascript code:

<style type="text/css">
.mystyle
{
	color:black;
	font-weight:bold;
	text-decoration:underline;
}
</style>

<script>
function showSubProcess(projid, curProcessId, processId, processCompleted, pID)
{
	if (projid != 1)
	{
		$('#loadingmessage').show();
		
		//code to underline and bold selected text
		var element1 = document.getElementById("ContentPlaceHolder1_" + pID);
		element1.classList.add("mystyle");

		globalProcessId = processId;
		var contPalaceH =  "ContentPlaceHolder1_divgrgridContent_subProD_" + processId;
		var data = document.getElementById(contPalaceH);

		
		var href = window.location.href.split('/');
		var root = href[0] + '//' + href[2] + '/' + href[3];
		
		$.ajax({
			type: "POST",
			url: root + "/Project/Home_New.aspx/GetSubSubProcesses",
			data: '{ projectId: "' + projid + '", currentProcesCode: "' + curProcessId + '",processCompleted:"' + processCompleted + '",pID:"' + pID + '"}',
			contentType: "application/json; charset=utf-8",
			async: true,
			cache: false,
			dataType: "json",
			success: OnSuccessData,
			failure: function (response) {
				$('#loadingmessage').hide();
				alert(response.d);
			}
		});                       

	}
}

</script>

Below 2 line of code is written to make current/last/latest selected/clicked text bold and underline:

//code to underline and bold selected text
var element1 = document.getElementById("ContentPlaceHolder1_" + pID);
element1.classList.add("mystyle");

but instead of current, all selected/clicked text is bold and underline.

Please let me know how to make only current/latest selected/clicked text bold and underline ?

Thanks in advance

pandeyis...

0 6

Reply
ANSWER
User: pandeyism
Replied: on Oct 23, 2018 07:16 AM
Report

Hi Richa,

Please refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .mystyle
        {
            color: black;
            font-weight: bold;
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        function showSubProcess(projid, curProcessId, processId, processCompleted, pID) {
            if (projid != 1) {
                $('#loadingmessage').show();
                var elements = $('[id*=divps_subProD]');
                var element1 = document.getElementById("ContentPlaceHolder1_" + pID);
                for (var i = 0; i < elements.length; i++) {
                    if (elements[i].id == element1.id) {
                        //code to underline and bold selected text
                        element1.className = "mystyle";
                        globalProcessId = processId;
                        var contPalaceH = "ContentPlaceHolder1_divgrgridContent_subProD_" + processId;
                        var data = document.getElementById(contPalaceH);
                        var href = window.location.href.split('/');
                        var root = href[0] + '//' + href[2] + '/' + href[3];
                    }
                    else {
                        //code to remove underline and bold from others
                        elements[i].className = "";
                    }
                }
            }
        }  
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divgrgridContent" runat="server">
        <p id="ContentPlaceHolder1_divps_subProD__1_0" style="cursor: pointer;" onclick="showSubProcess('f01d668d-9c9d-4907-bd66-128c21c4c32d','FEL1-MCM','1','yes', 'divps_subProD__1_0');">
            PROJECT1
        </p>
        <p id="ContentPlaceHolder1_divps_subProD__2_0" style="cursor: pointer;" onclick="showSubProcess('f01d668d-9c9d-4907-bd66-128c21c4c32d','FEL1-MCM','1','yes', 'divps_subProD__2_0');">
            Project2
        </p>
    </div>
    </form>
</body>
</html>

Namespaces

using System.Text;
using System.Data;

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string controlName = "a";
        string divcnt = "aaaa";
        string intSubProcess = "y";
        string currentProcesCode = "123";
        string strvarUrl = "";
        int projectId = 0;
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("PROCESS_STATUS", typeof(string)), 
                                                new DataColumn("PROCESS_CODE", typeof(string)), 
                                                new DataColumn("PROCESS_NAME", typeof(string))});
        dt.Rows.Add("NEW", "0", "aspforums.net");
        //some code
        HtmlGenericControl divp = new HtmlGenericControl("p");
        divp.ID = "divps_" + controlName + "_" + divcnt + "_" + intSubProcess;
        divp.Style.Add("cursor", "pointer");
        ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "showSubProcess", "showSubProcess(1,1,1,1)", true);
        string processCompleted = "yes";
        if (dt.Rows[0]["PROCESS_STATUS"].ToString() == "0" && currentProcesCode == (dt.Rows[0]["PROCESS_CODE"].ToString()))
            processCompleted = "no";
        divp.Attributes.Add("onclick", "showSubProcess('" + projectId + "','" + dt.Rows[0]["PROCESS_CODE"].ToString() + "','" + divcnt.ToString() + "','" + processCompleted + "', '" + divp.ID + "');");
        HtmlGenericControl divm = new HtmlGenericControl("i");
        divp.Controls.Add(divm);
        divgrgridContent.Controls.Add(divp);
        HtmlGenericControl diva = new HtmlGenericControl("a");
        HtmlGenericControl divi = new HtmlGenericControl("i");
        diva.Style.Add("cursor", "pointer");
        diva.Style.Add("font-style", "normal !important");
        diva.InnerHtml = dt.Rows[0]["PROCESS_NAME"].ToString();
        diva.Attributes.Add("href", strvarUrl);
        diva.ID = "divis_" + controlName + "_" + divcnt + "_" + intSubProcess;
        if (dt.Rows[0]["PROCESS_STATUS"].ToString() == "COMPLETED")
        {
            divi.Attributes.Add("class", "fa fa-lightbulb-o green");
        }
        else if (dt.Rows[0]["PROCESS_STATUS"].ToString() == "NEW")
        {
            divi.Attributes.Add("class", "fa fa-circle grayborder");
        }
        else if (dt.Rows[0]["PROCESS_STATUS"].ToString() == "PENDING")
        {
            divi.Attributes.Add("class", "fa fa-lightbulb-o red");
        }
        divi.Attributes.Add("aria-hidden", "true");
        divm.Controls.Add(divi);
        divm.Controls.Add(diva);
    }
}

public static string GetSubSubProcesses(string projectId, string currentProcesCode, string processCompleted, string pID)
{
    StringBuilder strsubProcess = new StringBuilder();
    //some code
    return strsubProcess.ToString();
}

Screenshot

Add Underline and Bold to current clicked element in JavaScript

Company

Explore

Follow us

Contact Us