AngularJS search doesn't work - javascript

I have a MySQL database and table in it. I take data from it using Node JS. My HTML code contains input search and a table that has data from search results. I use AngularJS for searching.
The problem is that search doesn't work. I have the whole table instead of some results.
Part of HTML code:
<div class="search">
<form action="" method="post" class="searchform" >
<input type="search" name="" placeholder="Поиск" class="inputsearchform" ng-model="search"/>
<input type="submit" name="" value="" class="submitsearchform" />
</form>
</div>
<div class="songlist" ng-app='test_table' ng-controller='main_control'>
<table id="songlistTableR">
<tr><th>Name</th><th>Link</th></tr>
<tr ng-repeat="data in loaded | filter:search">
<td><i class="fa fa-plus"></i>{{data.song_name}}</td>
<td><a href="{{data.link}}" target='_blank'>Youtube</a></td>
</tr>
</table>
</div>
JS script:
var app = angular.module('test_table', []);
app.controller('main_control',function($scope, $http){
load();
function load(){
$http.get("http://localhost:7001/load").success(function(data){
$scope.loaded=data;
});
}
});

All your angular html code need to be nested in the ng-app attribute, so your <div class="search"> is never parsed by Angular, including your ng-model definition. You should edit your code into something like:
<div class="songlist" ng-app='test_table' ng-controller='main_control'>
<div class="search">
<form action="" method="post" class="searchform" >
<input type="search" name="" placeholder="Поиск" class="inputsearchform" ng-model="search"/>
<input type="submit" name="" value="" class="submitsearchform" />
</form>
</div>
<table id="songlistTableR">
<tr><th>Name</th><th>Link</th></tr>
<tr ng-repeat="data in loaded | filter:search">
<td><i class="fa fa-plus"></i>{{data.song_name}}</td>
<td><a href="{{data.link}}" target='_blank'>Youtube</a></td>
</tr>
</table>
</div>

Related

Fetching values from database and showing it in a form upon button click in Laravel

We have a table whose contents are fetched from database. Now, we want to fill a form by data of the relevant row of table that was clicked in Laravel.
This is how the table (left) and the form looks
Table code:
<table id="category_table" class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
#foreach($cat as $c)
<tr>
<?php $index=1;?>
<td>{{$c->cat_name}}</td>
<td width="5%"><button class="btn btn-info" onclick=fill(this)><i class="fa fa-arrow-right"></i></button>
</tr>
<?php $index=$index+1;?>
#endforeach
</tbody>
<tfoot>
</tfoot>
</table>
This is a part of form code:
<div class="card-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name" value="">
</div>
<div class="form-group">
<label for="short_name">Short Name</label>
<input type="text" class="form-control" id="short_name" placeholder="Short Name">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" placeholder="Description"></textarea>
</div>
This is the javascript part that fetched the selected table row value through which we need to fetch other values from the database into form:
<script type="text/javascript">
function fill(e)
{
var $item = $(e).closest("tr").find("td:first").text();
document.getElementById("name").value= $item;
}
}
</script>
You can do something like this:
<button class="btn btn-info" data-model='{{$c->toJson()}}' onclick="fill()">
// then in js something like
function fill() {
let $item = $(this).attr("data-model");
console.log($item); // item should have all the data
}
Edit:
The questioner didn't make use of Laravel Eloquent Models. That's why the solution, in this case, deals with normal php objects like so:
data-model='{{ json_encode($c)}}'

Submit form without redirection with ajax

