I must create ModalPopupExtender. for this, I create one simple application and all my expectation wrok. But when i add my popup in master page it doesn't work, How I can fix this problem?
my popup
<asp:Button ID="Button1" runat="server" Text="Click here to show iframe in modalpopup" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"
runat="server" CancelControlID="btnCancel" OkControlID="btnOkay" TargetControlID="Button1"
PopupControlID="Panel1" Drag="true" PopupDragHandleControlID="PopupHeader">
</asp:ModalPopupExtender>
<div id="Panel1" style="display: none;" class="popupConfirmation">
<iframe id="frameeditexpanse" frameborder="0" src="InnerPage.aspx" height="161">
</iframe>
<div class="popup_Buttons" style="display: none">
<input id="btnOkay" value="Done" type="button" />
<input id="btnCancel" value="Cancel" type="button" />
</div>
</div>
my script in InnerPage.aspx
<script language="javascript" type="text/javascript">
function okay() {
window.parent.document.getElementById('btnOkay').click();
}
function cancel() {
window.parent.document.getElementById('btnCancel').click();
}
</script>
place this script on same page with extender
<script type="text/javascript">
function clickOk() {
$get("<%= btnOkay.ClientID %>").click();
}
function clickCancel() {
$get("<%= btnCancel.ClientID %>").click();
}
</script>
and instead of parent.window.document.getElementById().click() use parent.window.clickOk() and parent.window.clickCancel()
Related
I'm having trouble with learning laravel and decided to ask my question here since I can't find an answer via Google etc.
I am trying to return a client from the database via Id, maybe later via name.
This is my form:
<<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Klant invoeren</title>
<link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
<p><<form action="{{route('client/'.$client->id.'/show/')}}"
method="get">
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="price">Achternaam:</label>
<input type="text" class="form-control" name="id">
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
{{csrf_field()}}
<button type="submit" class="btn btn-success" style="margin-
left:38px">Zoek klant</button>
</div>
</div>
</form></p>
</body>
</html>
Which redirects to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Klant invoeren</title>
<link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
<div class="container">
<h2>Voer een klant in</h2><br />
<h1>Showing {{ var_dump($client) }}</h1>
</div>
</body>
</html>`
And this is the show method from the Clientcontroller:
public function show($id)
{
$client = Client::find($id);
return view('clients.show', compact('client'));
}
This is the route I'm using:
Route::get('client/{id}/show','ClientController#show');
Can someone spot my mistake, because I can't after messing with this the last few hours.
EDIT: updated code and added the route, now getting the error that the client variable isn't defined in the
You must echo the client id in the form action. So, remove the inverted comma from $client->id. Use the following code :
<form action="{{action('ClientController#show', $client->id)}}"
method="get">
Additionally, remove backtick from the code. Use the following code :
public function show($id)
{
$client = Client::find($id);
return view('clients.show', compact('client'));
}
In your routes/web.php
Route::get('client/{id}/show','ClientController#show');
In your form:
<form action="{{URL::to('client/'.$client->id.'/show/')}}"
method="get">
In your controller:
public function show($id)
{
$client = Client::find($id);
return view('clients.show', compact('client'));
}
In your Client Controller make sure you use the Model that you are referencing to
Assuming App\Client.php Change it to App\User.php if you are referring to user
ClientController
use App\Client;
public function show($id)
{
$client = Client::find($id);
return view('clients.show', compact('client'));
}
Now you can fetch the client model with $client For example $client->id
Make sure you pass the {id} parameter in the route
I am trying to show audio and google map in a simple HTML5 page. When I run it in other outside browsers like Chrome, Mozilla everything works perfectly.
But same is not working in my eclipse internal web browser and I want the output in that only.
Here is my project link on GitHub:
https://github.com/Venkatesh-Devale/cmpe273/tree/master/StaticRefresher
Please help me know why this is so?
#CHARSET "UTF-8";
#divVideo, #divAudio {
width:40%;
}
#divMyHeader {
background-color:orange;
}
#map {
height: 400px;
overflow: auto !important;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="hello.css">
</head>
<body>
<div id="divMainPage">
<div id="divMyHeader">
<h1>Venkatesh Devale</h1>
<h6>SJSU ID: 012420148</h6>
</div>
<div id="content">
<p>
I am creating this page to introduce me as we all are pretty new,
through this refresher assignment.
Below is my short video which will tell you about myself.
</p>
<div id="divVideo">
<video controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
</div>
<p>
Below is my favorite songs audio. Please guess it.
</p>
<div id="divAudio">
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
</div>
</div>
<div id="divFeedbackShowingInputTypes" style="border-style:groove;">
<form>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" name="txtFirstName" autofocus></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="txtLastName"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="email" title="<any characters>#<your mail account>.com" pattern="[a-zA-Z]+[#][a-zA-Z]+[.com]" required></td>
</tr>
<tr>
<td>Telephone:</td>
<td><input type="tel" name="phone" title="XXX-XXX-XXXX" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required></td>
</tr>
<tr><td></td>
<td><input type="submit" name="btnSubmit" value="Submit"></td>
</tr>
</table>
</form>
</div>
<div id="myGeoLocatioWithMap">
<div id="map">
</div>
</div>
</div>
<script>
var myMap, myLocationPanel;
function getFirstMap() {
myMap = new google.maps.Map(document.getElementById('map'), {
center: {lat: -58.397, lng: 197.644},
zoom: 7
});
myLocationPanel = new google.maps.InfoWindow;
if (navigator.geolocation) {
console.log("Geolocation is available");
navigator.geolocation.getCurrentPosition(showMyPosition, findLocationNotFoundError);
} else {
handleLocationError(false, myLocationPanel, myMap.getCenter());
}
}
function showMyPosition(position) {
console.log("Geolocation is available");
var myPosition = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
myLocationPanel.setPosition(myPosition);
myLocationPanel.setContent("Your location is here");
myLocationPanel.open(myMap);
myMap.setCenter(myPosition);
var marker = new google.maps.Marker({
position: myPosition,
map: myMap
});
}
function findLocationNotFoundError() {
showLocationError(true, myLocationPanel, myMap.getCenter());
}
function showLocationError(checkDoesBrowserHasLocation, myLocationPanel, mapCenter) {
myLocationPanel.setPosition(mapCenter);
if(checkDoesBrowserHasLocation) {
myLocationPanel.setContent('Somehow geolocation service is not working, we are fixing it');
} else {
myLocationPanel.setContent('Seems that the browser does not support the geolocation');
}
myLocationPanel.open(myMap);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBd-SiW0EEjuidG6nhM6iSeDt9epJPvYno&callback=getFirstMap">
</script>
</body>
</html>
I have a google app engine and I recently decided to add app engine to it. I have gone through the steps, have imported my google project into firebase, added all the initialization code, and some temp functions for logging in and signing up. However, the app never goes past the points where I try to log in. I have been searching everywhere and trying everything I can. I'm sure I'm just missing something small, but could use another set of eyes. Thanks.
Here is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Hello Endpoints!</title>
<script type="text/javascript" src="/js/base.js"></script>
<!-- SCRIPT FOR FIREBASE -->
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase-database.js"></script>
<script type="text/javascript" src="/js/firebaseApp.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.css">
<link type="text/css" rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class="container">
<input id="txtEmail" type="email" placeholder="Email">
<input id="txtPassword" type="password" placeholder="Password">
<button id="btnLogin" class="btn btn-action" onclick="loginEvent()">
Log in
</button>
<button id="btnSignUp" class="btn btn-secondary" onclick="signupEvent()">
Sign Up
</button>
<button id="btnLogout" class="btn btn-action hide">
Log out
</button>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>
</div>
<div class="container">
<form action="javascript:void(0);">
<h2>Add Asteroid</h2>
<div><span class="label">Name: </span><input id="asteroidName" /></div>
<div><span class="label">Diameter: </span><input id="asteroidDiam" /></div>
<div>Dimensions:</div>
<div><span class="dimlabel">Length: </span><input id="asteroidLength" /></div>
<div><span class="dimlabel">Width: </span><input id="asteroidWidth" /></div>
<div><span class="dimlabel">Height: </span><input id="asteroidHeight" /></div>
<div><span class="label">Mean Distance From Sun: </span><input id="asteroidDist" /></div>
<div><input id="addAsteroid" type="submit" class="btn btn-small" value="Submit"></div>
</form>
<form action="javascript:void(0);">
<h2>Refresh Asteroids</h2>
<div><input id="listAsteroids" type="submit" class="btn btn-small" value="Refresh"></div>
</form>
<table id="AsteroidTable">
<tr>
<th>Asteroid</th>
<th>Diameter</th>
<th>Dimensions</th>
<th>Mean Distance From Sun</th>
</tr>
</table>
<script type="text/javascript">
function init() {
google.devrel.samples.hello.init('//' + window.location.host + '/_ah/api');
}
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
</div>
</body>
</html>
And here is my FirebaseApp.js:
function loginEvent()
{
const email = document.getElementById('txtEmail');
const pass = document.getElementById('txtPassword');
email.value = "HELLO";
email.value = firebase.app().name;
pass.value = "NO";
firebase.auth().signInWithEmailAndPassword(email, pass)
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
});
pass.value = "YES"
}
function signupEvent()
{
const email = document.getElementById('txtEmail');
const pass = document.getElementById('txtPassword');
firebase.auth().createUserWithEmailAndPassword(email, pass).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
}
I was changing the values of the email and password just to make sure I was reaching that point. printing out the value of firebase.app().name returns [DEFAULT]. I also made sure email/password option was selected in Firebase. Thank you for any help you can provide.
You only need to include https://www.gstatic.com/firebasejs/4.3.1/firebase.js which contains all the modules needed. No need to include all the others: firebase-app.js, firebase-auth.js, etc.
Also signInWithEmailAndPassword and createUserWithEmailAndPassword accept string arguments. You are passing input elements instead. There should errors thrown in the console because of this. So instead of email, pass email.value.
I have the following problem.
If I put he JavaScript code into the head or body tag, I need to click twice the submit button and then the Ajax form or whatever I need to do it does correctly, but I need to click twice.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>XXXX</title>
<!--Este es el JS que hace que funcione Phonegap-->
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<!--JS específicos de Jquery Mobile-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<!--Estos son script creados para la aplicacion-->
<script src="js/md5.js"></script>
<script src="js/login.js"></script>
<!--CSS del tema que he creado para apotecalia-->
<link rel="stylesheet" href="themes/XXXX.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.2.min.css" />
</head>
<div id="login">
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
<form id="check-user" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label> Usuario </label>
<input type="text" id="correo" name="correo">
</div>
<div data-role="fieldcontain">
<label> Contraseña </label>
<input type="password" id="pwd" name="pwd" >
</div>
<input type="submit" data-role="button" value="Acceder" name="enviar" id="enviar">
</fieldset>
</form>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Login.js
$(function () {
$('#enviar').click( function() {
if($('#correo').val().length > 0 && $('#pwd').val().length > 0){
alert($('#correo').val() + $('#pwd').val());
}
});
});
But if I put the script code into the tag page where I need to use it, I don't need to click twice, but I cannot get the data form to do my Ajax request.
The same code, but if I put the script code into data-role="page" I have to put this code into all the tags... The alert in this case is empty.
<div id="login">
<script src="js/login.js"></script>
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
Please I don't know how to do it, I tried two weeks fixing this, I need your help.
Add simple type="button" instead of type="submit" .
<input type="button" data-role="button" value="Acceder" name="enviar" id="enviar">
$(function () {
$('#enviar').click( function() {
if($('#correo').val().length > 0 && $('#pwd').val().length > 0){
alert($('#correo').val() + $('#pwd').val());
// Add code here submit form data using Ajax
var ajax_call = your_serviceURL;
var str = $('#check-user').serialize();
$.ajax({
type: "POST",
url: ajax_call,
data: str,
dataType: "json",
success: function(response){
// It's success json response
}
}).done(function() {
})
}
});
});
Include your script in the head tag.
Declare your page container <div data-role="page" id="login">.
Change your code in login.js to:
$(document).on("pageinit", "#login", function(event, ui)
{
$(document).on("click", "#enviar", function(event)
{
if ($('#correo').val().length > 0 && $('#pwd').val().length > 0)
alert($('#correo').val() + $('#pwd').val());
});
});
I'm writing a mobile app with PhoneGap and jQuery Mobile. To simplify navigation I want to spread a single form over multiple 'pages' using div data-role="page". The idea is to give the user a wizard like experience for filling in a large form. On completion I need to be able to save the form locally, or submit it, if the mobile is online.
I don't understand how to go about submitting or saving a form using jQuery Mobile if the form is split into multiple 'virtual' pages. I've search the web but can't find any tutorials or examples on solving this problem.
Any help will be appreciated.
UPDATE:
I recently changed the way I worked with multipage forms, and this solution worked nice for me. You basically use a naming convention where fields become part of sections by giving them id's starting with the section name and a dash, e.g: person-name, person-surname. See the answer below.
Ok, I posted my thoughts here: http://www.coldfusionjedi.com/index.cfm/2011/11/18/Demo-of-a-multistep-form-in-jQuery-Mobile
Essentially I ended up using a sever side language to simply include the right part of the form at a time. (I'm using ColdFusion, but any language would work really.) The form self posts and simply displays the right step based on where you are in the process.
A quick help to anyone stuck with the same problem. I did the 'form thing', but it gets sloppy. You basically just embed the page divs inside the form element, but that's not very elegant and has given me some navigation issues.
So I ended up with my own solution that works over huge multipage forms (+/- 1000 elements). Not the most elegant, but it works like a charm:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(function () {
$('#submit_my_form').click(function (e) {
alert(JSON.stringify(readFormData('names')));
alert(JSON.stringify(readFormData('dates')));
});
});
function readFormData(section) {
var sectionData;
var els = $(':input[id|='+section+']');
var sectionData = {};
$.each(els, function() {
if (this.name && !this.disabled && (this.checked
|| /select|textarea/i.test(this.nodeName)
|| /text|hidden|password|date|email/i.test(this.type))) {
sectionData[this.name.substr(section.length+1)] = $(this).val();
console.log(this.name + " -> " + $(this).val());
}
});
return sectionData;
}
</script>
</head>
<body>
<div data-role="page" id="menu" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Menu Page</h1>
</div>
<div data-role="content">
<ul data-role="controlgroup">
<li><a target_id="page1" href="#page1" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right" class=".ui-icon-manditory">Page1</a></li>
<li><a target_id="page2" href="#page2" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right">Page2</a></li>
</ul>
<input id="submit_my_form" type="button" name="send" value="Submit"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
Menu page footer
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 1</h1>
Next
</div>
<div data-role="content">
<label for="names-initials">Name:</label>
<input type="text" name="names-initials" id="names-initials" value=""/>
<label for="names-surname">Surname:</label>
<input type="text" name="names-surname" id="names-surname" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 2</h1>
</div>
<div data-role="content">
<label for="dates-birthday">Birthday:</label>
<input type="date" name="dates-birthday" id="dates-birthday" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Back to Main From</a>
</div>
</div>
</body>
</html>