Linking document with words

JavaScript
1

When a user clicks on a particular row (I am using jqgrids), I am displaying a document content inside a jqxpanel just below the jqxgrid. A second jqxgrid is displayed simultaneously on the side of the jqxpanel with only a single column containing multiple rows. Each row contains a single word that exists somewhere in the document content. So, what I am trying to achieve is when a user clicks on that particular word, it should get highlighted in yellow color into the document content.

I am pulling up information for document and words from a JSON data using an jQuery Ajax call. the JSON data is mentioned below.

{
	"webservice_status": {
		"status": "SUCCESS",
		"message": ""
	},
	"documentContent": [{
		"webservice_status": null,
		"id": "4321",
		"wordTo_highlight": "Car",
		"document_id": 678767,
		"date_value": "2016-04-27",
		"doc_content": "                                                 Company Name:Car Transportation\n\n                                                 id:    000004321\n\n                                          Vehicle Report\n\n\nExcellent Condition:                Z-77-7654             Received Date/Time:       4/27/2016 13:02 CDT\n                                                   Collected Date/Time:      4/27/2016 13:02 CDT\n\n\n                  Sedan Final Report- 4/28/2016 14:38 CDT -\n\n         CASE: Z-77-7654\n\n                                                 Company Name:Car Transportation\n\n                                                 id:    000004321\n\n                                          Vehicle Report\n\n\nExcellent Condition:                Z-77-7654             Received Date/Time:       4/27/2016 13:02 CDT\n                                                   Collected Date/Time:      4/27/2016 13:02 CDT\n\n",
		"stop": 645,
		"start": 638

	}, {
		"webservice_status": null,
		"id": "4321",
		"wordTo_highlight": "SUV",
		"document_id": 678767,
		"date_value": "2016-04-27",
		"doc_content": "                                                 Company Name:Car Transportation\n\n                                                 id:    000004321\n\n                                          Vehicle Report\n\n\nExcellent Condition:                Z-77-7654             Received Date/Time:       4/27/2016 13:02 CDT\n                                                   Collected Date/Time:      4/27/2016 13:02 CDT\n\n\n                  Sedan Final Report- 4/28/2016 14:38 CDT -\n\n         CASE: Z-77-7654\n\n                                                 Company Name:Car Transportation\n\n                                                 id:    000004321\n\n                                          Vehicle Report\n\n\nExcellent Condition:                Z-77-7654             Received Date/Time:       4/27/2016 13:02 CDT\n                                                   Collected Date/Time:      4/27/2016 13:02 CDT\n\n",
		"stop": 2890,
		"start": 2883

	}, {
		"webservice_status": null,
		"id": "4321",
		"wordTo_highlight": "Car",
		"document_id": 678767,
		"date_value": "2016-04-27",
		"doc_content": "                                                 Company Name:Car Transportation\n\n                                                 id:    000004321\n\n                                          Vehicle Report\n\n\nExcellent Condition:                Z-77-7654             Received Date/Time:       4/27/2016 13:02 CDT\n                                                   Collected Date/Time:      4/27/2016 13:02 CDT\n\n\n                  Sedan Final Report- 4/28/2016 14:38 CDT -\n\n         CASE: Z-77-7654\n\n                                                 Company Name:Car Transportation\n\n                                                 id:    000004321\n\n                                          Vehicle Report\n\n\nExcellent Condition:                Z-77-7654             Received Date/Time:       4/27/2016 13:02 CDT\n                                                   Collected Date/Time:      4/27/2016 13:02 CDT\n\n",
		"stop": 1156,
		"start": 1149

	}, {
		"webservice_status": null,
		"id": "4321",
		"wordTo_highlight": "SUV",
		"document_id": 678767,
		"date_value": "2016-04-27",
		"doc_content": "                                                 Company Name:Car Transportation\n\n                                                 id:    000004321\n\n                                          Vehicle Report\n\n\nExcellent Condition:                Z-77-7654             Received Date/Time:       4/27/2016 13:02 CDT\n                                                   Collected Date/Time:      4/27/2016 13:02 CDT\n\n\n                  Sedan Final Report- 4/28/2016 14:38 CDT -\n\n         CASE: Z-77-7654\n\n                                                 Company Name:Car Transportation\n\n                                                 id:    000004321\n\n                                          Vehicle Report\n\n\nExcellent Condition:                Z-77-7654             Received Date/Time:       4/27/2016 13:02 CDT\n                                                   Collected Date/Time:      4/27/2016 13:02 CDT\n\n",
		"stop": 2970,
		"start": 2963

	}, {
		"webservice_status": null,
		"id": "4321",
		"wordTo_highlight": "SUV",
		"document_id": 678767,
		"date_value": "2016-04-27",
		"doc_content": "                                                 Company Name:Car Transportation\n\n                                                 id:    000004321\n\n                                          Vehicle Report\n\n\nExcellent Condition:                Z-77-7654             Received Date/Time:       4/27/2016 13:02 CDT\n                                                   Collected Date/Time:      4/27/2016 13:02 CDT\n\n\n                  Sedan Final Report- 4/28/2016 14:38 CDT -\n\n         CASE: Z-77-7654\n\n                                                 Company Name:Car Transportation\n\n                                                 id:    000004321\n\n                                          Vehicle Report\n\n\nExcellent Condition:                Z-77-7654             Received Date/Time:       4/27/2016 13:02 CDT\n                                                   Collected Date/Time:      4/27/2016 13:02 CDT\n\n",
		"stop": 3744,
		"start": 3737

	}]
}