i'm trying to make some things with ajax and it doesn't work.
I have a view with some divs where i will be all the functionality of the page.
The view's code is this:
#extends('cms.public.layouts.default')
#section('content')
<div class="col-md-10">
<h3 style="letter-spacing:40px;text-align:center;color:f15d5e;">PROYECTOS</h3>
</div>
<div id="listall"> <!-- DIV TO LIST ALL THE PROJECTS START HERE -->
<div class="col-md-2" style="padding:20px;">
<button type="button" id="buttoncreate" class="btn btn-danger">Crear Proyecto</button>
</div>
<table class="table">
<thead style="color:white">
<tr>
<th>Id</th>
<th>Slug</th>
<th>Order</th>
<th>Public</th>
<th>Path header</th>
<th>Path home</th>
<th>Fecha creación</th>
<th>Fecha ultima actualización</th>
<th><span class="glyphicon glyphicon-cog"></span></th>
</tr>
</thead>
<tbody style="color:white">
#foreach ($projects as $key => $project)
<tr>
<th>{{$project->id}}</th>
<td>{{$project->slug}}</td>
<td>{{$project->order}}</td>
<td>{{$project->public}}</td>
<td>{{$project->pathheader}}</td>
<td>{{$project->pathhome}}</td>
<td>{{ date('M j, Y', strtotime($project->created_at))}}</td>
<td>{{ date('M j, Y', strtotime($project->updated_at))}}</td>
<td>View Edit
#endforeach
</tr>
</tbody>
</table>
<br><br>
</div> <!-- DIV TO LIST ALL THE PROJECTS END HERE -->
<div id="form1" style="display:none;" class="col-md-8"> <!-- DIV TO SHOW THE CREATE PROJECT FORM 1 START HERE-->
<div>
<h3>Crear nuevo proyecto</h3>
</div>
<div id="formcreateproject">
<form method="POST" action="{{ route('admin.projects.store') }}" enctype="multipart/form-data" id="myForm" name="myForm">
<div class="form-group">
<label name="title">Slug:</label>
<input type="text" id="slug" name="slug" placeholder="ejemplo-de-slug" class="form-control form-control-sm">
<label name="order">Order:</label>
<input type="number" id="order" name="order" class="form-control form-control-sm">
<label name="public">Public:</label>
<input type="number" id="public" name="public" class="form-control form-control-sm">
<label name="body">Header</label>
<input type="file" name="pathheader" id="pathheader" class="form-control-file" aria-describedby="fileHelp"><br>
<label name="body">Home</label>
<input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp"><br>
<input type="submit" value="Crear Proyecto" id="createprojectsubmit" class="btn btn-danger btn-md">
<input type="hidden" name="_token" value="{{ Session::token() }}">
<br><br><br>
</div>
</form>
</div>
</div> <!-- DIV TO SHOW THE CREATE PROJECT FORM 1 END HERE-->
<div id="form2" style="display:none;" class="col-md-6">
<div class="col-md-">
<h3>Crear nuevo proyecto</h3>
</div>
<form method="POST" action="{{ route('admin.projects.store') }}" enctype="multipart/form-data">
<div class="form-group">
<label name="title">Slug:</label>
<input type="text" id="slug" name="slug" placeholder="ejemplo-de-slug" class="form-control form-control-sm">
<label name="order">Order:</label>
<input type="number" id="order" name="order" class="form-control form-control-sm">
<label name="public">Public:</label>
<input type="number" id="public" name="public" class="form-control form-control-sm">
<label name="body">Header</label>
<input type="file" name="pathheader" id="pathheader" class="form-control-file" aria-describedby="fileHelp"><br>
<label name="body">Home</label>
<input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp"><br>
<input type="submit" value="Crear Proyecto" id="createprojectsubmit" class="btn btn-danger btn-md">
<input type="hidden" name="_token" value="{{ Session::token() }}">
<br><br><br>
</div>
</form>
</div>
</div>
#stop
And the javascript function is this:
//Javascript view /projects/menu.blade.php
$(document).ready(function(){
$("#buttoncreate").click(function(){
$("#listall").hide();
$("#form1").fadeIn(1000);
$("#createprojectsubmit").submit(function(e){
e.preventDefault();
$.ajax({
url:'/admin/projects/postUpload',
type:'post',
data:$('#myForm'),
success: function(){
$("#form1").fadeOut(1000);
$("#form2").fadeIn(1000);
}
});
});
});
});
The function of hide the first div and fade in the second works, and it submit and create the new project. But url change and show me a white page.
My first thing to do is fadeOut the form1 and fadein the second form. It will be great, if when fadeOut the form1, in her space appears a tick/check.
Thanks a lot, any help will be appreciated.
you are calling submit event on button which does not belong to button. It belongs to form. So call the click event on button and use preventDefault() to stop the form to be submitted as
$("#createprojectsubmit").submit(function(e){
e.preventDefault();
//your further code goes here
}
use like this
$("#createprojectsubmit").click(function(e){
e.preventDefault();
//your further code goes here
}
You can also trigger the submit event on your form as
$("#myForm").submit(function(e){
e.preventDefault();
//your further code goes here
}
This is because you are mixing 2 ways to handle the submission of your form: the click on the button and the form submission itself.
The function submit as you call in your script is making the binding of the submit event when the button is clicked.
Here is how to bind your code only on the submit event of your form:
$(document).ready(function(){
$("#buttoncreate").click(function(){
$("#listall").hide();
$("#form1").fadeIn(1000);
$("#myForm").submit();
});
$("#myForm").submit(function(e){
e.preventDefault();
$.ajax({
url:'/admin/projects/postUpload',
type:'post',
data:$('#myForm'),
success: function(){
$("#form1").fadeOut(1000);
$("#form2").fadeIn(1000);
}
});
});
});
EDIT: Edited answer to take in account the click on the button.
At first, we bind the click event on the button to handle animations and trigger the form submission by calling submit function on the form.
Then, we bind the submit event on the form to handle the ajax call in replacement of the classic postback form submission.

Ajax HTML FORM not sending input

i've got a problem I can't figure out.
I have a page (index.php) that open a form, includes another page with PHP (indexsearch.php) and close the form.
This included page is working with a script that display some datas from my website, the data are requested on the page with an AJAX function that is linked to search.php, that is working with a table and checkboxes so we can choose which data to work with.
See this schema :
Everything is working fine but the checkboxes are not send even when they are checked. I did added the name and the value in search.php
<td> <input type="checkbox" name="ajout[]" value="<?php echo $result['id']; ?>"/> </td>
I also did not opened another form.
So I guess the problem may come from the fact the AJAX datas work as an independant form that is not included in my page.
Please see the html code :
<body>
<div class="division">
<table id="text-p">
<tr>
<td>
<form action="" method="get" enctype="multipart/form-data">
<textarea id="text-p1" name="text-p1" maxlength="300" placeholder="Text1"></textarea>
</td>
<td>
<textarea id="text-p2" name="text-p2" maxlength="300" placeholder="Text2"></textarea>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p1" type="file" accept="image/*">
</td>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p2" type="file" accept="image/*">
</td>
</tr>
</table>
</div>
<div class="division">
<div width="100%" style="height: 50px;">
<input type="text" name="recherche" id="recherche" style="width: 75%; float:left; display: inline-block;" placeholder="Rechercher...">
<div style="float:right;">
<input type="radio" name="onglet" value="val1" id="act" checked="">Activité
<input type="radio" name="onglet" value="val2" id="sect">Secteur
<input type="radio" name="onglet" value="val3" id="ecr">Ecrans
</div>
</div>
<div width="100%" id="resultats">
<input id="ok" type="button" class="pageselector" name="pageselector" value="1" checked=""><table id="resultat1" width="100%" style="text-align: center;" class="resultatshow">
<tbody><tr>
<td>Cat</td>
<td>Text-1</td>
<td>Text-2</td>
<td>Sélec</td>
</tr>
<tr>
<td>Cat1</td>
<td>NULL</td>
<td>NULL</td>
<td> <input type="checkbox" name="ajout[]" value="1"> </td>
</tr>
<tr>
<td>CAT2</td>
<td>EMPTY</td>
<td>EMPTY</td>
<td> <input type="checkbox" name="ajout[]" value="2"> </td>
</tr>
</table></div>
<input type="submit" value="UPDATE">
</div>
</body>
How can I fix that ?
I am not sure but I guess it can be caused by square brackets in the name attribute of your checkboxes. If you have reason to do it, you have to work with it properly. For example, here is the HTML form field:
<input type='checkbox' name='checkbox[myOption]'>
You have to remember that POST is an array of options. So doing like above you have to access it in the right way on the server side:
$_POST['checkbox']['myOption'];
I don't know if that solves your problem but I hope it helps a little bit

Simple solution to use html form as input for python script

I have looked everywhere and I didn't found really good answer.
I am generating local html page with python and I want to read data from form over there, use this as input for python script and display return from there properly.
f = open('testapi.html','w')
message = """
<html>
<head>
<title></title>
<link rel="stylesheet" href="Bootstrap/bootstrap-3.3.5-dist/css/bootstrap.css" type="text/css"/>
<script>
</script>
</head>
<body>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-3">
<p>Search for best deals</p>
<form name="deals" action="">
<table>
<thead></thead>
<tbody>
<tr> <th>Title </th> <th><input type="text" id="Title" value=""><br></th> </tr>
<tr> <th>Lowest price</th> <th><input type="text" id="LowerPrice" value=""><br></th> </tr>
<tr> <th>Highest price</th> <th><input type="text" id="UpperPrice" value=""><br></th> </tr>
<tr> <th>Sale only</th> <th><input type="checkbox" id="OnSale" value=""></br></th> </tr>
</tbody>
</table>
<p>Sort by:</p>
<input type="radio" name="sort" id="DealRating" value="a">Deal rating<br>
<input type="radio" name="sort" id="Title" value="b">Title<br>
<input type="radio" name="sort" id="Price" value="c">Price<br>
<input type="radio" name="sort" id="Release" value="d">Release<br>
<input type="button" name="Sumbit" value="Submit" onClick="">
</form>
<p> Note: all fields are optional, fill only what you are intrested in.</p>
</div>
<div class="col-md-2">
<p> OR </p>
</div>
<div class="col-md-3">
<p>Search for your favourite games<p>
<form name="games" action="">
<table>
<thead></thead>
<tbody>
<tr><th>Title</th> <th><input type="text" id="GameTitle" value=""></br></th></tr>
</tbody>
</table>
<input type="button" name="Sumbit" value="Submit" onClick="">
</form>
<p> Note: all fields are optional, fill only what you are intrested in.</p>
</div>
<div class="col-md-2">
</div>
</div>
</body>
</html>
"""
f.write(message)
f.close()
my question now is: how I can use that form input to process it in api search and then return result back on this page?
OR
eventually: how to runnpython script from my page and just display results?
Note: I have to use python for this. This is requirement for my project.
It looks like you're looking for something like a CGI script in python. Python has some support for this in the standard library.
There are a lot of tutorials that explain that in detail how to do that exactly.
You could also use mod_python, which is an extension for the Apache web server to run and parse python scripts.

AngularJs:loading angular page from normal Javascript

I have a situation here. I have used angularJS for my application and also using $resource for service call. Now i want to implement a new functionality in this. In this i need to show a checkbox for which i have a code in index.html and i need to load the services conditionally. but i am not specifying ng-app in this. I want my application to behave as angular from the second page which i am redirecting from index. Is it possible to do? If yes can anyone help me please?
Here is the sample code which i have tried but am stuck:
Index.html
<body>
<div>
<table style="margin-left:40%">
<td style="width:62%">
<label id="sampleEnv" style="margin-top:10%">First Login</label>
</td>
<td>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</td>
</tr>
</table>
<input type="button" value="submit" onclick="checkVal()">
</div>
<script>
function onclick(){
alert(document.getElementById("myonoffswitch").checked);
location.href="views/login.html";
}
</script>
</body>
Login.html
<html ng-app="sampleApp">
<head>
</head>
<body ng-controller="sampleController">
<form name="sampleForm" ng-submit="authenticate()" novalidate>
<div>
<table align="center">
<tr>
<td>ID</td>
<td> <input name="sampleId" type="text" maxlength="9" ng-model="sampleIdModel" integer/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" ng-model="password" passwordmin /></td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
App.js
var app = angular.module("sampleApp", ["sampleService"]);
After clicking on the submit button on index page, login page comes but fully distorted. After debugging in chrome, i found that login.html doesn't have any support from any other controller or js which was loaded in index.html .
Any help will be very useful.
Thanks in advance.

Categories