set background image for a state/template in angularjs? - html

I tried putting a div tag around the whole template and styling it with css like
<div ng-style="{'background-image': 'url(/images/food.png)', 'background-repeat': 'repeat-y'}">
<img src="/images/final.png" class="brandImg center-block">
<h3 class="text-center"> Please Enter your Registered Mobile Number to Login</h3>
<form novalidate name="CSloginForm" ng-submit="loginCustomer()" role="form" class="csLoginForm col-xs-6 col-xs-offset-3">
<div class="form-group col-xs-offset-1">
<label for="phno" style="font: 22px sans-serif;">Mobile No</label>
<input type="tel" name="phno" id="phno" style="margin-left: 60px; width: 300px; margin-top: 50px; margin-bottom: 20px" class="phInput" ng-maxlength="10" ng-minlength="10" ng-model="csNumber" required />
</div>
<div class="form-actions">
<button type="submit" ng-disabled="CSloginForm.$invalid" class="btn btn-primary btn-lg col-xs-offset-9" ng-click="csLookUp()" style="margin-bottom: 10px">Start</button>
</div>
</form>
</div>
but this only puts background in a header part of the Page not the whole page?

You can use $rootScope for this. Object in the root scope are propagated to all child scopes.
angular.module('app').run(function($rootScope) {
$rootScope.app = { background-image: 'url(/images/default.png)' };
});
Now in your base HTML template you add the background to the body (not a div).
<html ng-app="app">
<head>
...
</head>
<body ng-style="{'background-image': app.background, 'background-repeat': 'repeat-y'}">
...
</body>
Given that the view has a controller
<div ng-controller="PageCtrl">
..
</div>
You can access app and set the background from the controller
angular.module('app').controller('PageCtrl', function($scope) {
$scope.app.background = 'url(/images/food.png)';
});
You can set the background in a view without a controller using ng-init, but this is discouraged.

Related

Get data from database based on search by name(Input field) in Laravel

I have an issue with Laravel. I have a page where two fields are given; one is a select option in which two parameters are given (name, PRN). Below this, I have an input field and submit button.
When the user writes the name in the input field and searches. It should get data from that user on the next page in table format.
receipt.blade.php
<body>
<div class="form_design">
<div class="container">
<div class="row">
<div class="col-md-10 mx-auto">
<h1 class="mt-0 text-center mb-4 text-white">Get Receipt</h1>
<p style="text-align: left; margin-bottom: 0px !important;">
Home </p>
<div class="boxed_shadow">
<h5><span class="question-label active">Search your transactions for Receipt</span></h4>
<form action="{{url('/')}}" id="submit_form" method="POST" >
#csrf
<div class="alert alert-danger" id="RegisterAlert" role="alert" style="display:none">Record not found.</div>
<div class="form-group">
<select class="form-control" id="tran_type">
<option value="pg_res_txn_id">PRN</option>
</select>
</div><!-- /input-group -->
<div class="form-group">
<label><span class="star_vld">*</span>Search Based On PRN</label>
<input type="text" class="form-control" id="MainContent_TextBoxEmpId">
</div>
<div class="form-group text-center">
<input type="button" class="btn btn-sm px-5" id="MainContent_ButtonSearch" value="Search" style="background-color: #c2d3c8;font-size: 14px;font-weight: 600;">
</form>
<form id="receipt_list" method="POST" style="display:none" >
<table id="rec_list" border='1' class="table">
</table>
</form>
</div>
</div>
</div>
</div>
</div>
ReceiptController.php
class ReceiptController extends Controller
{
public function index()
{
return view('receipt');
}
}
Please give me the solution for this. If anyone wants more data, I can share it with you want to get data based on search and display it on the next page. Data should be from the database; my table name is 'form2s'.
I didn't get the result. I tried but did not get a result.
I have been working on Laravel for the last three months.

Attach a input element with a Form using jQuery

How to attach a input element with a Form using jQuery ?
I have a Form like below.
<form action="{{ route('update_profile') }}" method="POST" id="buildyourform"
enctype="multipart/form-data">
<div class="form-group">
<label for="exampleFormControlFile1">Company Logo</label>
<div id="company_logo">
<i class="ri-close-line" title="Click to Update Image"></i>
</div>
</div>
<div class="flex-row">
<div class=" d-flex justify-content-end ">
<button type="submit" class="btn btn-primary mb-5 mt-3">Update</button>
</form>
</div>
</div>
I am trying to place <input type="file" class="form-control-file" name="company_logo" /> inside <div id="company_logo"></div> using jQuery.
I am using below jQuery code.
var fName = $("<input type=\"file\" class=\"form-control-file\" name=\"company_logo\" />");
$("#company_logo .ri-close-line").click(function() {
$("#company_logo").html(fName);
});
But this code is not working when I submit the Form.
Below code is working.
var fName = $("<input type=\"file\" class=\"form-control-file\" name=\"company_logo\" />");
$("#company_logo .ri-close-line").click(function() {
$("#buildyourform").append(fName);
});
How to attach a input element with a Form using jQuery ?

How to do button parallel

