I have two pages html (upload page and insert page) with own javascript files. These two pages are the same with the javascript functions. The unique difference is that when I load the insert page it doesn't load from the server some information and when I load the upload page it ask to server some information. The others difference is the name of the button.
Is there a way in order to merge these two page and before to load the page to know its behavior (and to print the right button for instance and to set some global parameters in order to use properly the javascript function)? Maybe with a Ajax with the server? Or it is better to have the two page with own code that the difference is minimum?
The server is written in php.
For instance:
Upload page has green button and the insert page has blue button.
The javascript are more or less the same but in certain case there is some difference. This difference can be manage by a if:
if(flag===true) do X
else do Y
I have to thought to maintain separately the two page but the code is redundant.
So I have thought this approach:
I don't load the page (I use an spinner loop) and I ask to server some information
By this information I show the
button blue or green and set some variables
My answer is: It is better to maintain a redundant code or to use a different approach? And if it is better to use a difference approach which?
Related
I'm working on a basic voting system where I have 2 HTML pages (both on the same domain).
On page 1 there are two buttons of which the person should choose one.
One page 2 I want to visualise the chosen option in a graph.
The goal is that if a button is clicked on page 1, the data on page 2 updates automatically without refreshing the whole page.
In order to do this, I tried saving the clicked option in a localStorage. I managed to get the data by writing a variable using localStorage.getItem(''). However, when I get the data, I have to manually refresh page 2 for the result to show. Is there a way to update the data on page 2? So if I press multiple buttons, multiple responses will show on page 2?
I also saw that there is a possibility of using WebSockets. Since I'm only familiar with HTML and JavaScript, I was wondering whether it's possible to solve my issue without setting up a server and run things locally. If that's not possible, what would be the best (and maybe easiest) way to solve my issue?
If you have page 2 successfully reading a variable that you get from local storage (which is being updated by actions taken on page 1), you can make a timer with setInterval to read from local storage every x milliseconds. Then the graph will update on its own.
See documentation for setInterval here.
Maybe the best and simple solution is setting specific url parameters for each button selection.
Then on the page 2 you simply show conditionally according the url parameter.
I have a problem, I have a php code that loads 10 seconds. This is too long to load the page.
So I need load the whole page first without it. And on place of it show simple text "loading".
Next through javascript load and show it independently. However, these functions are 3.I need to do that with every function.
Specifically, detection of CPU / RAM / HDD state on remote servers.Because it now loads me the page for 10 seconds. This is how I would like to load whole web without this functions the first one, and after a few seconds load it, regardless of the page load.
I needed to keep these features in the same file too.
I hope you understand. Thank you for your help.
Try something like this: First, make your initial page with just HTML. Then have the page make a call with AJAX to a separate PHP file which will do the more complex steps that will take time.
Good to keep things faster from start
follow the steps
1) basic html having loading screen and divs in which other data will be placed
2) send parallel ajaxes to server to get different data in parts
3) on ajax response add data to those predefined divs
4) hide loading screen
On my website I have an option to display some data and also to download it in csv format. Some of the data is quite large (20,000 - 900,000 rows in SQL). When I display it on the site I use paging so that it quickly displays only x amount of rows at a time, however, the download link of course should and is downloading the entire report which can take several seconds to a couple of minutes depending on file size. I'm wondering if there is a way to create an interim pop-up or message in-line that says something like "Gathering Information..." where I could additionally put an animated gif so the user knows something is happening. Creating this shouldn't be an issue but I'm not sure if there is a way to trigger that to disappear once the download pop-up appears. The solutions I've seen on this site all suggest using a timer, but thats not an option in this case as the times will vary a lot.
I'm using classic ASP so would like to use either that or JavaScipt. I could additionally use flash if makes a difference.
I would probably wire up the "Gathering info..." message to be hidden upon receipt of a Comet style message from the server that could be sent out as soon as the file is ready to download on its end.
The gist of it is to use a cookie that you set using pure javascript or jquery cookies for ease of use. Then you send the cookie's name to your server, which sends an update for said cookie with the file once delivered.
Meanwhile you have some JS code that checks periodically for the cookie to see if its updated, and can then update the layout accordingly.
I ended up doing this a different way. On my site I have page we'll call "default.asp" on that page is a link to another asp wel'll call "download.asp". download.asp is where the code is to do the SQL query and create the report, which means this is where the wait comes in. After the report is prepared the popup to save, open, etc is displayed. What I ended up doing is creating a div that by default is hidden. When the download button is clicked the div is unhidden, then just before the popup is displayed I once again hide the div. Hopefully this can be of help to someone else as well.
The website I need to implement is for a simple user study: On a page there are some images shown, the user rearranges them to a certain order, hits the 'next' button and then the same page is shown again, just with different images, which the user rearranges again. The process is repeated until a certain page count is reached.
Which images to show, comes from a mysql database and the user arrangements for each page need to be stored in the database as well. I have decent code for the database communication and logic of the image arrangements in php. The ordering functionality of the images works nicely with javascript and jquery.
What is completely throwing me off now, is bringing it all together and the 'save and reload the page with different images' mechanism. Of course I found loads of information on the internet but I just can't bring it together (I am a noob with javascript and that stuff is seriously making my head hurt).
My question:
How do I implement a page, with a page counter, which is increased when I press a button; pressing the button also triggers sending the data to php for putting it in the database and also reloads/updates the page with a different image selection based on the page counter to re-start the process.
I would be most greatful for all: from explaining the general principles to specific code examples. I just need to make this thing work :). Thanks!
You need a < form method=POST > tag which wrapps all your images
For each image you need a < input type="hidden" > tag which stores the image id. This tag must be resorted with the images as well.
Resorting must change the position in the DOM
you need a submit button as well
On server side you can access the submitted data with $_POST variable in same sorting as in the DOM
You can count the number pages in $_SESSION variable or send the counter as GET variable with the page url
This is only a short overview, i hope this helps you.
I am building a profile page in asp.net and it has two tabs(Horizontally), one for profile and one for settings. If a user navigates between tabs, he will see the settings page and the profile page. I know two ways to implement this.
Code the page contents in the page and use javascript to hide them, while navigating through them.
This type of method is inefficient as it will lead to performance issues and increase load time.
Use onclick event handler and build the page using codebehind file. This is more efficient way, I can use javascript to rotate something to show that something is being processed and then call a last method in codebehind to hide the rotating Image.
Besides these methods, Are there some other efficient ways to accomplish this?
The answer depends on many factors. Do you want the user to be able to switch back and forth without page refreshes? If so, then you have to load both tabs.
If you're ok with partial refreshes, then you can use Ajax to populate the tabs when you click on them. This has some performance consequences, since it needs to round trip to get the data.
If you're ok with complete refreshes, then simply have each be a different page, when you click on the other tab, it just loads the other tab page.
I'm really not sure what you mean by "build the page with code-behind". Perhaps you mean only include the html for the selected tab when the page is loaded. In my opinion, it's easier to simply make them different pages than to write complex code that changes the structure of the page.