i am looking for a 2 box searchable multiselect along the lines of the one shown here: http://www.jqueryrain.com/?qmi2lw8H but with the left box fill-able using ajax autocomplete - i.e. you start typing 'abc' and the left box fill with everything containing 'abc' based on the jsonp results.
i have not had any luck so far using available code in the format below
<head>
<!-- BS CSS -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Multiselect/BS -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://myip/multiselect.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<form method="post" name="myForm">
<div class="row">
<div class="col-xs-5">
<select name="from[]" id="search" class="form-control" size="8" multiple="multiple"></select>
</div>
<div class="col-xs-2">
<button type="button" id="search_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
<button type="button" id="search_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
<button type="button" id="search_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button type="button" id="search_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
</div>
<div class="col-xs-5">
<select name="to[]" id="search_to" class="form-control" size="8" multiple="multiple"></select>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
var $select = $('#search').multiselect({
search: {
left: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
right: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
}
});
$select.multiselect('disable');
$.ajax({
type: "POST",
url: "../terms_by_name.php",
dataType: 'jsonp',
data: {term: request.term},
success: function OnPopulateControl(response) {
list = response.d;
if (list.length > 0) {
$select.multiselect('enable');
$("#search").empty().append('<option value="0">Please select</option>');
$.each(list, function () {
$("#search").append($("<option></option>").val(this['Value']).html(this['Text']));
});
$("#search").val(valueselected);
}
else {
$("#search").empty().append('<option selected="selected" value="0">Not available<option>');
}
$("#search").multiselect('refresh'); //refresh the select here
},
error: function () {
alert("Error");
}
});
});
</script>
</form>
the multiselect boxes display, and if i put options manually into the select that works, but the one on the left does not fill from the autocomplete.
i'm pretty new to this stuff. what am i missing?
I got this working by adding jquery ui library and using the built in autocomplete function. here's the final code:
<head>
<!-- Multiselect/BS CSS -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- Multiselect/BS -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://myip/multiselect.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<form method="post" name="myForm">
<div class="row">
<div class="col-xs-5">
<select name="from[]" id="search" class="form-control" size="8" multiple="multiple">
</select>
</div>
<div class="col-xs-2">
<button type="button" id="search_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
<button type="button" id="search_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
<button type="button" id="search_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button type="button" id="search_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
</div>
<div class="col-xs-5">
<select name="to[]" id="search_to" class="form-control" size="8" multiple="multiple"></select>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
var $select = $('#search').multiselect({
search: {
left: '<input type="text" name="q" id="lefts" class="form-control" placeholder="Search..." />',
right: '<input type="text" name="q2" class="form-control" placeholder="Search..." />',
}
});
$select.multiselect('disable');
$( "#lefts" ).autocomplete(
{source: function (request, response) {
$.ajax({
type: "GET",
url: "http://myip/terms_by_name.php",
dataType: 'jsonp',
data: {term: request.term },
success: function OnPopulateControl(response) {
list = response;
if(list.length > 0) {
$select.multiselect('enable');
$("#search").empty().append('<option value="0">ALL</option>');
$.each(list, function () {
$("#search").append($("<option></option>").val(this['id']).html(this['value']));
});
}
else {
$("#search").empty().append('<option selected="selected" value="0">No match<option>');
}
$("#search").multiselect('refresh'); //refresh the select here
},
error: function () {
alert("Error");
}
});
},
minlength: 2
});
});
</script>
</form>
</body>
Related
I have select option (dropdown list) inside a modal in which the option are getting printed below the dropdownlist... I tried checking if the code works if i redirect the page and works, like the options are inside the dropdown box but same thing inside modal doesn't work? Any solutions would be helpful.
add_details.blade
<div class="container">
<div class="row">
<div class="col">
<div>
<h2>Enter Your Details</h2>
<form action="{{ route('save') }}" method="POST" enctype="multipart/form-data">
#csrf
<div>
<div>
<span style="color:black">
<select class="form-control" name="collegeID" id="college_name" required />
<option value="" disabled selected hidden>Select College</option>
#foreach ($college_names as $college_name)
<option value="{{$college_name->collegeID}}">
{{ $college_name->college_name }}
</option>
#endforeach
</select>
</span>
</div>
</div>
<br />
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<input type="radio" value="Cbse" name="regno">
<label for="" style="color:black">CBSE</label>
<input type="radio" value="State" name="regno"> <label style="color:black">PUC</label>
<input type="radio" value="State" name="regno"> <label style="color:black">State</label>
<div id="showCbse" class="myDiv">
<label for="regno" class="form-label"><span style="color:black">Admission Number</span></label>
<input type="number" name="regno" class="form-control" placeholder="Enter valid Admission Number" />
#if ($errors->has('regno'))
<span class="text-danger">{{ $errors->first('regno') }}</span>
#endif
</div>
<div id="showState" class="myDiv">
<label for="regno" class="form-label"><span style="color:black">Register Number</span></label>
<input type="number" name="regno" class="form-control" placeholder="Enter valid Register Number" />
#if ($errors->has('regno'))
<span class="text-danger">{{ $errors->first('regno') }}</span>
#endif
</div>
</div>
</div>
</br>
<label for="name" class="form-label"><span style="color:black">Name</span></label>
<input type="text" name="name" class="form-control" value="{{old('name')}}" placeholder="Enter Name" required />
#if ($errors->has('name'))
<span class="help-block font-red-mint">
<strong>{{ $errors->first('name') }}</strong>
</span>
#endif
</div>
<div>
</br>
<label for="address" class="form-label"><span style="color:black">Address</span></label>
<input type="text" name="address" value="{{old('address')}}" class="form-control" placeholder="Enter Address" required />
#if ($errors->has('address'))
<span class="help-block font-red-mint">
<strong>{{ $errors->first('address') }}</strong>
</span>
#endif
</div>
<div>
</br>
<label for="yop" class="form-label"><span style="color:black">Year Of Passing</span></label>
<input type="date" name="yop" value="{{old('yop')}}" class="form-control" placeholder="Enter Year Of Passing" required />
#if ($errors->has('yop'))
<span class="help-block font-red-mint">
<strong>{{ $errors->first('yop') }}</strong>
</span>
#endif
</div>
<div>
</br>
<label for="email" class="form-label"><span style="color:black">Email</span></label>
<input type="email" name="email" value="{{old('email')}}" class="form-control" placeholder="Enter Email" required />
#if ($errors->has('email'))
<span class="help-block font-red-mint">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
<div>
</br>
<label for="phone" class="form-label"><span style="color:black">Phone Number</span></label>
<input type="number" name="phone" value="{{old('phone')}}" class="form-control" placeholder="Enter Phone Number" required />
#if ($errors->has('phone'))
<span class="help-block font-red-mint">
<strong>{{ $errors->first('phone') }}</strong>
</span>
#endif
</div>
<br /> <br />
<div class="col-md-4">
</br>
<button type="submit" class="btn btn-primary">Add</button>
</form>
<button type="submit" class="btn btn-primary">Back</button>
</div>
</div>
<style>
.myDiv {
display: none;
padding: 10px;
}
</style>
<script>
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var demovalue = $(this).val();
$("div.myDiv").hide();
$("#show" + demovalue).show();
});
});
</script>
add.blade (page where the modal pops up)
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/r-2.2.3/datatables.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!-- Datepicker -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="css/bootstrap-select.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
#extends('auth.dashboard')
#section('title')
Dashboard
#endsection
#section('body')
#if(Session::has('success'))
<div class="alert alert-success alert-dismissible">
{{Session::get('success')}}
</div>
#elseif(Session::has('failed'))
<div class="alert alert-success alert-dismissible">
{{Session::get('failed')}}
</div>
#endif
<body>
</br>
<div class="container">
<div class="row">
<div class="col">
<div>
<div class="pull-right">
<a class="btn btn-primary" title="Add"
href="{{route('add_details')}}"><i class="fas fa-plus-circle"></i></a>
<a class="btn btn-sm" data-toggle="modal" id="mediumButton" data-target="#mediumModal" data-attr="{{ route('add_details')}}" title="Add Institute Details"> ADD
</a>
</div>
</br>
</br>
</br>
<div class="row">
<div class="col-12 table-responsive">
<table class="table table-striped table-bordered user_datatable" id="user_datatable">
<thead class="thead-dark div-2">
<tr>
<center> <th><strong><span style="color:white">ID</span></strong></th> </center>
<th><strong><span style="color:white">Name</span></strong></th>
<th><span style="color:white">Status</span></th>
<th width="15%"><span style="color:white">Action</span></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- medium modal -->
<div class="modal fade" id="mediumModal" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="mediumBody">
<div>
<!-- the result to be displayed apply here -->
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/r-2.2.3/datatables.min.js">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
fill_datatable();
function fill_datatable(collegeID = '') {
var table = $('.user_datatable').DataTable({
order: [
[0, 'desc']
],
processing: true,
serverSide: true,
ajax: {
url: "{{ route('alumni.datatable') }}",
data: {
collegeID: collegeID
}
},
columns: [{
data: 'id',
name: 'id'
},
{
data: 'name',
name: 'name'
},
{
data: 'status',
name: 'status',
mRender: function(data) {
if (data == '1') {
return '<center><span class = "btn btn-danger btn-sm" > Pending </span></center>'
}
if (data == '0') {
return '<center><span class = "btn btn-success btn-sm" > Approved </span></center>'
}
}
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
]
});
}
$('#filter').click(function() {
var collegeID = $('#college_name').val();
if (collegeID != '') {
$('#user_datatable').DataTable().destroy();
fill_datatable(collegeID);
} else {
alert('Select Both filter option');
}
});
});
</script>
<script>
// display a modal (medium modal)
$(document).on('click', '#mediumButton', function(event) {
event.preventDefault();
let href = $(this).attr('data-attr');
$.ajax({
url: href,
beforeSend: function() {
$('#loader').show();
},
// return the result
success: function(result) {
$('#mediumModal').modal("show");
$('#mediumBody').html(result).show();
},
complete: function() {
$('#loader').hide();
},
error: function(jqXHR, testStatus, error) {
console.log(error);
alert("Page " + href + " cannot open. Error:" + error);
$('#loader').hide();
},
timeout: 8000
})
});
</script>
#endsection
It's minor mistake all devs do :D , I also did this type of mistake.
use
<select class="form-control" name="collegeID" id="college_name" required>
Instead of this
<select class="form-control" name="collegeID" id="college_name" required />
Just remove close tag from end of the start tag.
Hello everyone I am using websocket to send images using stomp client and am facing this error:
Uncaught TypeError: Cannot read property 'files' of null
at sendMyImage (app.js:46)
at HTMLButtonElement.<anonymous> (app.js:68)
at HTMLButtonElement.dispatch (jquery.js:5201)
at HTMLButtonElement.q.handle (jquery.js:5009)
sendMyImage # app.js:46
(anonymous) # app.js:68
dispatch # jquery.js:5201
q.handle # jquery.js:5009
This is the code that am using in my index.html
<html>
<head>
<title>chat app</title>
<link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/main.css" rel="stylesheet">
<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/sockjs-client/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/stomp.min.js"></script>
<script src="/app.js"></script>
</head>
<body>
<div id="main-content" class="container">
<div class="row">
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label for="connect">WebSocket connection:</label>
<button id="connect" class="btn btn-default" type="submit">Connect</button>
<button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
</button>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label for="participantId">ParticipantId :</label>
<input type="number" id="participantId" class="form-control" placeholder="Your id here...">
</div>
<div class="form-group">
<label for="id">Content :</label>
<input type="text" id="content" class="form-control" placeholder="Your message content here...">
</div>
<button id="send" class="btn btn-default" type="submit">Send</button>
</form>
</div>
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label>Select an image and hit send:</label>
<input type="file" id="file" accept="image/*"/>
<button id="sendImage" class="btn btn-default" type="submit">Send Image</button>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table id="conversation" class="table table-striped">
<thead>
<tr>
<th>chatmessages</th>
</tr>
</thead>
<tbody id="chatmessages">
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
and this is my app.js code :
var stompClient = null;
const messageWindow = document.getElementById("messages");
const fileInput = document.getElementById("file");
const sendImageButton = document.getElementById("sendImage");
function setConnected(connected) {
$("#connect").prop("disabled", connected);
$("#disconnect").prop("disabled", !connected);
if (connected) {
$("#conversation").show();
}
else {
$("#conversation").hide();
}
$("#chatmessages").html("");
}
function connect() {
var socket = new SockJS('/ws');
socket.binaryType = "arraybuffer";//heere
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
setConnected(true);
console.log('Connected: ' + frame);
stompClient.subscribe('/user/chatmessages', function (chatmessage) {
showChatMessage(JSON.parse(chatmessage.body));
});
});
}
function disconnect() {
if (stompClient !== null) {
stompClient.disconnect();
}
setConnected(false);
console.log("Disconnected");
}
function sendParticipantIdAndContent() {
stompClient.send("/app/chat", {}, JSON.stringify({'participantId': $("#participantId").val(),'content': $("#content").val()}));
}
function sendMyImage() {
let file = fileInput.files[0];
sendMessage(file);
fileInput.value = null;
}
function showChatMessage(message) {
$("#chatmessages").append("<tr><td>" + message.message + "</td></tr>");
}
function addImageToWindow(image) {
let url = URL.createObjectURL(new Blob([image]));
messageWindow.innerHTML += `<img src="${url}"/>`
}
$(function () {
$("form").on('submit', function (e) {
e.preventDefault();
});
$( "#connect" ).click(function() { connect(); });
$( "#disconnect" ).click(function() { disconnect(); });
$( "#send" ).click(function() { sendParticipantIdAndContent(); });
$( "#sendImage" ).click(function() { sendMyImage(); });
});
I really want to know what is the problem because i didn't get why he would be reading the file as a null.
Please tell me where did i mess up
and thank you
The problem is because the fileInput in your javascript is read as null.
you could try something like this
<input type="file" id="file" >
and access content like this
let file = document.getElementById("file").files[0];
And the problem here is definitely not related stomp or spring or websocket.
I am using an ajax request on click to trigger a controller JsonResult in MVC. When I click, I receive an HTML response instead of JSON, here is my code:
$('.platform-list-item').click(function (e) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "#Url.Action("PlatformClick", "To")",
data: JSON.stringify({ "platform": $(this).find(".platform-click").val() }),
success: function (data) {
console.log("worked!");
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
}
});
});
The $(this).find(".platform-click").val() is a string value. Here is my controller code in ToController.cs:
[HttpPost]
public JsonResult PlatformClick(string platform)
{
Debug.WriteLine("PlatformClick");
Debug.WriteLine(platform);
return Json("test");
}
Here are the two new events that show up in my Network Tab through Developer tools. Where did I go wrong? Thank you!
EDIT: Adding HTML View per request:
<div class="platform-to-container">
<div id="platform-container">
<div class="album-container">
<div class="album-img-container">
<img crossorigin="anonymous" id="album-img" src="https://i1.sndcdn.com/artworks-9vhl8uXrclxW-0-t500x500.jpg" />
</div>
</div>
<div class="platform-links-container">
<div class="artist-song">#Model.Album.AlbumName</div>
<div class="artist-song-container">
<img class="artist-img" src="https://i1.sndcdn.com/avatars-000438614124-cca9kq-t500x500.jpg" />
<div class="artist-name">#Model.Artist.ArtistName</div>
</div>
<div class="platform-list-container">
#if (!String.IsNullOrWhiteSpace(Model.Album.SpotifyLink))
{
<div class="platform-list-item">
<div class="platform-logo-container">
<img class="platform-logo" src="https://s3.amazonaws.com/unlink/platform-images/music-service_spotify_v3.svg" />
</div>
<div class="platform-btn-container">
<div class="link-btn"><i class="fas fa-play"></i>Stream</div>
</div>
<input type="hidden" class="platform-click" value="spotify" />
</div>
}
#if (!String.IsNullOrWhiteSpace(Model.Album.ItunesLink))
{
<div class="platform-list-item">
<div class="platform-logo-container">
<img class="platform-logo" src="https://s3.amazonaws.com/unlink/platform-images/music-service_itunes_v2.svg" />
</div>
<div class="platform-btn-container">
<div class="link-btn"><i class="fas fa-play"></i>Download</div>
</div>
<input type="hidden" class="platform-click" value="itunes" />
</div>
}
#if (!String.IsNullOrWhiteSpace(Model.Album.AppleMusicLink))
{
<div class="platform-list-item">
<div class="platform-logo-container">
<img class="platform-logo" src="https://s3.amazonaws.com/unlink/platform-images/music-service_applemusic_v2.svg" />
</div>
<div class="platform-btn-container">
<div class="link-btn"><i class="fas fa-play"></i>Stream</div>
</div>
<input type="hidden" class="platform-click" value="appleMusic" />
</div>
}
</div>
</div>
</div>
</div>
I am doing POC on login application using angular js. On button click I need to navigate to another page. The code which I have written is only updating the url but the view is not getting loaded. I have used ng-view or ui- view also. And I have used $location.path. But still unable to navigate to other page
Here is my code
index.html:
<html ng-app='myApp'>
<head>
<title>Jasmine</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="routing.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" name="myForm" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span>
<b>Username :</b> <input type="text" class="form-control" ng-model="user.name" required>
</span> <br />
<br /> <span>
<b>Password :</b> <input type="password"
class="form-control" ng-model="user.password" required>
</span>
<br><br>
<button class="btn btn-lg btn-primary btn-block" type="submit" ng-disabled="myForm.$invalid">
<b>Sign in</b>
</button>
</form>
</div>
{{message}}
</div>
<div ui-view></div>
</body>
</html>
Here I have used ui-view.. when i use this, url is updating but not the view..
when i use ng-view, the script block is happening both in chrome and firefox.
routing.js:
var applog = angular.module('myApp', ['ngRoute']);
applog.controller("LoginController", function ($scope, $location, $window) {
$scope.message = "hi";
$scope.login = function () {
var username = $scope.user.name;
var password = $scope.user.password;
$location.path('/home');
};
});
applog.controller("HomeController", function ($scope, $location) {
$scope.msg = "qwerty";
});
applog.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.html',
controller: 'LoginController'
}).when('/home', {
templateUrl: '/home.html',
controller: 'HomeController'
}).otherwise({
redirectTo: 'index.html'
});
});
Here I tried with hash also.. not working
Home.html:
<div ng-controller="HomeController">
Welcome....
</div>
Please can some one point me in the right direction with this code.
When my form has been submitted a message is displayed however at the moment the Submit Button is still present.
I want to remove/hide the submit button once the form has been successfully submitted and the Success Message is being displayed.
I have looked around for answers on stack-overflow but so far everything I have tried has not worked.
Im sure I need to add something like this:
$('#sky-form button[type="submit"]').hide();
However I think maybe there is something already in the code that is stopping this from happening.
Here is my submit and message part of my form:
<button type="submit" button class="border-button">NEXT</button>
<div class="message">
<i class="fa fa-check"></i>
<p>Thanks for your order!<br>We'll contact you very soon.</p>
</form>
And here is the ajax:
submitHandler: function(form)
{
$(form).ajaxSubmit(
{
beforeSend: function()
{
$('#sky-form button[type="submit"]').addClass('button-uploading').attr('disabled', true);},
uploadProgress: function(event, position, total, percentComplete)
{
$("#sky-form .progress").text(percentComplete + '%');
},
success: function()
{
$("#sky-form").addClass('submited');
$('#sky-form button[type="submit"]').removeClass('button-uploading').attr('disabled', false);
}
});
},
Thanks so much to anyone that can help with this.
FULL CODE:
<form action="demo-order-process.php" method="post" enctype="multipart/form-data" id="sky-form" class="sky-form">
<fieldset>
<div class="row">
<div class="col-md-4" align="left">
<label class="input">
<input type="text" name="home_address" placeholder="Home Address">
<b class="tooltip tooltip-bottom-left">Enter your home address</b>
</label>
</div>
<div class="col-md-4" align="left">
<label class="input">
<input type="text" name="biz_address" placeholder="Biz Address">
<b class="tooltip tooltip-bottom-left">Enter your biz address</b>
</label>
</div>
</div><!-- END OF ROW DIV -->
</fieldset>
<!-- FORM ONE DATA -->
<input type="hidden" name="name"
value="<?php echo $_POST['name']; ?>">
<input type="hidden" name="email"
value="<?php echo $_POST['email']; ?>">
<!-- END OF FORM TWO DATA -->
<!-- FORM TWO DATA -->
<input type="hidden" name="mobile"
value="<?php echo $_POST['mobile']; ?>">
<input type="hidden" name="home"
value="<?php echo $_POST['home']; ?>">
<!-- END OF FORM TWO DATA -->
<div class="row">
<div class="col-md-4" align="left">
<button type="submit" button class="border-button">NEXT</button>
</div>
</div><!-- END OF ROW DIV -->
<div class="message">
<i class="fa fa-check"></i>
<p>Thanks for your order!<br>We'll contact you very soon.</p>
</div>
</form>
</div>
<!-- START OF JS VALIDATION -->
<script type="text/javascript">
$(function()
{
$("#sky-form").validate(
{
rules:
{
home_address:
{
required: true
},
biz_address:
{
required: true
},
messages:
{
home_address:
{
required: 'Please enter your home address'
},
biz_address:
{
required: 'Please enter your business address'
},
},
// Ajax form submition
submitHandler: function(form)
{
$(form).ajaxSubmit(
{
beforeSend: function()
{
$('#sky-form button[type="submit"]').addClass('button-uploading').attr('disabled', true);
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#sky-form .progress").text(percentComplete + '%');
},
success: function()
{
$("#sky-form").addClass('submited');
$('#sky-form button[type="submit"]').removeClass('button-uploading').attr('disabled', false);
}
});
},
errorPlacement: function(error, element)
{
error.insertAfter(element.parent());
}
});
});
</script>
<!-- END OF JS VALIDATION -->
JQuery Librarys:
`
<!-- fort forms -->
<script src="../form/jquery.min.js"></script>
<script src="../form/jquery-ui.min.js"></script>
<script src="../form/jquery.form.min.js"></script>
<script src="../form/jquery.validate.min.js"></script>
<!-- for page finctions -->
<!-- PROBLEM FILE = <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>-->
<script type="text/javascript" src="../js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery.mb.YTPlayer.min.js"></script>
<script type="text/javascript" src="../js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar.js"></script>
<script type="text/javascript" src="../js/plugins.js"></script>
<script type="text/javascript" src="../js/main.js"></script>`
I just tried this code and seems to be working.
If it did not work please check the error you are getting in console.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<form action="demo-order-process.php" method="post" enctype="multipart/form-data" id="sky-form" class="sky-form">
<fieldset>
<div class="row">
<div class="col-md-4" align="left">
<label class="input">
<input type="text" name="home_address" placeholder="Home Address">
<b class="tooltip tooltip-bottom-left">Enter your home address</b>
</label>
</div>
<div class="col-md-4" align="left">
<label class="input">
<input type="text" name="biz_address" placeholder="Biz Address">
<b class="tooltip tooltip-bottom-left">Enter your biz address</b>
</label>
</div>
</div><!-- END OF ROW DIV -->
</fieldset>
<!-- FORM ONE DATA -->
<input type="hidden" name="name" value="<?php echo $_POST['name']; ?>">
<input type="hidden" name="email" value="<?php echo $_POST['email']; ?>">
<!-- END OF FORM TWO DATA -->
<!-- FORM TWO DATA -->
<input type="hidden" name="mobile" value="<?php echo $_POST['mobile']; ?>">
<input type="hidden" name="home" value="<?php echo $_POST['home']; ?>">
<!-- END OF FORM TWO DATA -->
<div class="row">
<div class="col-md-4" align="left">
<button type="submit" button class="border-button">NEXT</button>
</div>
</div><!-- END OF ROW DIV -->
<div class="message">
<i class="fa fa-check"></i>
<p>Thanks for your order!<br>We'll contact you very soon.</p>
</div>
</form>
<!-- START OF JS VALIDATION -->
<script type="text/javascript">
$(function()
{
$("#sky-form").validate({
rules:
{
home_address:
{
required: true
},
biz_address:
{
required: true
}
},
messages:
{
home_address:
{
required: 'Please enter your home address'
},
biz_address:
{
required: 'Please enter your business address'
},
},
// Ajax form submition
submitHandler: function(form) {
$(form).ajaxSubmit(
{
beforeSend: function()
{
$('#sky-form button[type="submit"]').addClass('button-uploading').attr('disabled', true);
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#sky-form .progress").text(percentComplete + '%');
},
success: function()
{
$("#sky-form").addClass('submited');
$('#sky-form button[type="submit"]').removeClass('button-uploading').attr('disabled', false);
$('#sky-form button[type="submit"]').hide();
}
});
},
errorPlacement: function(error, element)
{
error.insertAfter(element.parent());
}
});
});
</script>
<!-- END OF JS VALIDATION -->