Develop Reference

Prevent loading page when changing select value

I got this select tag in my form, which contains the name of a room
<select class = 'form-control' id = 'room_select' name = 'room'>".$rooms."</select>
I got 4 rooms so this select contains 4 options
$(document).ready(function(){
$("select").msDropDown();
$("#room_select").change(function(e){
e.preventDefault();
$("#room_select_form").submit();
});
$("#room_select option[value='<?php echo $room; ?>']").attr('selected', 'selected');
});
Then I got this doc ready function first one .msDropDown(); is to be able to get images in the options. Then I got the change function which I googled around and put in a preventdDefault to not refresh page, (still refresh) I thought that I could use an ajax funciton to do this but I dont really know how to write it down or even if it works.
So currently the problem is that my function changes the room value as seen last in the code, but it refreshes the select tag and I see room nr 1 again,

Your page is getting refreshed, because you are submitting the form in onchange listener. You need to put e.preventDefault(); in your form submit listener to prevent default form submit and then you can call ajax in you submit listener.
$(document).ready(function(){
$("select").msDropDown();
$("#room_select").change(function(e){
$("#room_select_form").submit();
});
$("#room_select option[value='<?php echo $room; ?>']").attr('selected', 'selected');
$("#room_select_form").submit(function(e){
e.preventDefault(); // to prevent page refresh
// your Ajax call goes here....
});
});

jQuery Get / Set on input box value disappearing

I'm trying to get the value inputted/selected to the search bar to stay displaying underneath it, within "Displaying 5 of 14 palettes for..."
Here's the link to the live prototype I've use.
The get set function I've used below, which allows me to do this, however this seems to appear just before the API kicks in, and disappear once the results load, any ideas why?
$(document).ready(function() {
$("#button").click(function(event) {
var un = $('#nobg').val();
greeting = un;
$("#displayUserName").text(greeting);
});
});

When you send the search query the page is reloaded - the value that was entered into the input field is gone. You'll need to have the search function return that value in some way - and either grab it with JavaScript and put it back into the div, or output it in the proper place via php.

I think the problem is that your JS code gets executed correctly, but then your form gets submitted and causes the page to reload.
Try sticking a event.preventDefault() in there, like so:
$(document).ready(function() {
$("#button").click(function(event) {
event.preventDefault();
var un = $('#nobg').val();
greeting = un;
$("#displayUserName").text(greeting);
});
});

How to hide labels until the submit button is clicked?

I am working with Spring Controller and JSP project. I have a jsp page in which I have one button which is Process and once I click that button, it shows me two radio button just below it and a Submit button as well.
And after clicking Submit button, if everything went fine, then I show - as this data will come from controller -
Success= true
Error= none
But as you can see in my jsfiddle. When my form gets loaded after I hit the jsp url it comes like this on the browser -
Process
Success=
Error=
Meaning, it has Process button at the top and just below Success and Error label with no values in it as we haven't passed any values yet from the controller. But it looks pretty weird for the users.
So what I am trying to do is, once my page gets loaded or I click Process button - I don't want to show Success and Error labels at all. It should be shown only after the submit button is clicked with its appropriate value in Success and Error depending on what is passed from the controller.
Is this possible to do in jquery? If I am right, basically I want to hide it until submit button is clicked...
Or is there any better design to show the Success and Error label with what I am trying to do?

It seems to me that you wouldn't need JavaScript to do this since as far as I can tell the form submission goes to the backend. In JSP itself you could just do a check like:
<% if (success.length > 0 || error.length > 0) { %>
<!-- success / error labels go here -->
<% } %>
If you actually wanted to do this via JavaScript, you could use something like:
if (!$("#success-value").text().length && !$("#error-value").text().length) {
// hide the labels
}
http://jsfiddle.net/4Nmqk/25/

have a look on my fiddle if it meet your idea.
jsfiddle.net/4Nmqk/26

window.onbeforeunload returns user to same page

On leaving a page with a form, I want to save the changes made without any user confirmation.
Having found this question I adapted one of the answers as follows. Note that I am not using return:
function setConfirmUnload(on) {
window.onbeforeunload = (on) ? unloadMessage : null;
}
function unloadMessage() {
alert('Gonna save now');
setTimeout(validate_submit,500);
}
This is only triggered when the user fills some value in the form. If an element value changes, I use
setConfirmUnload(true);
Result in FF23: when user clicks somewhere to leave the page, the alert is shown, validate_submit() is executed on "OK", new page appears - BUT now the alert reappears and the user is returned to the original page on "OK". Why? Can somebody confirm this behaviour?

The window.onbeforeunload method causes a confirm box to appear containing whatever message is returned by the function assigned to it. You can put alerts and other stuff in this method, but it will always end with a confirm message. If your function returns nothing, it will still give a message (determined by browser) saying "are you sure you want to leave this page" or something along those lines.

Can I use " window.onbeforeunload " twice in my html document?

I am creating a HTML layout where user can fill the data and save that page in HTML and JSON formats by using "save" and "save as draft" resp. Can i use
window.onbeforeunload
twice in my template.html file to show two different alert messages?
The alerts would show:
when page is empty and user tries to go to load another page
when user fills the data in the layout and tries to leave the layout without saving

At first see this example to to understand what will happen if you use it twice, then the idea given bellow
window.onbeforeunload=function()
{
if(form_empty())
return "Form is empty"; // message for empty form
else
return "Form is not empty"; // message for filled up form
}
function form_empty()
{
// check form fields whether the form is empty or not
// return true if form is empty
// return false if form is not empty
}

Just like any other event handler assigned in this way, if you set it again it will destroy any handler that was already there.
Now, if you're adding and removing the event based on the state of the page, then that shouldn't be a problem. Otherwise, it's a bit more complicated. In the case of onbeforeunload, however, it would be best to just have one.