In jquery mobile popup enter some text and refresh the current page using changePage. After that open the open it shows in the text box what i enter previously. How to refresh the popup(Please dont suggest empty the textbox value).
The code is:
localStorage.setItem("name","tiger");
$(document).on("click","#save",function(){
$("#openpopup").popup("close");
localStorage.setItem("name",$("#pText").val());
$.mobile.changePage("#page1",{
allowSamePageTransition : true,
transition : 'none',
});
});
$(document).on("pageshow","#page1",function(){
if(localStorage.getItem("name")){
$("#name").val(localStorage.getItem("name"));
}
});
Here is the FIddle
To reset all form elements, e.g. input, select, checkbox, etc at once, you need to wrap them in a form. And then reset the form $("#formID")[0].reset() once the popup is hidden.
$("#popupID").popup({
afterclose: function () {
$("#foo")[0].reset(); /* reset form */
}
}, "close");
Demo
Related
window.onbeforeunload = function() {
openDialog(dialogs.whyNot)
}
I want to open some dialog before user leave page , I've found that I can show some message before leaving a page by making it like this :
window.onbeforeunload = function() {
return 'Message'
}
But instead of messages I want to show my own dialog , is it possible to make ?
By my own dialog I mean:
No you cannot show anything like a custom dialog when the page starts unloading. You have to use the standard alert box.
window.onbeforeunload = function() {
window.alert('Message');
}
You could try alert, if all you want is for the user to press OK:
window.onbeforeunload = function() {
window.alert('Message');
}
If you want OK/Cancel buttons, you can use confirm (the window prefix can be dropped). Confirm will return True if the user clicked OK, False if the user clicked Cancel. Here is an example:
window.onbeforeunload = function() {
if(confirm('Message')){
console.log('user clicked ok');
} else {
console.log('user clicked cancel');
}
}
Edit (after question edit):
You will need to do a modal popup with html and css, see here for an example:
https://www.w3schools.com/howto/howto_css_modals.asp
For a jquery example see here:
How to display Custom Dialog box on button click
I have a modal popup above a Jquery datatable .I need to add an item to table using the modal text fields.
I use "enter key" key down event to add item to grid; I don't want to dismiss modal after "enter keydown".Every time a item added to datatable by pressing enter on textfield.
Problem here is after I use
window.location.reload(true);
to refresh grid - the modal pop up dismisses. I need modal closed only after the "OK" is clicked. How to reload background grid without dismissing modal popup?
success: function (data) {
if (data == 'Updated') {
window.location.reload(true);
}
}
You should not be reloading your page at all. On your success event append the row to datatable dynamically.
If you would like to see how, please put your tables html here so we can help you with that too.
In my application when i click form submit, service call happens. When the service call happens I need to I need to disable the page conetent til the next page loads.
As i have given cursor:wait the mouse pointer changes to loading symbol and does not allow to click on the page. But still i could use tab and enter or change the values in the page.
Can anyone tell the code to disable page content using transparent image?
You could do that easier than with a transparent image :
$('body.waiting > *').on('click', function(e) {
e.preventDefault();
});
I think that you should only disable the submit input for example :
$('input').attr('disabled', 'disabled');
With a "overlay", add an absolute div at the top of your page :
<div id="overlay" style="position:absolute;background:url('trans.png');left:0;top:0;width:100%;height:100%;display:none;"></div>
And than simply show it when your form is submitted :
$('#overlay').show();
I just wrote this code to use a slide to toggle a box as hidden/displayed using a button:
jQuery("#button").click(function () {
jQuery('#box').slideToggle('fast');
});
I want to implement cookies on this to remember if the box was hidden or visible. Can someone guide me with this?
There is a jQuery Cookie plugin available, which will make reading and writing to and from cookies a lot easier and more convenient. Here is an example:
// if the slider is visible, set the cookie slider value to true
$.cookie('slider', 'visible', { expires: 7, path: '/' });
To read the value, use the following as an example:
var sliderVisible = $.cookie('slider');
More information can be found on the jQuery Cookies Plugin Site.
I just got it working. I made two buttons so that there is different button on each state (i.e closed and open)
jQuery('#button_open').hide(); //initially we keep the open button hidden
// this code defines what happens when we click the close button
jQuery('#button_close').click(function () {
jQuery(this).hide(); //this hides the close button as the box is now closed
jQuery('#box').slideUp('fast'); //hides the box
jQuery('#button_open').show(); //shows the open button
jQuery.cookie("openclose","closed", {expires: 365}); // sets cookie
return false;
});
// this code defines what happens when we click the open button
jQuery("#button_open").click(function () {
jQuery(this).hide(); //hides the open button as the box is now open
jQuery('#box').slideDown('fast'); //shows the box
jQuery('#button_close').show(); //shows the close button
jQuery.cookie("openclose","open", {expires: 365}); //sets cookie
return false;
});
//and now the magical part comes in. this code checks if the cookie named 'openclose' has the value 'closed'. If yes, it hides the close button + the box and shows the open button.
if(jQuery.cookie("openclose") == "closed") {
jQuery("#button_close").hide();
jQuery("#button_open").show();
jQuery('#box').hide();
};
We have the HTML structure used with jquery-form-wizard:
<form>
<div class='page1'>...</div>
<div class='page2'>...</div>
...
<div class='pagen'>...</div>
<button type='reset'>...</button>
<button type='submit'>...</button>
</form>
Now, the reset and submit button are managed by jquery-form-wizard. The first page has the reset button (titled "Back") disabled, and the submit button functions as "Next". When moving to page2, both buttons are enabled (the Next button is first disabled during the server-side validation, then both are enabled). This proceeds until the last page, where instead of Next we have Submit.
Now, I would like to modify the behavior of the reset/Back button on the first page. Instead of disabling it, I would like to hide it.
Can I easily achieve this via css without touching the code of jquery-form-wizard? Or should I just modify it and add a "hide first back button" option?
Css would not do the trick I'm afraid (speaking out of my limited knowledge of css that is), however something like the code below would do the trick. The step_shown method is used to show/hide the button appropriately (the button will be shown for just a moment when the first step is shown, but is then hidden).
<script type="text/javascript">
$(function(){
var form = $("#demoForm");
// hide/show the button appropriately when a step is shown
form.bind("step_shown", function(e, data){
if(data != undefined && !data.isFirstStep){
form.find(":reset").show();
}else {
form.find(":reset").hide();
}
});
form.formwizard({
formPluginEnabled: true,
validationEnabled: true,
focusFirstInput : true,
formOptions :{
success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},
beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
dataType: 'json',
resetForm: true
}
}
).trigger("step_shown"); // trigger once at page load
});
</script>
I hope this helps
I modified jquery-form-wizard to add the page's class to the form (patch).
After this modification, all I need to do it add this to my css:
form.formwizard-page1 input[type=reset] {
display:none;
}