I want a jQuery-UI dialog to open when a button (#loadFile) is clicked, prompting the user for a file. This works fine, but after a couple of seconds the dialog box auto closes. I want it to stay open until the user closes it, or until I specify it with code (for instance when a file is chosen). I can't figure out why this happens.
$('#accordion').accordion({
collapsible: true,
active: 1,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active', !isPanelSelected)
if (isPanelSelected) {
currContent.slideUp();
} else {
currContent.slideDown();
}
return false; // Cancels the default action
}
});
$(document).ready(function() {
$(".btn").button();
$("#dialog").dialog();
$("#dialog").dialog("close");
});
$("#loadFile").click(function() {
$("#dialog").dialog("open");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css">
</head>
<body>
<div id="accordion">
<h3>Cards</h3>
<div>This is where the cards you pick from will appear</div>
<h3>Control Box</h3>
<div>
<form>Draft number:
<input type="text" placeholder="#">
<input type="submit" value="Search for Draft" class="btn">
<button class="btn" id="loadFile">Load from file</button>
</form>
</div>
<h3>Picks Log</h3>
<div>This is where your picks will be displayed</div>
</div>
<div id="dialog" title="Upload Draft Log" class="filePrompt">
<form>Click the browse button in order to select the log file on your hard-drive.
<br>
<br>
<input type="file">
</form>
</div>
<script src="js/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
<script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script src="js/index.js"></script>
</body>
This happens because you've assigned the dialog to open from clicking a button in a form where the button has no type attribute. A button's default type is submit, so when you click the button, you're submitting the form. The easiest solution is to simply set a type on the button other than submit, say for example "button".
<button type="button" class="btn" id="loadFile">Load from file</button
jsFiddle example
Related
I'm using DirtyForms and $.blockUI plugin, the latter to change pages when clicking on links (in my app, some pages take a couple of seconds more to load and a visual feedback is fine).
When I change field content and then click any link, DirtyForms is triggered: but when I cancel the process to stay on the page, $.blockUI starts its game, resulting in a stuck page
$('form[method="post"]').dirtyForms();
$('a').on('click', function(){
$.blockUI();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
<p>Change the field content to activate DirtyForms, then click on the link.<br>
When the popup appears, click on "cancel" to stay on the page.<br>
Watch blockUI getting fired as the link is going to be followed</p>
<form action="#" method="post">
<input type="text" name="username" required>
<button type="submit">send</button>
</form>
click me after changing field content
Please, any solution?
EDIT: I also tried with stay.dirtyforms and afterstay.dirtyforms events, but they have no effect. defer.dirtyforms seems to work but the event is triggered twice (I put a console.log() to check) and I am not sure this is the way to go...
I've edit my answer: I've added some line of code to disable first the onbeforeunload dialog alert, taken from here. And at the end a link to an answer with another idea you can try.
My idea: you have to prevent the default link action and use the $.blockUI Modal Dialogs methods to open a custom dialog, then catch the link attribute href from the link put it inside a variable and use the variable value for the #yes button of the dialog.
See if this solution can meet your needs
/* beforeunload bind and unbind taken from https://gist.github.com/woss/3c2296d9e67e9b91292d */
// call this to restore 'onbeforeunload'
var windowReloadBind = function(message) {
window.onbeforeunload = function(event) {
if (message.length === 0) {
message = '';
};
if (typeof event == 'undefined') {
event = window.event;
};
if (event) {
event.returnValue = message;
};
return message;
}
};
// call this to prevent 'onbeforeunload' dialog
var windowReloadUnBind = function() {
window.onbeforeunload = function() {
return null;
};
};
var linkToFollow; // href to follow
$('form[method="post"]').dirtyForms();
$('a').on('click', function(e){
e.preventDefault();
windowReloadUnBind(); // prevent dialog
$.blockUI({ message: $('#question'), css: { width: '275px' } });
linkToFollow = $(this).attr('href');
});
$('#no').click(function() {
$.unblockUI();
return false;
});
$('#yes').click(function() {
$(window.location).attr('href', linkToFollow);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
<p>Change the field content to activate DirtyForms, then click on the link.<br>
When the popup appears, click on "cancel" to stay on the page.<br>
Watch blockUI getting fired as the link is going to be followed</p>
<form action="#" method="post">
<input type="text" name="username" required>
<button type="submit">send</button>
</form>
click me after changing field content
<div id="question" style="display:none; cursor: default">
<h6>Would you like to contine?.</h6>
<input type="button" id="yes" value="Yes" />
<input type="button" id="no" value="No" />
</div>
Other idea taken from another answer: Other idea would be to make a simple jQuery.ajax({}) call before return value in beforeunload as seen in this answer
I want to create my spreadsheet add-on. How can I implement the range picker like the picture:
I know the app script can use this:
SpreadsheetApp.getActiveSpreadsheet().getActiveRange().getA1Notation();
But I don't know how to send the result to the add-on html input text.
The code from this Medium post (author Piyush Goel) seems to do the trick. The range should be selected by the user before to click the button.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<div class="sidebar branding-below">
<div class="block form-group">
<label for="names-range"><b>Comissions</b></label>
<input id="names-range" type="text" placeholder="Specify Range.." value=""/>
<button class="blue" id="names-range_button" onClick="getSelectedRange(this);">Get Selected Range</button>
</div>
<div class="block form-group">
<label for="ages-range"><b>Easyship Handling Fees</b></label>
<input id="ages-range" type="text" placeholder="Specify Range.." value=""/>
<button class="blue" id="ages-range_button" onClick="getSelectedRange(this);">Get Selected Range</button>
</div>
</div>
<div class="sidebar bottom">
<span class="gray">
Code sample by Piyush Goel</span>
</div>
<script>
function getSelectedRange(button){
button.innerHTML = "Picking.."; // Change the button value while getting range
button.disabled = true; // Disable the button while getting range
google.script.run // Executes a Apps Script JS Function
.withSuccessHandler(updateTextField) // function to be called upon successfull completion of Apps Script function
.withUserObject(button) // To pass the event element object
.getSelectedRange(); // Apps Sript JS Function
return;
}
// Function to be called on success
function updateTextField(range, button){
var textFieldId = button.id.split("_").shift();
document.getElementById(textFieldId).value = range; // Update the text field value
button.innerHTML = "Get Selected Range"; // Reset the button value
button.disabled = false;
}
</script>
</body>
</html>
// Add the options to the custom menu
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Custom Menu')
.addItem('Show Settings', 'showSidebar')
.addToUi();
}
// initiates the sidebar
function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('settings')
.setTitle('Settings Sidebar')
.setWidth(300);
SpreadsheetApp.getUi().showSidebar(html);
}
/** Function to pick the selected range from the Google Sheet
* This returns the picked range, so that the client-side JS
* function (in HTML file) can populate it in the text field **/
function getSelectedRange(){
var selected = SpreadsheetApp.getActiveSheet().getActiveRange(); // Gets the selected range
var rangeString = selected.getA1Notation(); // converts it to the A1 type notation
return rangeString;
}
I have two tabs with a submit button on each tab. When the button is clicked, I need to reload the content of that specific tab to get updated data from the server.
if (validStatus()) {
$.ajax({
//...
success: reloadTab
});
}
function reloadTab() {
var currentTab = $("#tabs").tabs("option", "active");
alert(currentTab);
$('#tabs').tabs('select', currentTab);
alert(currentTab);
}
When the button is clicked, the tab doesn't refresh. I see the first alert but not the second.
HTML is as follows:
Head:
<link rel="stylesheet" href="#this.Url.Content("//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css")" />
<script>
$(function () {
$("#tabs").tabs();
});
</script>
Body:
<div id="tabs">
<ul>
<li>The first tab</li>
<li>the second tab</li>
<li>Success</li>
</ul>
<div id="Success">
testing
</div>
<div id="Tab1">
<fieldset >
<legend>Overview</legend>
<input type="button" id="submit1" value="submit" />
<br />
</fieldset>
<fieldset style="width: 700px;">
<legend>Overview</legend>
<div>
<table >
//updated with ajax
</table>
</div>
</fieldset>
<script>
//reloadTab is in here
</script>
</div>
<div id="Tab2">
<fieldset style="float:left; width:300px;">
<input id="submit2" type="button" value="submit"/>
</fieldset>
<fieldset style="float:left;">
<legend>Overview</legend>
<table>
//updated with ajax
</table>
</fieldset>
<script>.....</script>
</div>
Turns out tabs.('select', ...) is deprecated, using tabs.('option', 'active', index) fixed my issue. Solution found in this comment: https://stackoverflow.com/a/16033969/1463649
Do you see anything in the console of your browser? What browser are you using?
Try this to help you with the debugging.
function reloadTab() {
console.log($('#tabs')); // if this is an empty object, the element doesn't exist when you call this function
console.log($('#tabs').tabs()); // if this doesn't return 'function', you haven't included a library properly, maybe jquery ui, or jquery, or you're using an old version or something
console.log(currentTab); // if this is undefined then something went wrong and no tab is active
var currentTab = $("#tabs").tabs("option", "active");
alert(currentTab);
$('#tabs').tabs('select', currentTab);
alert(currentTab);
}
I needed to force refreshing using this technique. When I navigate to a new page jQM correctly adds a back button in my header. But when I go back to the first page the back button incorrectly appears. Is it possible to conditionally create a back button? I have tried manually creating a back button and conditionally hiding it based on a parameter in the URI but it seems that once the button appears I can never hide it again.
Edit:
Here is some code that demonstrates the problem. Not only does it not hide the custom back button when you go back to page 1, but it doesn't hide the "page 1" content when you are on page 2, or visa versa. It seems that once something has been shown it cannot be rehidden.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
var backButtonVar = null;
var page1Var = null;
var page2Var = null;
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="false">
<div data-role="header">
<h1>Test</h1>
<a id="backButton" data-role="button" data-direction="reverse" data-rel="back" data-icon="arrow-l" data-iconpos="left">MyBack</a>
</div>
<div id="page1" data-role="content">
Go to page 2
</div>
<div id="page2" data-role"content">
This is page 2
</div>
<script>
$(document).ready(function() {
jQuery(document).on('pagehide', 'div', function(event, ui) {
var page = jQuery(event.target);
page.remove();
});
backButtonVar = $('#backButton');
page1Var = $('#page1');
page2Var = $('#page2');
// Is this the root?
if (window.location.search == '') {
backButtonVar.hide();
page1Var.show()
page2Var.hide()
} else {
backButtonVar.show();
page1Var.hide()
page2Var.show()
}
});
</script>
</div>
</body>
</html>
Here is the fix. Give the back-button a class backButton. .hide() it if the active page is the home page page1, else .show() it.
Demo
$('.backButton').hide();
$(document).on('pagebeforeshow', function () {
var activePage = $.mobile.activePage;
if (activePage[0].id != 'page1') {
$('.backButton').show();
}
else {
$('.backButton').hide();
}
});
If you have any question, please let me know.
I used jquery ui from this link http://jqueryui.com/demos/dialog/#animated for dialog which is not working in MVC4 application
This is my View
#{
ViewBag.Title = "Dialog";
}
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script type="text/javascript">
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$("#opener").click(function () {
$("#dialog").dialog("open");
return false;
});
});
</script>
<div class="demo">
<div id="dialog" title="Basic dialog">
<p>
This is an animated dialog which is useful for displaying information. The dialog
window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</div>
<!-- End demo -->
<div class="demo-description">
<p>
Dialogs may be animated by specifying an effect for the show and/or hide properties.
You must include the individual effects file for any effects you would like to use.</p>
</div>
<!-- End demo-description -->
<div class="demo-description">
<p>
A modal dialog prevents the user from interacting with the rest of the page until
it is closed.</p>
</div>
<!-- End demo-description -->
You're not wiring up your javascript. Try this:
$('#dialog').dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$(document).ready(function(){
$('#opener').click(function () {
$('#dialog').dialog("open");
return false;
});
});
(remove the opening "$(function () {" and the closing "});" pair to this - your code wants to look like above.
Add $(documnet).ready and then define your function in it . . ..
$(document).ready(function () {
code goes here . .
});`