Highlight and focus selected word in IFRAME using jQuery in ASP.Net

Last Reply 3 months ago By dharmendr

Posted 3 months ago

Hi i have 2 pages.

1st page has a gridview. In this i will selected a value. it will go to next page. 

in 2nd page on page load it should focus directly to the selected word from the gridview.

A particular word will be bold in the function getbookmark(). I Want to got the particualr word on page load.

Please Help

1st page code will have gridview. Onselectedchanged for the gridview is below.

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
    //Session["bookmark"] = GridView1.SelectedRow.Cells[1].Text;
    Session["bookmark"] = GridView1.SelectedRow.Cells[1].Text;
    Session["bmId"] = GridView1.SelectedRow.Cells[3].Text;
    Response.Redirect("select.aspx");
}

 

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" PageSize="4" DataSourceID="SqlDataSource1" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" Width="100%">
    <Columns>                         
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="BookmarkLineText" HeaderText="BookmarkLineText" SortExpression="BookmarkLineText" />
        <asp:BoundField DataField="UserId" HeaderText="UserId" SortExpression="UserId" />
        <asp:BoundField DataField="iNodeId" HeaderText="iNodeId" SortExpression="iNodeId" />
    </Columns>
</asp:GridView>

I will fetch a file from db which is binary format. I will be converting it to html and displaying in iframe.

Posted 3 months ago Modified on 2 months ago

Hi suhaas121,

You can't modify the content of ifame. So you can't highlight the content directly.

Instead of assigning the iframe src from code behind you need to set the html in HiddenField.

Then in JavaScript you need modify the html to set the highlight text and assign it to the iframe html.

Check the below example.

HTML

Default

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
    PageSize="4" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" BackColor="White"
    BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" Width="100%">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="BookmarkLineText" HeaderText="BookmarkLineText" SortExpression="BookmarkLineText" />
        <asp:BoundField DataField="UserId" HeaderText="UserId" SortExpression="UserId" />
        <asp:BoundField DataField="iNodeId" HeaderText="iNodeId" SortExpression="iNodeId" />
    </Columns>
    <FooterStyle BackColor="White" ForeColor="#000066" />
    <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
    <RowStyle ForeColor="#000066" />
    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#007DBB" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>

Select

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var searchWord = $("#hfWord").val();
        var iframeHtml = $("#hfHTML").val();
        var index = iframeHtml.indexOf(searchWord);
        if (index >= 0) {
            iframeHtml = iframeHtml.substring(0, index) + "<span id='lblHighlight' style='background-color: yellow;'>"
            + iframeHtml.substring(index, index + searchWord.length) + "</span>" + iframeHtml.substring(index + searchWord.length);
        }
        $('#frmDisplay').contents().find('body').html(iframeHtml);
        if ($('#frmDisplay').contents().find('#lblHighlight').length > 0) {
            $('#frmDisplay').contents().find('#lblHighlight')[0].scrollIntoView()
        }
    });
</script>
<asp:HiddenField ID="hfWord" runat="server" />
<asp:HiddenField ID="hfHTML" runat="server" />
<iframe id="frmDisplay" runat="server" frameborder="0"></iframe>

Code

Default

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[3] { 
            new System.Data.DataColumn("UserId", typeof(string)),
            new System.Data.DataColumn("BookmarkLineText", typeof(string)),
            new System.Data.DataColumn("iNodeId",typeof(int)) });
        dt.Rows.Add("Admin", "Remove the remaining", 5);
        dt.Rows.Add("Admin", "Install the Bracket", 3);
        dt.Rows.Add("Admin", "The main Receiver", 27);
        dt.Rows.Add("Admin", "Examine the general", 23);
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
    Session["bookmark"] = GridView1.SelectedRow.Cells[1].Text;
    Session["bmId"] = GridView1.SelectedRow.Cells[3].Text;
    Response.Redirect("Select.aspx");
}

Select

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        if (Session["bmId"] != null)
        {
            hfWord.Value = Session["bookmark"].ToString();
            getbookmark();
        }
    }
}

public void getbookmark()
{
    // Read the html and set in HiddenField.
    hfHTML.Value = System.IO.File.ReadAllText(Server.MapPath("~/Test.html"));
}

Screenshot