Develop Reference

Best way to display a popup container with lots of data

So I am developing a website (ASP.Net Core MVC) and I am trying to display a container, with potentially lots of data inside, as soon as I click on a Button see the image.
Each row has its add button. There will be only around 10-30 buttons on a page at once. As soon as you click on such a button the showed pop up should display next to the clicked button. As you can see in the picture the pop up may contain a lot of data itself. And this data might differ from each row.
What is the best approach?
Placing each these pop ups already in the HTML and on click display: block and display: none when hovering away.
With jQuery and using the append method and summon the popup next to it and remove it after hovering away.
Or is there even a different approach to this?
Why am I asking?
I am concerned in terms of performance and loading time.

In my opinion there are downsides and upsides to both approaches.
For approach 1:
This will cause a slower initial load time but will be faster to use than approach 2 when it's loaded.
Approach 2:
A downside to this is jQuery needs to be loaded for this. I don't know if you use it throughout your project. But just for this, it would be a little bit overkill.
However initial loadtime can be fast and you could use AJAX to load each data when it's clicked.
I'm not a programmer with 10 years of experience, so this answer is pure my opinion and what I think about it.
Hope this opens a discussion!

Which is more fast in going from one page to other, a link or a button?

Recently I designed a page which has a navigation bar with four buttons. The user is directed to different page on clicking each different button. For the buttons I'm using the following code,
<button type="button" class="subheader-buttons" onclick="window.loation=document.location.href='PAGE 1'">Button 1</button>
I'am using the above code for all the four buttons. Now I'am wondering whether it will be advantageous to use links instead of buttons? Do links goes from one page to another faster than the buttons?

I believe it is much faster just linking, since what your doing is executing javascript which takes more than just linking it in an href!
But still this is a very big debate!
I take this info from uxmovement.com
When we look at the web, links outnumber buttons on most websites. The reason for this is because
links are easier to create
links are simple and sufficient
links don’t overshadow content
Buttons, however, are the opposite.
buttons take more time and effort to create
buttons can come in different sizes, colors and styles
buttons can sometimes overshadow content
You can get more info on this website:
http://getlevelten.com/blog/randall-knutson/design-decisions-buttons-vs-links-fight

You should use <a href=""> over window.location.href, for several good reasons.
Firstly If you have your javascript disabled, then none of the links would work.
Google Bot do not interpret javascript, and so they won't follow any of your links.
For more info: window.location.href vs clicking on an Anchor

Using a standard HTML link is the common way to do it. Although both methods will be roughly as fast.
Technically, because you're using JS with your button, your browser has to run the code before sending you to a different page so it may take a fraction of a second longer.
You could make a link a button without using JS:
<a href="your-page.html">
<button>Your Page</button>
</a>

It's the same. You can use <button></button> if you want.
However, use javascript to link to other page may take a sightly slow, u can check by using network

I think a link would be faster. In both, the web server will be going to the link specified by href. However, a link would just be that - a call to redirect. However, a button, as far as I am aware, sends much more data to the webserver, and also has many more things react to it - aka more overhead. Therefore, the link may be faster. However, it would only have a marginal effect really, unless you had a lot of traffic to your website, so I don't think it matter to much - you should probably just go with whatever you feel comfortable with.
I also just wanted to point out that I don't think using javascript to navigate to the page like that may be the best idea, regardless of whether you are using links or buttons. Serving webpages is a job for the webserver, and thus javascript calls may not be the best. Using the language that you are using for your web server (and if you are not, then I suggest you start using a back-end for your website), you should be able to respond easily to the button click / page redirect. The upside of this would be that it would also allow for any extra work to be done on the page as required.

The difference wouldn't be significant (or even noticeable by human). There are other concerns (most importantly accessibility) as to whether to use onclick or href.

Need help making a design decision with jQuery tabs

There will be a list of "plans" that the user has, and I want to be able to click on any of them (separated by divs) and have its information dynamically loaded from the database.
My question is whether I should use a jQuery tab interface and load the content that way, or a button which triggers an ajax call? Is there any easier/prettier way to do this that I'm not thinking of?
Thank you for any help, it is much appreciated!

There are many existing solutions online . You can roll your own too . Here are some samples which has many with AJAX content loading . You can either use existing or change then as you need.
http://flowplayer.org/tools/demos/tabs/ajax.html . You can change .html to your own php,asp ,jsp what ever pages and pass plan id and page can return HTML .
http://webdesignledger.com/tutorials/11-useful-jquery-tab-navigation-solutions
http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/
http://justintadlock.com/archives/2007/11/07/how-to-create-tabs-using-jquery

