1

I inserted javascript code in a Sharepoint 2013 wikipage, through Embed Code.

The basic javascript code appends rows to a table, the code is

var myTable= document.getElementById('myTable');
myTable.innerHTML += myRecord;

Where variable myRecord contains the html code for the row to be appended, the html code is something like

<tr><td>my cell</td><td>my cell 2</td></tr>

The code works as expected and appends the rows to the table 'myTable'.

But when I hit refresh to reload the SharePoint 2013 wikipage, all the rows added programmatically through the javascript are gone

Kindly suggest how to dynamically add HTML content and make it persistent, so the dynamic HTML content don't disappear on page reloads. I know I could save it in local storage and retrieve it or try cookies or session, but its not feasible because the table will have a couple of thousand records or much more.

So I just want to ensure whatever changes I do to the Sharepoint 2013 wikipage's HTML code, through javascript, remain saved or persistent.

Some references I found are as follows, but since I am new to sharepoint I am unable to understand clearly, a detailed step by step instruction would be nice

Programmatically editing Sharepoint Wiki content

https://sharepoint.stackexchange.com/questions/69633/is-it-possible-to-programmatically-add-page-items-to-enterprise-wiki-using-csom

https://habaneroconsulting.com/insights/programmatically-change-content-on-a-wiki-page-in-sharepoint-2010#.VcF81v_JAuQ

Was able to replicate save button using CoreInvoke('PageActionClick', this), but the save button default functionality toggles between save and edit, I only want the save functionality.

Some better references I found online

http://sharepointace.blogspot.com/2013/05/add-custom-buttons-to-edit-or-save.html https://sharepoint.stackexchange.com/questions/88456/assign-edit-fuctionality-to-a-custom-button

Community
  • 1
  • 1
joel
  • 747
  • 2
  • 9
  • 20
  • Just for the record: what is "*Embed Code*" – theideasmith Aug 05 '15 at 03:14
  • @theideasmith "Embed Code" is the option under "insert menu" for SharePoint 2013 WikiPage – joel Aug 05 '15 at 13:24
  • Just so I understand - embed code allows you to run your own custom code in the context of your sharepoint page? Also, can you edit this table without code? I just haven't ever used sharepoint so I'm trying to be informed. – theideasmith Aug 05 '15 at 15:00
  • @theideasmith yes embed code allows you to enter custom code with respect to sharepoint wiki page. It is possible for user to edit table by hitting the edit button, however to simplify the user experience the user can enter the fields and hit the Add button which appends to the table. – joel Aug 05 '15 at 18:25

1 Answers1

0

Disclaimer: I haven't used Sharepoint, but I'll do my best to help.

To solve this problem, it is necessary to understand a little bit about how the browser operates. Each time you reload a page, the browser requests the currently navigated-to URL from the server. The server then returns an HTML document which is rendered by the browser.

You are correctly appending HTML to the table. Unfortunately, every change you make exists only in the microcosm of your browser. Each time you reload the page, new HTML from the server is returned, which obviously does not contain your changes.

The only way to persist data between page reloads is to have your data mirrored by the server. To do this, you'd need to somehow submit your data to the server using the same mechanism Sharepoint's own webapp submits data to its servers. Alternatively, you could cache only your local changes inside the browser and populate the desire table with them when its page is visited. I'll leave this challenge to the reader.

theideasmith
  • 2,835
  • 2
  • 13
  • 20
  • could you please elaborate in detail on how data can be mirrored by the server, it would be great if you could point me to a tutorial or website which explains those steps in detail. I am new to sharepoint, so the tutorial would help me greatly. I also edited my answer with some references I found. Thanks – joel Aug 05 '15 at 13:31
  • My problem. Should have been more clear. In "mirrored by the server" I meant whatever local changes you make must be sent over to the server and stored in the server's database, so when the page reloads and the server reads your sharepoint document from its database and sends it over to your browser, your previous changes are there. To send your local changes to the server, you would need (I think) to use inspect element and figure out what the format of the `PUSH` requests are when you edit the table manually. Replicate those requests using [`JQuery.ajax`](http://api.jquery.com/jquery.ajax/) – theideasmith Aug 05 '15 at 15:03
  • thanks for the tip, I will debug and see what post is happening behind the scenes when I hit the save button for SharePoint 2013 wikipage, and see if I can replicate that post programmatically – joel Aug 05 '15 at 18:26
  • Or you could mimic the user: enter fields and then click the add button – using JQuery. Does this need to be automated? You can check out the [Sharepoint API](https://msdn.microsoft.com/en-us/library/office/jj860569.aspx) – theideasmith Aug 05 '15 at 21:05
  • after stepping through code in IE browser, I found the coreInvoke() method to be the closest to replicating the save button functionality. But since its an exact replication of the default save functionality, the save button behaves as edit and save, I only need the save functionality not the edit functionality. I have added some useful links to my question. – joel Aug 08 '15 at 23:59
  • Try looking at browser automation libraries like phantomjs or selenium webdriver. They might solve your problem. – theideasmith Aug 09 '15 at 02:42