HTML Form appearing on button press - html

I am a newbie to web development so sorry for my stupidity. I am actually creating a local website and I wanted to make a user profile page on that website. What I want to accomplish is that the profile page should be not be editable in the normal use case but when the user presses the Edit button (like in facebook), the fields become editable and a save button appears (basically a form but without reloading the page or any server side work). The user then updates the fields and saves. The save request will be sent to the server to update the database (can that somehow be done without reloading the page too ? i see facebook page does not reload when you edit and save).
So that is it. Waiting for a reply.
P.S. I think some javascript code will come to my rescue.

This is a very general question, so I can't do anything but give a general answer. I would highly recommend you learn jQuery.
jQuery makes it easy to manipulate the HTML and CSS from Javascript - which you'll need to do in order to show/hide the content and the forms for editing the content (or otherwise manipulate the code on the page in order to achieve what you want - there are various ways to do this, adriano's comment on your question lays out a good solution).
The specific part about sending such requests in the background is called AJAX, and jQuery has support for that too.

Related

Can a HTML form be used offline?

I'm wanting to create a HTML page to be accessed via the kindle browser. I'm wanting to create a puzzle using a form and, when the user solves the puzzle, it will just create a new puzzle. I'm aiming to use cookies to hold the users progress. It can cope with HTML and CSS 3. Can I get a normal web page to redraw itself after the user submits without going back to the server?
Before I get started on the project I just wanted to see whether it was possible doing it this way. Ideally I'd like to put the HTML, CSS and any data into a mobi format but I'm not sure if this is the right place to ask that.
Anyway, thanks for reading.
Mike

Redirect html link based on time

So I have a website which has a link to a form - within the same domain name. However I only want the form to be accessible during specific times of the day i.e. 2.30pm-4pm and 8.30pm-12am. Outside of these hours, it should automatically redirect to another page if the link to that page is clicked. I.e. it should divert whenever that page is being accessed out of hours if that makes sense.
Any ideas as to how I would go about doing this?
This cannot be done with pure HTML as HTML is static. You could do this in a variety of languages depending on what your server is running.
A Javascript solution could work, but the client could get around it if Javascript were to be disabled so I would recommend a server sided solution (PHP, Node.js, PERL, whatever you use etc.)

Change icon based on posts from another page

Apologies if this has been asked before. I searched and couldn't find anything.
I have a basic landing page website that has an icon that links to "Hot Alerts", ie notifications of system outages. What I'm wondering is if there's a way to either change the icon or add a notification bubble (similar to Facebook notifications) if content on a Sharepoint blog has been updated in the past "X" hours.
Here's the icon I'm referring to:
Hot Alerts Icon
I've found examples of how to style the icon with CSS, but those all require manually entering the number of new notifications.
What I need is a way for the icon to "check" the sharepoint page for its most recent post when the landing page is loaded.
Most of my colleagues use Internet Explorer, but Chrome is creeping into the workflow.
What you need to use it the Javascript Object Model (JSOM). You will be able to read lists (for new posts) upon page loading and then showing or hiding the icon. A lot of example code to read lists can be found on SO.
If you want to use a 'bubble', take a look at sp.ui.notify (https://msdn.microsoft.com/en-us/library/office/ee550701%28v=office.14%29.aspx) methods to show an overlay notification popup on the page.
It's very unlikely this can be done with pure CSS. Any of the following languages will provide suitable solutions: JQuery, JS, PHP.
In PHP, you could use $_GET to place the variable in the URL. So one page would use $_GET to post the variable to the URL and the PHP file loading the page would use it to retrieve the variable from the URL.

live content from html to html

I'm using UIWebView to display data from my organization data (publicize and legal), however, for instance, I would only want to pull specific data from the html file rather than pulling the whole URL. e.g. I want to pull the "News" section of the html and I want the user to only stay in that page, not enabling them to go into other parts of the website (e.g. home page, contact us) and allowing them to view the PDF article on the HTML file.
I've asked around and read up on DOM and screen scraping, but it seem that the data pulled are stored in a database instead.
Is there any way that I can pull just the HTML "News" section with the PDF URL into my customized HTML file and that it will be updated live (maybe every 30second it will refresh and pull information from the website so that the content and list of PDF are up to date)(e.g. added in 3new article into the main website, my customize HTML file will also refresh and pull information from website and update my article list)
If anyone can point to me a specific method that allow HTML to HTML data passing (live), that will be great and I can go do more research on it. Currently very lost and confuse as it is my first time doing this. Any help/feedback will be very much appreciated :)
EDIT: For example, google map or google search. I don't want to use the whole google webpage, just taking the important thing that i want like the search result or map display.
This will involve quite a lot of learning on your part - you'll have to learn HTML / the DOM / JavaScript and iOS/UIWebVIew.
Lets leave the live refresh part for now, I'll post another answer or edit to that later on.
That's not going to easy either (check out my earlier posting today on background execution issues that will affect you, unless the update is only to take place in the foreground
iOS Run Code Once a Day)
You will have to do something like this. And note that I've never tried this, nor seen posting of people who have on here, but in theory it should work, but there will be a lot of learning as I've said, and lots of trial and error. Its a big task when you're not familiar with these things.
1) Download the html page and load it in a UIWebView, but that UIWebView is hidden so the user's can't see it.
2) When the page has loaded its dom will be accessable.
3) You can use Javascript to access the DOM and look for the parts you want.
How you inject and run the Javascript in UIWebView can be answered in a separate question (this answer will get too long if all the exact details are included).
4) Remove the parts of the dom you are not interested in. Or use use events to make only those parts you are interested in appear, jQuery can probably help here.
5) Display the UIWebView
Alternatively the HTML could be saved to a file and string parsing could be used to search for the bits you are looking for and create a new text html file from it. I think this would get very messy, better to take advantage of the fact that UIWebView will parse the HTML page and create the dom for you.

Best Way For Back Button To Leave Form Data

I'm creating a web page based on user input from a form. After the user sees the generated page I want to allow them to press the back button and make changes to the form. I would like to display the form as they had filled it out previously. What is the best way to get this behavior (with cross browser support)?
After the user sees the generated page I want to allow them to press the back button and make changes to the form. I would like to display the form as they had filled it out previously.
There is no need to add any clever fancy code; that is what browsers will do by default, unless you take active steps to prevent it, such as:
breaking the cache with Cache-Control/Pragma headers
generating the form page itself from the response to a POST (use POST-Redirect-GET instead)
generating the form elements from script
Cookie solutions are fragile and need special handling if you don't want two tabs open at once to get very confused. Make it easy for yourself: let the browser do the work.
JQuery has a nice cookie plugin which i used to keep exam data while the user browsed the site for the answers in place.
Store the saved information in cookies as delimited data. If the cookie exists, repopulate the form.
If you use document.formName.fieldName syntax, there are no cross-browser issues.
As a fall-back if cookies are disabled, you can store it on the server and do the same with AJAX.