JQuery mobile dialog display incorrect after pressed back button.
First time run
Click open dialog button
Clicked back button
Click open dialog button again
The dialog page content will copied to the from page after clicked back button. This will happen after added jquery-ui. It seems there is conflict between jquery mobile dialog and jquery ui. Or it will be normal if the dialog content is just several lines only.
Here is my code:
1.From Page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="false" id="page1" style="height:600px">
<div data-role="header" class="jqm-header">
<h2> Test </h2>
</div><!-- /header -->
<div role="main"
class="ui-content jqm-content" id="mainContent">
<form action="/Test/TestDialog" id="form10" method="post">
<div data-role="controlgroup"
data-type="horizontal" data-mini="true">
<a id="btnAdd" onclick="rowEdit2({ href:'/Test/TestDialogPage' + '?cmd=' })" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-plus">open Dialog by script</a>
Open dialog
</div>
</form>
</div><!-- /content -->
</div>
</body>
</html>
<script>
function rowEdit2(p) {
var href = p.href;
$.mobile.changePage(href);
}
</script>
2.Dialog Page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test Dialog</title>
</head>
<body>
<div id="TestInfoDialog" data-role="dialog">
<div data-role="header" data-position="fixed">
<a data-rel="back" data-icon="back">Back</a>
<h2>Test Dialog</h2>
</div>
<div class="ui-content" role="main">
<form id="TestInfoForm">
<div>
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<label for="test1">test1</label>
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<label for="test1">test1</label>
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<label for="test1">test1</label>
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<label for="test1">test1</label>
</div>
</form>
</div>
</div>
</body>
</html>
Related
i have added both cnd link for bootstrap in boilerplate but form still get submited instead of showing error idk what is going wrong even after copying demo form from bootstrap that form also stop working for some reasong idk why. can someone please explain why ?
boilerPlate -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="/style.css">
</head>
<body >
<%- include('navbar/navbar.ejs') %>
<main class="container">
<%- body -%>
</main>
<%- include('navbar/footer.ejs') %>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>
form.ejs
<% layout('BaseTemplate') %>
<h1 class="mb-5 offset-5">New product</h1>
<form action="/product" method="post" class="w-50 offset-3 needs-validation" novalidate>
<label for="name" class="form-lable mb-1">Name</label>
<input type="text" id="name" name="name"class="form-control mb-3" required>
<label for="price" class="form-lable mb-1">Price</label>
<input type="number" id="price" name="price"class="form-control mb-3" required>
<label for="description" class="form-lable mb-1">Description</label>
<input type="text" id="description" name="description"class="form-control mb-3" required>
<label for="image" class="form-lable mb-1">Image</label>
<input type="text" id="image" name="image" class="form-control mb-3" required>
<button type="submit" class="btn btn-outline-info">Submit</button>
</form>
i want to know why is bootstrap form validation not working
You have the form attribute novalidate on your <form> tag. When present, it specifies that the form-data should not be validated when submitted.
Not related to your issue, you also have a typo on your <label>s: class="form-lable" which sets a margin-bottom of 0.5rem, probably why you added the margin class mb-1 so I removed it in the fixed form:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<form action="/product" method="post" class="w-50 offset-3 needs-validation">
<label for="name" class="form-label">Name</label>
<input type="text" id="name" name="name" class="form-control mb-3" required>
<label for="price" class="form-label">Price</label>
<input type="number" id="price" name="price" class="form-control mb-3" required>
<label for="description" class="form-label">Description</label>
<input type="text" id="description" name="description" class="form-control mb-3" required>
<label for="image" class="form-label">Image</label>
<input type="text" id="image" name="image" class="form-control mb-3" required>
<button type="submit" class="btn btn-outline-info">Submit</button>
</form>
I would like to know if it is possible to position the label and the input on the same line, please. I don't know how to do this in Bootstrap 5.
Thank you in advance for your help.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container pt-5">
<form (ngSubmit)="login()">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">User</label>
<input type="text" class="form-control" name="exampleInputEmail1" style="width: 40%" aria-describedby="emailHelp" [(ngModel)]="loginForm.user" required maxlength="4">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" name="exampleInputPassword1" style="width: 40%" [(ngModel)]="loginForm.password" required maxlength="4">
</div>
<button type="submit" class="btn btn-primary">Connection</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container pt-5">
<form (ngSubmit)="login()">
<div class="mb-3">
<div class="d-inline-flex align-items-center">
<label for="exampleInputEmail1" class="form-label" style="min-width: 100px !important">User</label>
<input type="text" class="form-control" name="exampleInputEmail1" style="width: 40%" aria-describedby="emailHelp" [(ngModel)]="loginForm.user" required maxlength="4">
</div>
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<div class="d-inline-flex align-items-center">
<label for="exampleInputPassword1" class="form-label" style="min-width: 100px !important">Password</label>
<input type="password" class="form-control" name="exampleInputPassword1" style="width: 40%" [(ngModel)]="loginForm.password" required maxlength="4">
</div>
</div>
<button type="submit" class="btn btn-primary">Connection</button>
</form>
</div>
</body>
</html>
I am currently working on a project requiring jQuery mobile for a Blackberry Smartphone webworks app. I discovered that I cannot access any content below screen height on my page.
I have tried iscrollview, but it doesn't work well after compiling it into .COD file. Any suggestions will be appreciated.
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview-pull.css" />
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js"></script>
<div data-role="content" class="content_div">
<div class="content-secondary">
<div class="Main-holder" id="Main-holder" style="background-color:#fff; overflow-y:scroll; height:500px;">
<form id="mylogin" data-iscroll>
<div class="form-row">
<div class="reg-label">Username:</div>
<input name="username" id="username" type="text" />
<div style="clear:both"> </div>
</div>
<div class="form-row">
<div class="reg-label">Password:</div>
<input id="password" name="password" type="password" />
<div style="clear:both"> </div>
</div>
<div class="form-row">
<div align="right" class="sub-but-wrapper">
<a data-role="button" id="loginSubmit"style="width:90px;" data-theme="b">Login</a>New User?<span id="loader" style="display:none"></span>
<!--
<input data-role="button" type="button" name="loginSubmit" id="loginSubmit"style="width:90px;" data-theme="b" value="Login" /> New User?<img src="images/ajax-loader.gif" id="loader" style="display:none" />
-->
</div>
<label></label><div style="clear:both"> </div>
</div>
<div class="form-row" style="height:100px">
<div style="clear:both"> </div>
</div>
</form>
</div>
</div>
</div>
Please help me on this. I am new to CSS and jQuery Mobile and I got this issue.
The checkboxes in my page do not display the box; only the label. When I click the label, a square appears on the left.
Now, the issue only happens if I download the CSS file to my local file and refer that. If I refer the CSS file from the server directly, the box appears before the text and works normally. Below are the sample source:
Source which has error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width">
<link rel="stylesheet" href="../jQuery/jquery.mobile.css">
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Source which does not have error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Everything else works fine; it is just the display of the box that causes me the problem. I took the latest files for the CSS and JS files and checked.
Without the box, the user may think it is just a label
Since I am new, I am unable to give an image, I'm sorry...
Thanks all.
Adding checkbox inside fieldset for me solved the same problem.
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>
I want to POST data from my FORM to an IFRAME which is found on another domain. Is there any easy way to do this?
<iframe name="iframe" width="100" height="100" src="www.otherdomain.com" />
<form action="www.mydomain.com" method="post" target="iframe">
<input type="text" name="text1" value="123" />
<input type="text" name="text2" value="456" />
<input type="submit" value="submit"/>
</form>
I think your example should work. I've set two virtual hosts pastefrom.com pasteto.com
on my localhost.
http://pastefrom.com/index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<iframe name="iframe" id="iframe" src="http://pasteto.com/index.php" width="500" height="500"></iframe>
<form action="http://pasteto.com/index.php" method="post" target="iframe">
<input type="text" name="search" value="google" />
<input type="submit" value="submit"/>
</form>
</body>
</html>
http://pasteto.com/index.php:
<pre><?php var_dump($_POST);?></pre>
And on submit it shows post data on pasteto.com
array(1) {
["search"]=>
string(6) "google"
}