I tried so many ways to parallel for those two buttons.Two buttons are parallel if I remove html.beginform. My problem is that I can't remove html.beginform. Please show me the right direction.
html code:
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
#using (Html.BeginForm("ExportExcel", "SalesByBranch", FormMethod.Post#*, new { enctype = "multipart/form-data" }*#))
{
<input type="submit" value="Excel" id="btnExcel" class="btn btn-danger btn-sm form-control" onclick=DataCheck(); style="width:80px;height:30px;" />
}
#using (Html.BeginForm("ExportPDF", "SalesByBranch", FormMethod.Post#*, new { enctype = "multipart/form-data" }*#))
{
<input type="submit" value="PDF" id="btnPDF" class="btn btn-danger btn-sm form-control" onclick=DataCheck(); style="width:80px;height:30px;" />
}
</div>
</div>
Photo
Please reply me.
Wrap the buttons inside a div with the following style:
display: inline-block;
So? http://jsfiddle.net/3aowjLc1/
display:inline block
You must add agin your "script".

MeteorJs googleMaps autocompletion

I have an app developed using MeteorJs and I am trying to include googleMaps autocompletion using this package
https://github.com/jshimko/meteor-geocomplete
I want to have autocompletion in two views one is the landing page which has a simple input field autocompletion field only and the other is a submit_property view which has an autocomplete + map input fields, the problem is that I have followed all the instructions available for implementing autocompletion but their seems to be something wrong with my code, due to the fact that auto-completion does not appear in my inputs.
Landing page HTML:
<template name="layoutLanding">
<header>
<title>Real Estate</title>
<link rel="stylesheet" type="text/css" class="" href="/css/bootstrap.css">
</header>
<main>
<div id="Header">
<div class="wrapper">
</div>
</div>
<div id="bg">
<img src="/img/48.jpg" class="big"/>
</div>
<div id="Content" class="wrapper">
<div class="countdown styled"><img src="/img/logo.png"/></div><br/>
<!-- <h2 class="intro">Our website is under construction. Stay tuned for something amazing!. Subscribe to be notified.</h2> -->
<div id="subscribe">
<form action="" method="post" onsubmit="">
<p>
<button type="button" id="select">Acheter</button>
<button type="button" id="select1">Louer</button>
</p>
<!-- Using 2 traingles to achieve border outline :) -->
<i id="triangle_down1" style="display: none"><i></i></i>
<i id="triangle_down" style="display: none"><i></i></i><br/>
<!--Louer triangles -->
<i id="triangle_down2" style="display: none"><i></i></i>
<i id="triangle_down3" style="display: none"><i></i></i><br/>
<div></div>
<p><input name="" placeholder="Entrer une ville au Maroc" type="text" id="landing-entry"/>
<input type="submit" id="main" value="Search"/>
</p>
</form>
</div>
</div>
<div id="overlay"></div>
</main>
</template>
Landing page JS
Template.layoutLanding.onRendered(function() {
this.autorun(function(){
if(GoogleMaps.loaded()){
$('#landing-entry').geocomplete();
}
});
});
Submit_property HTML
<!-- This file is quite big so i have just included where the autocompletion needs to be -->
<div class="clearfix"></div>
<hr>
{{> afQuickField name="address" id="geocomplete" placeholder="Type in an address"}}
<input id="find" type="button" class="btn btn-primary" value="Find Address" />
<div class="map_canvas"></div>
<hr>
submit_property JS
Template.submit_property.onRendered(function() {
this.autorun(function(){
if(GoogleMaps.loaded()){
$('#geocomplete').geocomplete({
map: ".map_canvas",
details: "form",
types: ["geocode", "establishment"],
});
}
});
});
Template.submit_property.events({
'click #find': function(){
$('#geocomplete').trigger('geocode');
}
});
It seems you forgot to include Google Maps API loading using GoogleMaps.load function:
if (Meteor.isClient) {
// Load the Google Maps API on startup
Meteor.startup(() => {
GoogleMaps.load({
key: '',
libraries: 'places'
});
});
Template.layoutLanding.onRendered(function () {
this.autorun(function () {
if (GoogleMaps.loaded()) {
$('#landing-entry').geocomplete();
}
});
});
}
meteor-geocomplete package utilizes Google Maps Places API
meteor-geocomplete package has a dependency to
meteor-google-maps package which in turn is used for Google Maps
API loading.

How to get data from a div in AngularJS

I use an input text to put text in div. When I write something in the input and I press the key Enter, the text from the input field is added to a div just below and normally, an array should be updated in my controller with the new value. I don't know how can I get the list of element text added to the div from a controller.
I'm trying to use the property n-change on my div with ng-model but it doesn't work.
<div class="row center" id="searchD" >
<form id="search" >
<input type="text" id="searchInput" onchange="createTag($(this).val());"/>
</form>
</div>
<div class="row center" ng-controller="Mainctrl">
<div id="tagContainer" ng-model="tagList" ng-change="tagList()">
</div>
</div>
You could do it something like below if that is what you are expecting.
Html :
<div class="row center" id="searchD" ng-controller="Mainctrl">
<form id="search" >
<input type="text" id="searchInput" ng-model="tagInput" ng-change="addTag()"/>
</form>
</div>
<div class="row center">
<div id="tagContainer" ng-repeat="tag in tagList">{{tag}}
</div>
</div>
Mainctrl:
$scope.tagList = [];
$scope.addTag = function () {
$scope.tagList.push($scope.tagInput);
$scope.tagInput = '';
}
Are you asking how to get data from the controller onto the html page? If so, you just use angular interpolation {{ someData }}
<div id="tagContainer" ng-model="tagList" ng-change="tagList()">
{{ tagList }}
</div>