I used the jquery-jvert-tabs plugin for something very similar. Each tab had its content dynamically loaded and the whole div was called via ajax, it worked pretty well together.
Talking about which one is prettier, it doesn't matter whichever you choose if you just make sure is cohesive with your overall design :)

I would use tabs- no need to have a separate button if the plan name can be the tab name.
Design should almost always focus on usability and it seems like this approach would serve that goal well.
If your list of plans; however, is dynamic or can grow overtime then I would go with a dropdown populated with the list and a button that gets the details or wire up on onchange event and get the data.
The question is a bit vague so maybe if you provided more information we could better help you here.

create a "show up" window when you click register?

im a backend programmer who wants to have a window that appears in front of the current window when clicking "register".
so that you dont have to redirect to another page.
i think u guys know what i mean.
how do i do that? is it with jquery or javascript? is ajax involved?
and what is that kind of popup box called?

You want to write a div into your HTML that contains your login fields (i.e. the popup window). Set it to position:absolute; and position with CSS so it floats above the page contents and doesn't interrupt the flow when it appears. Get it all nice and positioned where you want it, then set it to display: none; so it will wait for javascript to make it appear.
Then (using jQuery), write something like this:
$('#register').click(function() {
$('#popup').show();
});
where #register is whatever gets clicked (can be most anything with id="register").
What happens whenever that form is submitted is up to you, and not any different from the options you'd have with any other HTML form. jQuery can help with AJAX if you decide to go that route and not send the surfer to another page to process the form.

It can be done using quite a few totally different approaches. As Sam said it's the concept of modal boxes.
You could do it completely on the client side using CSS and JavaScript (alternative), or via AJAX and some third-party libs.
Try being a bit more specific - what's the the backend/frontend environment? Is performance an issue (eg. minimal client-server communication)?

I believe you're referring to a modal form. You can search for modal popup javascript. There is a good javascript component called Lightbox that will help as well.
EDIT:
I mentioned Lightbox, but Lightbox Gone Wild is the one I meant. As others have pointed out, using a modal tool like this all you do is write the html you want to be displayed in the modal popup. That link is a good tutorial on the concept and explains things well.

Preventing the loss of keystrokes between pages in a web application

My current project is to write a web application that is an equivalent of an existing desktop application.
In the desktop app at certain points in the workflow the user might click on a button and then be shown a form to fill in. Even if it takes a little time for the app to display the form, expert users know what the form will be and will start typing, knowing that the app will "catch up with them".
In a web application this doesn't happen: when the user clicks a link their keystrokes are then lost until the form on the following page is dispayed. Does anyone have any tricks for preventing this? Do I have to move away from using separate pages and use AJAX to embed the form in the page using something like GWT, or will that still have the problem of lost keystrokes?

Keystrokes won't have an effect until the page has loaded, javascript has been processed and the text field is then focused.
Basically what you are really asking is; how do I speed up a web application to increase response times? Your anwser is AJAX!
Carefully think about the most common actions in the application and use AJAX to minimise the reloading of webpages. Remember, don't over-use AJAX. Using too much javascript can hinder usability just as much as it can improve it.
Related reading material:
Response Times: The Three Important Limits - Great article from the usability king, Jacon Neilson.
Ajax Usability Mistakes
AJAX Usability Checklist

Perhaps I am under-thinking the problem but I'll throw this out there... You could just put your form inside a hidden div or similar container that you show (perhaps give it a modal look/behavior?) on the click event of the link. That way the form is already loaded as part of the page. It should appear almost instantly.
You can find modal div tutorials all over the place, shouldn't be too tricky. If you're using ASP.NET there's even one included in Microsoft's AJAX library.

AJAX or plugin are your only chances.

I think it will be quite hard to do what you want. I presume that the real problem is that the new page takes too long to load. You should look at caching the page or doing partial caching on the static components such as pictures etc. to improve the load time or preloading the page and making it invisible. (see Simple Tricks for More Usable Forms for some ideas)
For coding options you could use javascript to capture the keystrokes (see Detecting various Keystroke)
<html><head>
<script language=javascript>
IE=document.all;
NN=document.layers;
kys="";
if (NN){document.captureEvents(Event.KEYPRESS)}
document.onkeypress=katch
function katch(e){
if (NN){kys+=e.which}
if (IE){kys+=event.keyCode}
document.forms[0].elements[0].value=kys
}
</script>
</head>
<body>
<form><input></form>
</body>
</html>
You will need to save and then transfer them to the new page after control passes from the current page. (see Save Changes on Close of Browser or when exiting the page)
For some general info on problems with detecting keystrokes in the various browsers have a look at Javascript - Detecting keystrokes.