Develop Reference

Hide div on jsp page when back browser button is pressed

Well I have a "jsp1" which contains a div with a button. Once the div button is pressed, it takes me to the next "jsp2". However, if the "back" browser button is clicked, I need the div button on "jsp1" to be hidden and prevent the user from click it, and if possible show other div that is already hidden. How can I achieve this using no frameworks.
piece "jsp1":
<c:choose>
<c:when test = "${submissionButtonSwitch == 1}">
<div> <!-- div i want to show after -->
<h2>This bill has already been submitted, go back to carry out a new purchase</h2>
</div>
</c:when>
<c:otherwise>
<div class="buttonWrapper"> <!-- div I want to hide after -->
<input class="button" type = "submit" value = "SUBMIT">
</div>
</c:otherwise>
</c:choose>
As you can see, I tried to get the result that I want through JSTL server side operations, but after a while I think this has more to do with JavaScript, than any other thing.
I would be really glad to any suggestion, Im kind of beginner with this.

Just add load event to check navigation status performance.getEntriesByType("navigation")[0].type === "back_forward" if browser back clicked then show/hide components:
window.addEventListener('load', function(){
if(performance.getEntriesByType("navigation")[0].type === "back_forward"){
// show hide components
}
}

Two submit buttons, one is always hidden, how to hit enter and use the correct submit button

BEGINNING OF EDITED*** Updated function, however, hitting "enter" doesn't trigger the second submit button. Also adding this line of code:
document.getElementById('btn-default').removeAttribute("disabled");
in case the user wants to switch back to the original search button instead.
END OF EDIT ***
I have two submit buttons, the first one is the default for a general input search box. However, if the user clicks on the "Advance" link it will hide the general search input along with the submit button. And display the "Advance" submit button. When hitting enter it will default to the first submit button. Is there a way to detect when a submit button is hidden, to use the submit button that is displayed? Here is part of my code below:
FORM:
<form id='searchGroup' class='form-inline mt-2 mt-md-0' action='test.php' method='POST'>
<div class="col-md-5" id="defaultDisplay" >
<input class='form-control mr-sm-2' type='text' placeholder='' aria-label='Search' name='SearchAll' autofocus='autofocus'>
<!-- STANDARD SEARCH BUTTON -->
<input id='btn-default' class='btn btn-default my-2 my-sm-0' type='submit' name='SearchStd' value='Search'/>
</div>
<div class="collapse" id="collapseExample">
<!-- MULTIPLE INPUTS HERE -->
<!-- ADVANCED SEARCH BUTTON -->
<input class='btn btn-primary' type='submit' name='SearchAdv' value='Search'/>
</div>
</form>
FUNCTION to display div:
<script>
function switchVisible() {
if (document.getElementById('defaultDisplay')) {
if (document.getElementById('defaultDisplay').style.display == 'none') {
document.getElementById('defaultDisplay').style.display = 'block';
document.getElementById('btn-default').removeAttribute("disabled");
}
else {
document.getElementById('defaultDisplay').style.display = 'none';
document.getElementById('btn-default').setAttribute("disabled", "disabled");
}
}
}
</script>

One thing you could do is to just create two forms, one for basic search and one for advanced search. Then toggle the display between the two. It's a small, negligible redundancy that would fix this issue without resorting to JavaScript workarounds.
Alternatively, just use one form for both simple and advanced, and only having one submit button. Treat your form as an advanced form to begin with. A "simple search" would simply be an advanced search with empty advanced fields.

Any input or button on the form with TYPE="submit" will be linked to the ENTER key.
Notably in your case, if two such inputs have the TYPE="submit", the first one will be triggered on enter keypress.
One solution could be to set the DISABLED attribute on the one you do not want to trigger on ENTER keypress.
According to your requirement, you want the 'Advanced' submit button to be disabled to begin with, so edit your HTML to include the disabled property like this:
<input class='btn btn-primary' type='submit' name='SearchAdv' value='Search' disabled="disabled" />
Then, when you execute the code to show the 'Advanced' section, add the Disabled attribute to the 'default' section submit button:
document.querySelector('input[name="SearchStd"]').setAttribute('disabled','disabled');
while at the same time removing the DISABLED attribute from the 'advanced' section's button:
document.querySelector('input[name="SearchAdv"]').removeAttribute('disabled','disabled');
At this stage, I should mention I have noticed that your JavaScript code is working in a slightly different manner to how I understand your app to work:
It seems you are saying for each toggle "if the DEFAULT search is display block (shown), set display none (hide it), otherwise if it is not shown, show it"
I'm pretty sure you planned to be toggling the Advanced section, not the Default section (as the Default is shown by DEFAULT!). So assuming this is true and assuming you already made the HTML change mentioned above, AND assuming you've made a CSS change so that #collapseExample has display NONE to begin with... you'd want you JS like this:
<script>
function switchVisible() {
if (document.getElementById('collapseExample')) {
if (document.getElementById('collapseExample').style.display == 'none') {
document.getElementById('collapseExample').style.display = 'block';
document.querySelector('input[name="SearchStd"]').setAttribute('disabled','disabled');
document.querySelector('input[name="SearchAdv"]').removeAttribute('disabled','disabled');
}
else {
document.getElementById('collapseExample').style.display = 'none';
document.querySelector('input[name="SearchStd"]').removeAttribute('disabled','disabled');
document.querySelector('input[name="SearchAdv"]').setAttribute('disabled','disabled');
}
}
}
</script>
There are some ways to improve this by the way, for example you could look into "caching elements" so you don't have to repeat the getElementById's, and you could add IDs to the actual inputs which is considered good practice when manipulating unique elements, but to keep it simple and answer your actual question, this is my answer. Good luck!

Include different .php files in JS popup

I have multiple buttons which currently redirect to different pages for users to perform a single action and they would then need to click another button whilst on the confirmation page to go back where they were before. This is old school and inconvenient...
What I would like to do is create 1 single pop-up box which would get triggered (appear) when any of those buttons are clicked. Inside the box, I want the relevant .php file to appear so users can confirm their action and the page would then reload and display a confirmation message.
Example:
"Delete" button needs to trigger the confirmation-popup.php to appear with the delete.php file included in it so users can confirm the deletion.
"Cancel" button needs to trigger the confirmation-popup.php to appear with the cancel.php file included in it so users can confirm the cancellation.
Here's what I've done:
- Created the pop up and included it on their Account page (that's where all the buttons are).
- Added a JS which passes through the button ID to trigger the popup
When either of the buttons is clicked, the popup would appear fine.
I'm stuck at the stage where different "action".php files need to passed and included in the body of the popup. I know I could create multiple popups each for its relevant action, but we all know this isn't best practice and it's doubling up.
Any help would be appreciated!
Edit: Added code after the below comment
HTML:
<button class="button-small button-red" id="confirm-delete">Delete</button>
JS:
$(document).ready(function() {
$("#confirm-delete").click(function() {
if (!$(".confirm-popup").is(":visible")) {
$(".confirm-popup").fadeIn("slow");
return false;
}
});
});
PHP confirm_popup.php:
<div class="confirm-popup">
<?php include 'delete_auction.php'; ?>
</div>

You can open different iframes in the popup based on the button pressed. That will allow you to use one popup and you will just edit the iframe src attribute to the correct php page. For example you can add an HTML attribute to each button that holds the URL of the page that should be opened by the button. Then you will have some JS code that on the button press will read the attribute that holds the URL and puts it in the iframe src attribute inside the popup.
Something like this using jQuery:
<button class="myclass" cotent-url="delete.php">Delete</button>
<button class="myclass" cotent-url="save.php">Save</button>
<div class="popup"><iframe src=""></iframe></div>
<script type="text/javascript">
$('.myclass').click(function(){
$('.popup iframe').attr('src', $(this).attr('content-url'));
})
</script>
Or AJAX way:
<button class="myclass" cotent-url="delete.php">Delete</button>
<button class="myclass" cotent-url="save.php">Save</button>
<div class="popup"></div>
<script type="text/javascript">
$('.myclass').click(function(){
$.ajax({
url: $(this).attr('content-url'),
data: {},
success: function(response) {
$('.popup').html(response);
},
dataType: 'html'
});
})
</script>

Trouble making searchfield on click show button and hide when it closes

I am trying to show the submit button when I click on the search field and I also am trying to hide it when the field closes (the is form located in the main navigation bar)...
This is my code :
$(document).ready(function(){
$("#search-click").click(function(){
$(".search-form .search-submit").css("display" , "block");
});
});
It's not working at all...this is my link : http://dev.pixstreammedia.com.s150147.gridserver.com/system/

Try this:
http://jsfiddle.net/5UJ5U/1/
HTML:
<form>
<input type="search" class="searchclick" placeholder="search">
<input type="submit" class="sub" value="search">
</form>
JS:
$(".sub").hide();
$(document).ready(function(){
$(".searchclick").click(function(){
$(".sub").fadeToggle('fast');
});
});

1.You are not showing the right id : your button has id : search-submit-button and you display block the other element but not this id, so the solution is to add #search-submit-button to your display block function.
2.As for the hiding you could do an mouseleave, to class: search-form then hide the button.

It's working the button is just tucked underneath. Also in the console the $ isn't assigned to jQuery, so I had manually use your snippet with jQuery directly.
jQuery(".search-form .search-submit").css("display" , "block");
Type that into your js console to see the button is there, but you only see a small portion of it.

Jquery change <p> text programmatically

EDIT: The solution was to add this to the profile page instead of the gender page.
$('#profile').live( 'pageinit',function(event){
$('p#pTest').text(localStorage.getItem('gender'));
});
I have a paragraph with som text in a listview that I want to change programatically from another page after clikcing save.
EDIT: This is my listview in profile.html. When you click on the item you get to another page where you can save your gender. I want to change the paragraph in this listview to the gender that was changed from the other page.
<ul data-role="listview" >
<li><a href="gender.html">
<img src="images/gender2.jpg" />
<h3>Gender</h3>
<p id="pTest">Male</p>
</a></li> </ul>
The gender html page is just basic stuff with two radio buttons and a save button.
Here is my javascript code(in a seperate file):
$('#gender').live('pageinit', function(event) {
var gender = localStorage.getItem('gender');
var boolMale = true;
if (gender == "female") boolMale = false;
$('#radio-choice-male').attr("checked",boolMale).checkboxradio("refresh");
$('#radio-choice-female').attr("checked",!boolMale).checkboxradio("refresh");
$('#saveGenderButton').click(function() {
if ($('#radio-choice-male').is(':checked'))
localStorage.setItem('gender', "male");
else localStorage.setItem('gender', "female");
$('#pTest').html('test'); //does not work
//$('p#pTest').text('test'); //does not work
//$('#pTest').text('test'); //does not work
$.mobile.changePage("profile.html");
});
});
I have tried this with javascript: $('p#pTest').text('test');
The text does not change however. (I know that the save button works). Is this possible?

Try the following, note that when the user refreshes the page, the value is "Male" again, data should be stored on a database.
$('button').click(function(){
$('#pTest').text('test')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<p id="pTest">Male</p>
<button>change</button>

"saving" is something wholly different from changing paragraph content with jquery.
If you need to save changes you will have to write them to your server somehow (likely form submission along with all the security and input sanitizing that entails). If you have information that is saved on the server then you are no longer changing the content of a paragraph, you are drawing a paragraph with dynamic content (either from a database or a file which your server altered when you did the "saving").
Judging by your question, this is a topic on which you will have to do MUCH more research.
Input page (input.html):
<form action="/saveMyParagraph.php">
<input name="pContent" type="text"></input>
</form>
Saving page (saveMyParagraph.php) and Ouput page (output.php):
Inserting Data Into a MySQL Database using PHP

It seems you have the click event wrapped around a custom event name "pageinit", are you sure you're triggered the event before you click the button?
something like this:
$("#gender").trigger("pageinit");