Can Sisyphus deal with a page which is displayed by ID? - javascript

Sisyphus is a plugin that deals with auto saving of forms in local storage.
It works pretty well on first look. What I want to know, is it possible to use with a dynamic page driven by an ID.
eg: MyPage/1 and MyPage/2 (MVC url's but could equally be querystrings), such that the page is rendered, maybe bringing some value back from a database, rendering some unique controls.
In other words, can Sisyphus deal with a parameterised page?

Turns out it's actually really easy.
We can use the locationBased option as per documentation
$("form").sisyphus({
locationBased: true
});

Related

What is preferred implementation of Chrome extension that catches and reads newly added list values on one specific web page?

I need to create a Chrome extension that will work only for one webpage with specific URL. It will monitor changes to list of items (orders) located on page and if new order appears, it will read some values from order and do something with them. It also may be neccessary to refresh the page from time to time (using timer, maybe).
What architechture will be suitable to accomplish such a task?
Now - to thoughts I have so far. I think now of using only one content script bound to page URL. Will it be enough? Or should I introduce some background script also? Or anything else?
As #wOxxOm said in the comments, creating one content script must be sufficient for reading the values and page refreshing.

How to refresh other html files when a function is called in one html file.

I need some help.
I have angularjs application. It has 2 tabs. The first one is for viewing items and the second tab is for adding items. I want the viewing tab to refresh once I add need items from the second tab. I know how to refresh a page with
window.location.reload();
but I would like to know how I can refresh the other page as well when a function is called. Is there a way to refresh all html views with a click?
Thank you.
Not sure I fully understood, but it seems like you have two browser tabs (or windows) open and you want one to affect the other.
Since they're separated, they're also running two different app instances, meaning that stuff like scope.$apply() just won't affect the other one. Basically, you need to switch from "communication across the app" to "communication across the domain". To achieve that you can use localStorage (or a simple cookie, database, file, etc...).
The idea is that one view would check for a certain session variable (say, every two seconds), and force an update and clear that variable in case that variable is set.
The other view, of course, would be in charge of setting that variable to the session once an item is added.
That's probably the simplest approach.
If you want instant changes and constant communication, check out webSockets, but I think it might be an overkill for this.
See this simple example:
VIEW: http://jsfiddle.net/1dshqpay/
ADD: http://jsfiddle.net/u7n46Lsk/
They are two completely separate apps/URLs, but adding an item from ADD will show up in VIEW.
(I couldn't create it here as two snippets as they're sandboxed and not supporting localStorage)

Changing html form index when a new form element is added

I am working on an old legacy application which used document.forms[index] approach to access elements in the form and to submit the form. My task is to add a new top panel with few textboxes and buttons. I am using a form for this. This top panel is to be included in all the pages in the application. Now, all the pages stop working since form[index] needs to be updated in all the pages. I know using the form name is the best approach. I have around 1000 places to change. What is the best approach to avoid this problem? I still want to use form for my top panel since I am using spring forms to get the data. Any valuable advice will be appreciated. Thanks.
If you looked up the definition of "unmaintainable", that would be a good example.
One trick might be to leave one set of forms, hidden, with the legacy stuff in them, then make another set, lower in the HTML, that the user sees. Then use some JavaScript to map the data back into the original forms in order to continue to work with the expectations of the legacy code. This keeps everything in the same index-order.

Automatically refresh SharePoint site when item is added to a Form Library

I have a question about automatically refreshing a SharePoint form library any time an item is added to it. We have a business team within our company where any individual on the team can fill out a particular InfoPath form. Once that form is filled out and submitted, it is saved to the aforementioned SharePoint form library.
When any user submits a form like this, the other users like to know that it has happened and they almost always have their browsers open and pointed to this particular SharePoint form library. These form submissions and the data they contain are somewhat time-critical, so it's an important way for everyone on the team to be up-to-date about the submitted information.
Does anyone know if such a workflow is possible in InfoPath? I've Googled this issue already and I've found a lot of helpful advice about redirecting to the same page using the SPUtility class's functionality (which does seem to work), but I want to refresh/redirect the entire page, not just the pop-up window for which the SPUtility class is apparently responsible. I've also seen some results suggest using a Content Editor web part containing some JavaScript for refreshing the page and then accessing that Content Editor via a workflow or event receiver. Does anyone have any experience solving an issue like this or have some ideas? I'm not looking for anyone to write the solution for me - I just need a push in the right direction from someone that's more experienced with SharePoint.
Thanks!
I would suggest a bit of JavaScript that periodically redirects the page to itself. If you wanted to get flashy, you could use the Client Object Model to query the list for the last modified date of the last modified item. If that changes, refresh, or you could use the Notifications API to show a nice 'Notification', perhaps with a refresh button that reloads the page?

HTML onmousedown/onclick display hidden HTML

I'm making a form to order different varieties of sweets from a website. At the moment I have checkboxes with each variety. Once they have chosen the varieties they want (they can have more than one) then I need some more information. To do this I want to display a new box when they check each checkbox. Event attributes seem to be adequate, but I don't really know javascript, so is this the right way for me to do it? Can event attributes only trigger javascript?
Or perhaps I'm going about this the wrong way, would there be a better way to make this form? I've considered a shopping cart but for what I want I think it's too much, and I'm not very advanced.
So, I just want a way to show html after a checkbox has been ticked, or a better way to make my form.
Thanks
If you have skills with server-side programming (PHP, ASP, ASP.Net, JSP), that may be the way to go. When the checkbox changes, redraw the options using AJAX of some flavor (e.g. an ASP.Net UpdatePanel). This will avoid doing much with JavaScript on the client, even though it's certainly doable that way.
If you aren't strong on either client or server-side programming, a third-party shopping cart is probably the way to go. I would start your investigation with PayPal.
Important: if you do write your own order form, make sure you are not storing credit card numbers at any point in the process. Avoid even having credit card numbers submitted to your site if at all possible. Become familiar with PCI Compliance. This alone is often a justification for using a third-party tool.
EDIT: Per Paul's comment below that he wants to keep it as simple as possible and no transactions will be handled:
"Can event attributes only trigger javascript?"
Yes, either inline JavaScript or script contained in an external file, or elsewhere on the page in script tags.
Here's a little sample of one checkbox triggering other HTML elements (in this case, other checkboxes): http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html
You can show or hide an element using code like this:
var elementToToggle = document.getElementById('someId');
elementToToggle.style.display = "none"; // hide
OR
elementToToggle.style.display = "";
Using the jQuery (www.jquery.com) library would potentially make this simpler, but there is an initial learning curve.

Categories