As can be seen, the words that needs to be highlighted are written next to the key wordTo_highlight and it’s value is mentioned next to it. In our case, Car and SUV are the words that needs to be higlhighted in the document. The document content is next to the key doc_content.

All the JSON keys and values (except for stop and start) are identical and repeated 4 times because there are 4 words that needs to be highlighted.

The start and stop integer values corresponds to the location of the word that needs to be highlighted in yellow color.I am wondering how should I approach this problem to move forward?

2

The only div I am sending to the DOM which is visible when I Inpsect the Element is the following


var html = "<div id='docContent'>"; 

for (var i = 0; i < length; i += 1) {
html += "<div style='margin: 10px;'><pre>" + records[i].doc_content + "</pre></div>";

  }      
$("#docContent").html(html);
3

Please share a code example, e.g. jsfiddle. Then I’m quite sure that I can help you!

4

Sure. Please find this JSfiddle which basically works without Rangy library. I am not using this for my application.

Now in this JSFiddle, I am trying to use Rangy, referring to one of the online code demonstrating Rangy usage here. I am wondering what would go in place of document.getElementById('docContentPanel').addEventListener('click', highlight); because I am already inside click handler.

P.S: I am using raw links from github and JSfiddle is refusing to accept the scripts as strict MIME type is enabled by the author. So, second JSFiddle with Rangy library might not run for you in JSFiddle.

5

It is very hard to help you on that basis. The code isn’t formatted corrctly, you’re using rangy directly from GitHub (which serves wrong header information – use e.g. RawGit), you have a syntax error, etc.

Please provide a clean example where it’s easy to help.

Also please specifiy your use case. If you just want to highlight a word from a list item inside a paragraph you won’t need jqxgrid nor rangy.

6

Thanks for your reply.Here is an updated JSfiddle. It has one error of not reading createModule property which I am not sure why it is throwing. There is no createModule defined anywhere as of yet in my code.Do you know why?

Use Case:

The one column of jQXgrid contains all the words that are present in the paragraph. I also have character offsets in my jSON data (start and stop as shown in the original code above ) values which basically corresponds to the location of the words in the paragraph. so, basically, I want to highlight that word which a user clicks on the jqxgrid cell. Please let me know any more clarifications is required.

What can else be the alternative if Rangy is not a feasible option here? Thanks

7

Hi,

Please let me know at <snip />

I will solve this issue.

8

Thanks Mohit. Everything is there above. Let me know if you need more clarifications.

9

Sorry, but it still shows an error:

rangy is undefined

Youll need to debug this first. Just open your developer toolbar.

10

Maybe you’re overthinking this… wouldn’t a simple replace do the trick here? Like

var panel = $("#jqxPanel");
var text = panel.text();

panel.jqxPanel({
  width: 450, 
  height: 120
});

$("#jqxgrid").on("cellclick", function(event)  {
  var value = event.args.value;
  var highlighted = text.replace(
    ' ' + value + ' ', 
    ' <span class="highlight">' + value + '</span> '
  );
  
  panel.jqxPanel('clearcontent');
  panel.jqxPanel('append', highlighted);
});
11

Okay, Please use this updated JSfiddle. I don’t see any errors at my console.

12

Thanks for your input. Could you tell me how can I preserve formatting if I use your code? I believe var text = panel.text(); is messing up my paragraph and hence formatting. I have tried using var text = panel.html(); as well, but that didn’t work. Thanks

13

The formatting isn’t preserved from the start – if you want line breaks, you’ll have to use <br> tags.

14

Actually, I am getting formatted code when the Paragraph content is loading for the first time because the JSON data for above doc_content has \n in it. The formatting disappears when data is loaded again. But I believe that is not the root cause of what I am experiencing. I have a new JSFiddle which is doing the highlight work on JSFiddle only and not in my application. I checked the value of highlighted variable in the console log for JSFiddle and my application. I saw span tags in JSFiddle and not in my application. Is there something different JSFiddle uses that I need to remove before using it for browser?

  • I read that typing code has worked for many people instead of copying pasting but that didn’t work for me.

Any other way, I can test it what’s going wrong with my application?

Thanks.

15

Actually the formatting works when I use <div id='jqxPanel' style=" font-size: 13px; font-family: Verdana;"><div style="margin: 10px;"><pre> My content here </pre></div></div> and var text = panel.html();. But the highlight functionality stopped working. Is there anything additional thing I need to do with the replace when I am using formatting? Let me know if you need JS fiddle of what I am referring to. Thanks

16

Well that’s impossible to tell without seeing the code… but if it’s the same as in the fiddle, there’s something else going on.

Okay but that was not in your fiddle, so again impossible to know. :-/ Anyway, this line

panel.jqxPanel('clearcontent');

clears the content of the panel, including the wrapping <pre> tags. You could either wrap the highlighted text again before appending it to the panel, or get the full HTML from the start, like

// var text = panel.text();
var text = panel.html();

This will preserve all markup in the replacement.

(PS: Oops, it just occurred to me that <br> tags wouldn’t have worked for that reason either.) ^^

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.