I have a webpage (MVC) where I'm using jQuery to open a contact form in a modal dialog box. I was following the instructions at this location, http://amitraya.blogspot.com/2012/09/modal-dialog-form-view-using-jquery.html?showComment=1456279968693#c1669084113853730370. Instead of showing up in a modal dialog, the form shows on a separate webpage by itself. I've commented some things out, changed some versions and got many results other than the one I want. I think something may be clashing. Can someone tell me why my form won't show up in a modal dialog box like I want? Thanks for any help. The pertinent code is as follows:
_Layout.cshtml:
<!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">
<meta name="description" content="">
<meta name="author" content="Clarence Benoit">
<title>Background Sound - The Sound System Rental Company</title>
<!-- Bootstrap Core CSS -->
<link href="Content/themes/base/minified/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="Content/backgroundsound.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
#*#Styles.Render("~/Content/css")*#
#*#Styles.Render("~/Content/themes/base/css")*#
#Scripts.Render("~/bundles/modernizr")
</head>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Background Sound</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>About</li>
<li>Packages</li>
<li>Gallery</li>
<li>Contact</li>
<li>Credit</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Full Width Image Header -->
<header class="header-image">
<div class="headline">
<div class="container">
<h1>Background Sound</h1>
<h2>Will Rock Your World</h2>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
#RenderBody()
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © 2016 Background Sound. All Rights Reserved.</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
#*#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/jqueryval")*#
#RenderSection("scripts", required: false)
<!-- jQuery -->
<script src="#Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<!-- Bootstrap Core JavaScript -->
<script src="#Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>").addClass("dialog").att("id", $(this).attr("data-dialog-id")).appendTo("body").dialog({ title: $(this).attr("data-dialog-title"), close: function () { $(this).remove() }, modal: true }).load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
var senderName = $("#senderName").val();
var senderEmail = $("#senderEmail").val();
var message = $("#message").text();
$.ajax({
type: "POST",
url: "Home/SendEmail",
data: { "senderName": senderName, "senderEmail": senderEmail, "message": message },
success: function (data) {
alert("Your email was successfully sent.");
$(this).closest(".dialog").dialog("close");
},
error: function (data) {
alert("There was an error sending your email. Please try again or contact system administrator.");
$(this).closest(".dialog").dialog("close");
}
})
});
});
</script>
Index.cshtml:
(the ActionLink is what's supposed to open the modal dialog)
<div class="featurette" id="contact">
<img class="featurette-image img-circle img-responsive pull-left" src="Images/contactus.gif" height="500" width="500">
<h2 class="featurette-heading">
Contact Us
<span class="text-muted"></span>
</h2>
<p class="lead text-center">
<br /><br />You can contact us by calling 816.529.9986 or<br />clicking #Html.ActionLink("here", "SendEmail", "Home", null, new {#class="openDialog", data_dialog_id="sendEmail", data_dialog_title="Contact Us"}) to send an email.
</p>
</div>
<hr class="featurette-divider">
(the below div is at the bottom of the view and where the partial view is loaded)
<div id="emailForm"></div>
SendEmail.cshtml (partial view):
#model BackgroundSoundBiz.Models.EmailModel
<form id="sendEmailForm">
<div id="sendForm">
#Html.LabelFor(m => m.senderName)<br />
#Html.TextBoxFor(m => m.senderName)
<br />
#Html.LabelFor(m => m.senderEmail)<br />
#Html.TextBoxFor(m => m.senderEmail)
<br />
#Html.LabelFor(m => m.message)<br />
#Html.TextAreaFor(m => m.message)
<br />
<input class="close" name="submit" type="submit" value="Submit" />
</div>
</form>
EmailModel.cs:
public class EmailModel
{
[Required]
[Display(Name = "Name")]
public string senderName { get; set; }
[Required]
[Display(Name = "Email")]
public string senderEmail { get; set; }
[Required]
[Display(Name = "Message")]
public string message { get; set; }
}
SendEmail method in HomeController.cs:
public ActionResult SendEmail()
{
return PartialView("SendEmail", new EmailModel());
}
Rendered page:
<!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">
<meta name="description" content="">
<meta name="author" content="Clarence Benoit">
<title>Background Sound - The Sound System Rental Company</title>
<!-- Bootstrap Core CSS -->
<link href="Content/themes/base/minified/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="Content/backgroundsound.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Background Sound</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>About</li>
<li>Packages</li>
<li>Gallery</li>
<li>Contact</li>
<li>Credit</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Full Width Image Header -->
<header class="header-image">
<div class="headline">
<div class="container">
<h1>Background Sound</h1>
<h2>Will Rock Your World</h2>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<hr class="featurette-divider">
<!-- First Featurette -->
<div class="featurette" id="about">
<img class="featurette-image img-circle img-responsive pull-right" src="Images/aboutus.jpg" height="500" width="500">
<h2 class="featurette-heading">
About Us
<span class="text-muted"></span>
</h2>
<p class="lead">
Background Sound is a new innovative and inexpensive way to get the professional sound system you need for you events and parties at a fraction of the cost. Here's how it works!
You provide you own music by laptop, iPod, or tablet and we do the rest. We'll provide you with a high quality professional sound system, which can consist of brands such as JBL, QSC,
Electro-Voice (EV), Crown, Mackie, and Sure. Lighting and wedding uplighting is also available. We deliver, setup, and take down all equipment. We do have DJs available
if you desire. A sound technician remains at your event operating the sound system and lighting portion of you event assuring you the highest sound quality available making sure your event
is a night to remember while you DJ your party your way with your own style of music.
</p>
</div>
<hr class="featurette-divider">
<!-- Third Featurette -->
<div class="featurette" id="packages">
<img class="featurette-image img-circle img-responsive pull-left" src="http://placehold.it/500x500">
<h2 class="featurette-heading">
Packages
<span class="text-muted"></span>
</h2>
<p class="lead text-center">
<span style="display:block;">Wedding - $350.00</span><br />
2 - 15" two-way speakers • 2 speaker tripod stands • 2 speaker stand decorative white skrims • 1 table (4 ft) with decorative white or black skrim cover • 1 corded mic with 25 ft cable
</p>
<p class="lead">
<span class="text-center" style="display:block;">Upgrades</span><br />
<span class="pull-left">Wireless Mic</span><span class="pull-right">$40.00</span><br />
<span class="pull-left">Party Lights</span><span class="pull-right">$75.00</span><br />
<span class="pull-left">Subs</span><span class="pull-right">$100.00</span><br />
<span class="pull-left">Dinner Lighting (Uplights)</span><span class="pull-right">$20.00/light</span><br />
<span class="pull-left">Cake Pin Spot</span><span class="pull-right">$60.00</span><br /><br />
</p>
<p class="lead">The cake pin spot is used to help show the beauty of your cake or personalize a table for the bride and groom only.</p>
</div>
<hr class="featurette-divider">
<!-- Fourth Featurette -->
<div class="featurette" id="gallery">
<img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500">
<h2 class="featurette-heading">
Gallery
<span class="text-muted"></span>
</h2>
<p class="lead">
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
</p>
</div>
<hr class="featurette-divider">
<!-- Fifth Featurette -->
<div class="featurette" id="contact">
<img class="featurette-image img-circle img-responsive pull-left" src="Images/contactus.gif" height="500" width="500">
<h2 class="featurette-heading">
Contact Us
<span class="text-muted"></span>
</h2>
<p class="lead text-center">
<br /><br />You can contact us by calling 816.529.9986 or<br />clicking <a class="openDialog" data-dialog-id="sendEmail" data-dialog-title="Contact Us" href="/Home/SendEmail">here</a> to send an email.
</p>
</div>
<hr class="featurette-divider">
<!-- Sixth Featurette -->
<div class="featurette" id="credit">
<img class="featurette-image img-circle img-responsive pull-right" src="Images/acknowledgements.gif" height="500" width="500">
<h2 class="featurette-heading">
Credits
<span class="text-muted"></span>
</h2>
<p class="lead text-center">
<br /><br />Website constructed by Clarence Benoit<br /><br />Need a website<br />personal or small business<br />call 816.898.6870.
</p>
</div>
<hr class="featurette-divider">
<div id="emailForm"></div>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © 2016 Background Sound. All Rights Reserved.</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="/Scripts/jquery.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.24.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").click(function (e) {
e.preventDefault();
$("<div></div>").addClass("dialog").att("id", $(this).attr("data-dialog-id")).appendTo("body").dialog({ title: $(this).attr("data-dialog-title"), close: function () { $(this).remove() }, modal: true }).load(this.href);
});
$(".close").click(function (e) {
e.preventDefault();
var senderName = $("#senderName").val();
var senderEmail = $("#senderEmail").val();
var message = $("#message").text();
$.ajax({
type: "POST",
url: "Home/SendEmail",
data: { "senderName": senderName, "senderEmail": senderEmail, "message": message },
success: function (data) {
alert("Your email was successfully sent.");
$(this).closest(".dialog").dialog("close");
},
error: function (data) {
alert("There was an error sending your email. Please try again or contact system administrator.");
$(this).closest(".dialog").dialog("close");
}
})
});
});
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"ac6dd739aa2b4e58a67eda5ec66a09bc"}
</script>
<script type="text/javascript" src="http://localhost:49245/f88ffa026ad94b73bfa9b9bbddf32f30/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Related
I'm trying to implement simple http service in AngularJS by fetching data from an api in json format. its a blog post and i am trying to show it in my blog. The data is received in my console but is not displaying in my blog. Please help. It uses Bootstrap in the front end. Here is a screenshot.
http://imgur.com/a/8p24h
var a = angular.module('Blog', []);
a.controller('BlogControl', function($http) {
var b = this;
this.heading = 'My Angular Blog';
this.subheading = 'Made by Anurag';
this.baseurl = 'https://projectsapi.edwisor.com/api/blogs/';
$http({
method: "GET",
url: this.baseurl + "all"
})
.then(function Success(response) {
console.log(response);
this.bpost = response.data.data;
});
})
<!DOCTYPE html>
<html ng-app="Blog">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My Angular Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-controller="BlogControl as newBlog">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>{{newBlog.heading}}</h1>
<hr class="small">
<span class="subheading">{{newBlog.subheading}}</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-preview" ng-repeat="bl in newBlog.bpost">
{{bl.bodyHtml}}
</div>
<hr>
<!-- Pager -->
<ul class="pager">
<li class="next">
Older Posts →
</li>
</ul>
</div>
</div>
</div>
<hr>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
<!-- Important JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<script src="angular/app.js" type="text/javascript"></script>
</body>
</html>
this is not the instance of the controller inside the callback. Try to capture it outside and then assign bpost on the captured instance:
var that = this;
$http({
method: "GET",
url: this.baseurl + "all"
})
.then(function Success(response) {
console.log(response);
that.bpost = response.data.data;
});
try this npm module anngularjs-requester--http
I'm trying to use a ui-router in Angular to generate a single page with multiple templates in <ui-view></ui-view> but it is unable to load a single template. It just gives a blank page with no JavaScript errors, even the nav bar does not appear.
I have gone through many questions about this on stack but even applying their solutions did not help:
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!--stylesheets-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/eleganticons/et-icons.css">
<link rel="stylesheet" type="text/css" href="assets/css/cardio.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-theme.min.css">
</head>
<body ng-app="myShelfApp">
<nav class="navbar">
<div class="container" >
<!-- Brand and toggle get grouped for better mobile display -->
<!-- <div class="navbar-header">
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="assets/img/logo.png" data-active-url="assets/img/logo-active.png" alt=""></a>
</div> -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right main-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="devices">Search</a></li>
<li><a ui-sref="addDevice">Add</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div ui-view></div>
<section id="service" class="section section-padded">
<!-- Holder for mobile navigation -->
</section>
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-ui-router.js"></script>
<script src="https://unpkg.com/ng-table#2.0.2/bundles/ng-table.min.js"></script>
<script src="app.js"></script>
<script src="service/device.service.js"></script>
<script src="controller/main.controller.js"></script>
<script src="controller/shelf.controller.js"></script>
<script src="controller/device.controller.js"></script>
<script src="controller/newdevice.controller.js"></script>
</body>
</html>
This is the app.js
(function (){
"use strict";
var app=angular.module("myShelfApp",['ui.router','ngTable',"deviceservice"]);
// app.service('DeviceFactoryService',deviceservice(DeviceFactory));
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home",{
url:"/",
templateUrl:"main.html",
});
}]);
app.run(function($rootScope) {
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
})();
and here are my templates:
<div id="home" ng-Controller="mainController">
<div class="container" >
<div class="row text-center title">
<!--<h2>Services</h2>
<h4 class="light muted">Achieve the best results with our wide variety of training options!</h4>-->
<div class="jumbotron">
<h1 class="display-3"> Device Farm </h1>
<hr class="my-4">
<p><span class="label label-info">{{count}}</span></p>
</div>
</div>
<div class="row services">
<div class="col-md-4">
<a href="/devices" >
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/phone-blue.png" alt="" class="icon">
</div>
<h3 class="description">My Devices</h3>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="/add_device">
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/add-blue.png" alt="" class="icon">
</div>
<h3 class="description">Add Device</h3>
</div>
</a>
</div>
<div class="col-md-4">
<a href="">
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/search-blue.png" alt="" class="icon">
</div>
<h3 class="description">Search Device</h3>
</div></a>
</div>
</div>
</div>
<div ></div>
</div>
And this is my app.index.js where i m redirecting to index.js
var express=require("express");
var app= express();
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var router=require('./app.routes.js');
var port=8888;
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({'extended':'true'}));
app.use(bodyParser.json());
app.use(methodOverride());
app.use((request,response,next)=>{
console.log(request.headers)
next()
});
app.use('/api',router);
app.get('*',function(req,res){
res.sendFile('index.html',{root:__dirname+'/public'});
});
app.listen(port,error);
function error(err){
if(err){
console.log(`Something went wrong`,err);
}
console.log(`Server is running on ${port}`);
}
So I guys i found the reason why my ui-router wasnt working.
Apparently you cant declare app.module('app',['dependency']) even in your controllers or other modules with angular.modular('app',[]) also will override your main app.module and because of this i the control wasnt entering app.config for the ui-router to work.
refer to answer :
Angular routing config function not called
for further understanding .
Thank you guys
http://yeoman.io/codelab/write-app.html
I am following this yeoman tutorial. But it doesnt work same.
It doesnt add new todo in to the $scope.todos And I couldnt find why.
You can also find code here:
http://www.beratuslu.com/share/mytodo.rar
What I noticed is, after I clicked submit button it comes in $scope.addTodo function but with empty value. So value is not coming from the form, instead inside of MainCtrl so, kind of there is no link between form and MainCtrl.
Whats wrong?
Thank you..
index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<!-- endbuild -->
</head>
<body ng-app="mytodoApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">mytodo</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a ng-href="#/">About</a></li>
<li><a ng-href="#/">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div ng-include="'views/main.html'" ng-controller="MainCtrl"></div>
</div>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
main.html
<div class="container">
<h2>My todos</h2>
<!-- Todos input -->
<form role="form" ng-submit="addTodo()">
<div class="row">
<div class="input-group">
<input type="text" ng-model="todo" placeholder="What needs to be done?" class="form-control">
<span class="input-group-btn">
<input type="submit" class="btn btn-primary" value="Add">
</span>
</div>
</div>
</form>
<br>
<p class="form-group" ng-repeat="todo in todos">
<input type="text" ng-model="todo" class="form-control">
</p>
</div>
app.js
'use strict';
/**
* #ngdoc overview
* #name mytodoApp
* #description
* # mytodoApp
*
* Main module of the application.
*/
angular
.module('mytodoApp', []);
main.js
'use strict';
/**
* #ngdoc function
* #name mytodoApp.controller:MainCtrl
* #description
* # MainCtrl
* Controller of the mytodoApp
*/
angular.module('mytodoApp')
.controller('MainCtrl', function ($scope) {
$scope.todos = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
$scope.todo="new todo";
$scope.addTodo = function () {
console.log($scope.todo);//empty
$scope.todos.push($scope.todo);
//$scope.todo = '';
};
});
I found the problem. It must be deprecated to use ng-controller directive with ng-include. So I removed it from there and put it in to main html.
<div class="container" ng-controller="MainCtrl">
<h2>My todos</h2>
<!-- Todos input -->
<form role="form" ng-submit="addTodo()">
<div class="row">
<div class="input-group">
<input type="text" ng-model="todo" placeholder="What needs to be done?" class="form-control">
<span class="input-group-btn">
<input type="submit" class="btn btn-primary" value="Add">
</span>
</div>
</div>
</form>
<br>
<p class="form-group" ng-repeat="todo in todos">
<input type="text" ng-model="todo" class="form-control">
</p>
</div>
I have a form that after submission it displays the result in a box, but when I enter too much information (text) in the text box (textarea) it runs out of the box in the output. The solution that I thought it would work, would be to modify the style of the id="output" at the bottom of page to width:450px, but that didn't work.... are there any other suggestions? Here's the link to the form
here's the code
<!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">
<meta content="computer repair, laptop repair, wireless installation, printer installation, printer repair, system administration, website design, web administration, logo design, web application development, computer repair miami fl, web design miami fl, system administration miami fl" name="keywords">
<meta name="Computer Soloution for Small Business and Home Users, Miami, Florida" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Contact Us</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- font awesome -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<!-- font mfizz -->
<link rel="stylesheet" href="path/to/font-mfizz/font-mfizz.css">
<link rel="stylesheet" href="icons/flaticon.css">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- custome css style sheet -->
<link href="carosel_style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
<!-- google analytics code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-61593038-1', 'auto');
ga('send', 'pageview');
//form validation and submition
function validateForm()
{
var fullName = document.forms['myForm']['name'].value;
var emailAdd = document.forms['myForm']['email'].value;
var subject = document.forms['myForm']['subject'].value;
var message = document.forms['myForm']['message'].value;
var outputMsg = "";
var emailReg = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
//validating form fields
if(fullName == null || fullName == "") {
outputMsg += "Name field can not be empty!\n";
}
if(emailAdd == null || emailAdd == "") {
outputMsg += "Email field can not be empty!\n";
}
//if email field not empty check for valid email add
if(emailAdd != "" && !emailReg.test(emailAdd)) {
outputMsg += "Enter a valid email address!\n";
}
if(message == null || message == "") {
outputMsg += "Text field can not be empty!\n";
}
if(outputMsg != "") {
alert(outputMsg);
return false;
}
//sending data fields to php form
var params = "name="+fullName+"&email="+emailAdd+"&subject="+subject+"&message="+message;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", "contact.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("output").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send(params);
//change the style of "ouput" id
document.getElementById("output").style.border = "solid 1px #5A5A5A";
document.getElementById("output").style.padding = "10px";
document.getElementById("output").style.width = "450px";
}
</script>
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img id="main-logo" src="img/title_logo1.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="#">Home</li>
<li>About</li>
<li>Contact</li>
<li><a target="_blank" href="http://pctechtips.org">Blog</a></li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Comuter Repair</li>
<li>System Administration</li>
<li>Website Design</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/computer-keyboard-closeup-header.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>COMPUTER SOLUTIONS FOR HOME AND SMALL BUSINESS.</h1>
<p>Professional IT Support for Home Office, and Small Bussiness. Computer Repair, Printer Repair, Network Suport, System Administration, and Web Design</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Get a Quote</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- /.carousel -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<div class="hero-unit" style="padding:20px 100px">
<h1>Contact Us</h1>
<p>Please send us a description of your computer problems and a we will be in touch as soon as possible with a quote:</p>
</div>
<div class="row">
<div class="col-sm-6">
<div class="my-form">
<form class="form-horizontal" name="myForm" >
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-8">
<input type="name" name="name" class="form-control" id="inputEmail3" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-8">
<input type="email" name="email" class="form-control" id="inputPassword3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Subject:</label>
<div class="col-sm-8">
<input type="text" name="subject" class="form-control" placeholder="Subject">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Text:</label>
<div class="col-sm-8">
<textarea name="message" class="form-control" rows="7" placeholder="Text"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" onclick="validateForm()">Send</button>
</div>
</div>
</div>
</form>
</div>
<div class="col-sm-6">
<img id="google-img" src="https://maps.googleapis.com/maps/api/staticmap?center=Miami+Downtown,Miami,FL&zoom=13&size=500x350&maptype=roadmap&markers=color:red%7CMiami+Downtown,Miami,FL">
</div>
</div><!-- /.row -->
<div class="row"> <!-- output message rown -->
<div class="col-sm-6" >
<!-- display form result message here! -->
<p id="output" >
</p>
</div>
<div class="col-sm-6">
<!--nothing goes here!-->
</div>
</div>
<!-- FOOTER -->
<footer>
<p class="pull-right">Back to top</p>
<p>© 2015 Jorge L. Vazquez ·Privacy · Terms</p>
</footer>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
The p element 'output' that has the content needs
#output{
word-wrap:break-word;
}
break-word allows words to break and wrap to the next line
https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
You have a few options here. On the box, you can try this for CSS:
overflow-x: scroll;
This will allow you to scroll right/left in the box rather than have it bleed out.
If you want to force it to wrap without scroll:
word-wrap: break-word;
try;
<p id="output" style="overflow: scroll; word-wrap:break-word;"></p>
I tried to load jquery-source script before jquery-bootstrap script by changing their order inside "head" element but it didn't work, also, I made sure to link bootstrap CSS file.
I took a look at bootstrap default navbar example and It seems that everything is right but still not working?
Finally, I'm using JSF-2.2 framework and I don't know if it has anything to do with this problem? Here's the full code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
ng-app="indexApp">
<head jsf:id="head">
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta name="description" content=""></meta>
<meta name="author" content=""></meta>
<title>website</title>
<!-- AngularJs-Module !-->
<script jsf:target="body" jsf:name="index/js/indexAppModule.js"></script>
<!--jQuery-->
<script jsf:target="body" jsf:name="lib/jquery/jquery-2.1.3.min.js"></script>
<!--Bootstrap Core JavaScript-->
<script jsf:target="body" jsf:name="lib/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="lib/stellar/jquery.stellar.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="index/js/parallax.js"></script>
<!-- Bootstrap Core CSS -->
<link jsf:library="lib/bootstrap-3.3.2-dist/css" jsf:name="bootstrap.min.css"
href="lib/bootstrap-3.3.2-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom CSS -->
<link jsf:library="index/css" jsf:name="landing-page.css"
href="index/css/landing-page.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom Fonts -->
<link jsf:library="index/css/font-awesome/css" jsf:name="font-awesome.min.css"
href="index/css/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet">
</link>
<!-- form Style -->
<link jsf:library="index/form/css" jsf:name="formstyle.css"
href="index/form/css/formstyle.css" type="text/css" rel="stylesheet">
</link>
<!-- fonts !-->
<link href="http://fonts.googleapis.com/css? family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"></link>
<!--Index Style -->
<link jsf:library="index/css" jsf:name="index.css"
href="index/css/index.css" type="text/css" rel="stylesheet">
</link>
</head>
<body jsf:id="body">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav" id="navfluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Features
</li>
<li>
Technologies
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="section" id="home" data-stellar-background-ratio="0.5">
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="intro">
<h1>Website</h1>
<h3>website</h3>
<hr class="intro-divider"></hr>
<form>
<input name="name" placeholder="Username" class="name" required="true"></input>
<input type="password" name="name" placeholder="Password" class="name" required="true"></input>
<input name="submit" class="btn-login" type="submit" value="LogIn"></input>
<input name="submit" class="btn-login" type="submit" value="SignUp"></input>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="features" data-stellar-background-ratio="0.5">
</div>
<div class="section" id="technologies" data-stellar-background- ratio="0.5">
</div>
<div class="section" id="contact" data-stellar-background-ratio="0.5">
</div>
</body>
Using "src" attribute instead of "library" and "name" jsf's attributes solved the problem.
I found the reason is that because I'm using (jsf:libray="" and jsf:name="") inside script tag.!
The resulted HTML file has an invalid URL of the javascript file which means no script is working.