I have this jquery-ui form:
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
var socket = io.connect('http://localhost:8080');
$(function() {
$("#chat-form").dialog({
autoOpen: false,
height: 300,
width: 550,
modal: false,
buttons: {
Submit: function() {
socket.emit('send_fics_cmd', chat.val());
chat.val('');
}
}
});
</script>
</head>
<body>
<div id="chat-form" title="FICS Console">
<div id="chat-window" class="text ui-widget-content ui-corner-all"></div>
<form>
<fieldset>
<input type="text" name="chat" id="chat" value="" class="text ui-widget-content ui-corner-all" />
<input type="text" style="display:none" />
</fieldset>
</form>
</div>
</body>
</html>
A node.js/socket.io server listens on localhost:8080 for emissions on the socket object.
What I don't understand is this: Without the rather nonsensical line
<input type="text" style="display:none" />
right below the input textbox with id="chat", the form is submitted via GET whenever I hit the Return/Enter key. The Submit handler is not executed. This happens even though the Submit button doesn't have focus, which altogether is highly undesireable behaviour.
When this line is present, however, the Submit handler is executed on hitting the Return/Enter key only when it has focus, which is what I want.
It does not work with type="hidden", by the way, so the display:none is only make the additional input disappear in the view.
Is this a bug in jquery-ui or does it somehow make sense?
Related
I am creating an app in Electron. I am still new to the framework however I
did some reading around how to communicate between the main and renderer
processes using ipcMain and ipcRenderer. I have a simple html page with a
login form that gets load when the app is ready and in the renderer process
I listen
to the click event of the submit button on the form(For testing purposes I
have hard coded the username and password) and I run a simple check to see
if the password and username matches the one I have hard coded. The aim is
to then load a specific html file in the browser window based on the result
of the check. My render.js looks like this:
const ipc = require('electron').ipcRenderer;
document.querySelector('#btn').addEventListener('click', function (event){
event.preventDefault();
const username = 'Belinda';
const password = 'admin';
const inputUsername = document.querySelector('#username').value;
const inputPassword = document.querySelector('#password').value;
if(inputUsername != username || inputPassword != password){
ipc.send('errortest', function (){
alert('Error')
});
}else{
ipc.send('successtest', function (){
alert('Success')
});
};
});
In main.js I listen to the events like this:
ipc.on('successtest', function (){
mainWindow.loadFile('admin.html');
});
ipc.on('errortest', function(){
console.log('error');
mainWindow.loadFile('error.html');
});
My index.html page looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet"
href="assets/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/#fortawesome/fontawesome-
free/css/all.css">
<link rel="stylesheet" href="assets/stylesheets/main.css">
<!-- <link rel="import" href="./admin.html"> -->
<link rel="import" href="./admin.html">
<link rel="import" href="./error.html">
</head>
<body id="body">
<form class="form-signin" method="POST">
<div class="text-center mb-4">
<img class="mb-4" src="./assets/icons/logo4.jpg" alt="" width="80"
height="40">
</div>
<div class="form-group">
<input type="text" value="" autofocus class="form-control form-
control-sm" id="username" placeholder="Username">
</div>
<div class="form-group">
<input type="password" autofocus value="" class="form-control form-
control-sm success" id="password" placeholder="Password">
</div>
<button class="btn btn-lg btn-success btn-block btn-sm" id="btn"
type="submit">Log in</button>
<p class="mt-5 mb-3 text-muted text-center">© Save Money
Solutions 2018-19</p>
</form>
<script>
require('./renderer');
</script>
</body>
</html>
Running the app works only for the 'errortest' event. Any advice on how I
get around this. Or any Ideas on how to do basic login and redirect paths
in electron. I did try some research but I haven't come across anything
useful. Thank you
I believe your problem is how you're getting the value of the username and password inputs.
Since both of your inputs has ids I think you should be getting their value like this:
const inputUsername = document.getElementById('username').value;
const inputPassword = document.getElementById('password').value;
Using the getElementById function.
Folks,
I just noticed something interesting developing my first ASP.Net Mvc application and Its when you mouse over on a submit button in Mozilla the full Url is shown in the status bar! Is it a normal behavior?! how can i prevent that?
Try the following code:
<html>
<body>
<form id="myForm">
<input type="text">
<!-- <input type="submit" value="Send" > -->
<input type="button" value="Send" onclick="onClick(this)">
</form>
<script type="text/javascript">
function onClick (e)
{
document.forms["myForm"].submit();
}
</script>
</body>
</html>
I have a webpage with the page div set to data-theme D
<div data-role="page" data-theme="d">
I also have several inputs on the page with the data-theme set to A
<input data-theme='a' type='text'>
<input data-theme='a' type='text'>
<input data-theme='a' type='text'>
Is there an easier way to set all the input's data-theme's to A without having to set each input individually?
1- Solution 1:
Wrap them in data-role="content", but this will change the background color of the div.
<div data-role="content" data-theme="a">
<input type="text" />
</div>
Demo
2- Solution 2:
Globally, set theme to all input on mobileinit event.
<head>
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.textinput.prototype.options.theme = "a";
});
</script>
<script src="jquery.mobile.js"></script>
</head>
Demo
3- Solution 3:
Set input theme on pagebeforecreate.
$(document).on("pagebeforecreate", function () {
$("input").textinput({
"theme": "a"
});
});
Demo
I am trying to figure out a way to have jqueryui datepicker inside handlebars template. So far I have the following that doesn't seem to work:
> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
> <script>
> $(function () {
> $(".datePicker").datepicker();
> }); </script>
<script id="template-row" type="text/x-handlebars-template">
<div class="returnRow{{#if altRow}} returnRow-alt{{/if}} clearfix">
<input type="hidden" class="return-id" value="{{ID}}" />
<input type='hidden' class='return-last-updated' value='{{LastUpdated}}' />
<div class="pull-left returnRow-date">
<input type="text" class="datePicker" />
</div>
<div class="pull-left returnRow-return">
<input type="text" style="width: 90%" class="return-value" onchange='SaveSingleRow(this)' value="{{textValue}}" />
</div>
<div class="pull-left returnRow-message">
<span class="row-message"></span>
</div>
</div>
</script>
I think you have two options:
Bind the datepicker after adding the filled-in template to the DOM.
Bind the datepicker to a jQuery-wrapped version of the filled-in template and then add that jQuery object to the DOM.
The first option looks like this:
var t = Handlebars.compile($('#template-row').html());
$(something_already_in_the_dom).append(t(data));
$('.datePicker').datepicker();
Demo: http://jsfiddle.net/ambiguous/w2wyU/7/
The second option looks like this:
var t = Handlebars.compile($('#template-row').html());
var $html = $(t(data));
$html.find('.datePicker').datepicker();
$(something_already_in_the_dom).append($html);
Demo: http://jsfiddle.net/ambiguous/PMP8R/
Note that both options take place outside the template. The underlying problem is that .datepicker needs to be called on a jQuery object but everything is only text inside the template, you can't have a jQuery wrapped version of that text until after the template has been processed and filled in.
Scenario:
Using jquery form plugin . The form appears in a dialog, created with jquery UI. After clicking submit a success message appears on the form. What I would like to do is to have the dialog fade out after the success message appears.
Problem:
I'm unclear how to structure the code to close on success and where to put the code.
In the following I attempted to add a "success function" to the script that is triggered on clicking the submission of the form as follows:
$(document).ready(function() {
var options = {
target : '#output1',
url: 'comments.php',
clearForm: 'true',
success: function {
$dialog.dialog('close');
}
};
// bind 'myForm' and provide a simple callback function
$('#brokenLinks').ajaxForm(options);
return false;
});
However, this breaks the script and clicking the submission button causes the php script with success message to load in the window, as opposed to the desired behavior of staying on the form page.
Can anyone point me to examples of how to fade out a dialog after form submission, or suggest how this needs to be architected.
Thanks.
Additional Code
FORM
</p>
<p>
<input name="nowhere" value="linknowhere" type="radio">Link is
broken and doesn't go anywhere
</p>
<p>
<input name="wrong_url" value="linktowrongurl" type="radio">Link
goes to an unexpected destination
</p>
<p>
<input name="other" value="linkother" type="radio">Other -
Please explain in the description box below
</p>
<em>Description</em>
<p>Please add as much descripton as you can about the problem you
noticed</p>
<textarea class="tagged" name="description" id="area" cols="50" rows="10" title="Please add as much description as you can."></textarea>
<p>
Page Address: <br> <input name="url" value="" id="targetURL" size="100" title="Page Address" type="text">
</p>
<p>
Browser<input name="browser" value="Firefox" type="text">
</p>
<p>
Operating System<input name="operating_system" value="MacOSX" type="text">
</p>
<p>
<input name="submit" id="button" value="Submit" type="submit">
</p>
</fieldset>
</form>
<!-- server response -->
<h2 class="testColor">Output Response</h2>
<div id="output1" class="testColor">
</div>
<!--End broken links FORM-->
Dialog Generating Script
$(document).ready(function() {
$('#target a').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 700,
height: 800,
modal: true,
open: function (event,ui) {
$("input[name='url']").val(pageAddress);
}
});
$link.click(function() {
$dialog.dialog('open');
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
return false;
});
});
});
Host Page
<!-- Checks for presence of cookie. If present sets a php flag to indicate that cookie is present. This flag is read into Javascript in another script -->
<script type="text/javascript">
var readerStatus="tester";
if (readerStatus=="tester") {
$(function() {
$( "#dialog" ).dialog();
});
};
</script><!-- If tester flag is set then show the feedback button -->
<script type="text/javascript">
var pageAddress="http://localhost/Formdev/rc2feedbackform/page3_blogpage1.php";
</script><!-- Reads the url of the page and stores it as a Javascript variable -->
</head>
<body>
<div id="dialog" title="Feedback Button">
<div title="Feedback Form">
<p id='target'><a href="feedbackform.php" title='Feedback Form' >Click Here For Feedback Form</a></p>
<p class="notes">This form is dragable and resizable</p>
</div>
</div><!-- This is the text for the tester button -->
<!--------------------------------------------------------------------------->
<!-- Start The Page Display -->
<h1>Page 1 Of The Blog</h1>
<p class="blueborder textColor">This page simulates the page on the blog where testers will land. A button appears on this page with the title feedback form. Click on the button and the feedback form will appear. You can then complete the form. When you are done click on the submit button. If the forms is successfully recorded you will see a message telling you its been recoreded. </p>
</body>
You have to submit the form using ajax to prevent the new page from loading. then use the callback in the ajax function to perform the .fadeout() on the div/form
edit: i misunderstood the question. can probably help if you show the function called when the submit/login button is clicked