How to fix you need to enable javascript to run this app in react app? - node.js

I am getting error you need to enable javascript to run this app. when I run using nom start.
I have tried to change browser settings. but didn't work please see screenshots that I have attached.
class AuthPage extends Component {
render() {
return (
<form className="auth-form">
<div className="form-control">
<label htmlFor="email">E-Main</label>
<input type="email" id="email" />
</div>
<div className="form-control">
<label htmlFor="password">Password</label>
<input type="password" id="password" />
</div>
<div className="form-actions">
<button type="button">Switch To SIGN UP</button>
<button type="submit">Submit</button>
</div>
</form>
);
}
}

Related

Angular 13 - Data is accessible inside component, but does not show on the html page

So, I am learning Angular right now, and tried doing a CRUD Application. Almost everything works, except when trying to get data using ID, I can access all the data in the component.ts file, but the same is not rendered into html file. Here is what I have tried :-
edit-to.component.ts
export class EditTodoComponent implements OnInit {
private tid: number = 0;
public Todo:TodoModel= null ;
public desc:string='';
public title:string='';
public id:number;
constructor(private route: ActivatedRoute, private http:HttpClient) { }
ngOnInit(): void {
this.route.paramMap.subscribe(all_params =>{
this.tid = parseInt(all_params.get('id'))
//console.log( all_params.get('id'))
//console.log( this.tid );
});
this.getTodoFromId(this.tid)
}
getTodoFromId(id){
//console.log("id="+id)
this.http.get<{data: any}>('http://localhost:3000/api/todos/get_todo_from_id/'+id).subscribe((data) =>{
console.log("response in angular= \n");
this.Todo = data[0]
console.log(this.Todo.todo_title) //-> This one works
}
editOnSubmit(form:NgForm){
//something here
}
edit-todo.component.html
<div class="col-md-12">
<form (ngSubmit)="editOnSubmit(todoForm)" #todoForm="ngForm">
<input type="text" class="form-control" id="todo_id" [(ngModel)]="id" name="todo_id" value="1">
<div class="mb-3">
<label for="todo_title" class="form-label">Title</label>
<input type="text" class="form-control" id="todo_title" [(ngModel)]="title" name="title" value="{{ Todo.todo_title}}"> //-> This one does not work.
</div>
<div class="mb-3">
<label for="label" class="form-label">Description</label>
<textarea class="form-control" id="todo_description" [(ngModel)]="desc" name="desc" ></textarea>
</div>
<button type="submit" class="btn btn-success">Edit To Do</button>
</form>
</div>
</div>
Separating out,
from edit-to.component.ts :-
console.log(this.Todo.todo_title) works
but from edit-todo.component.html
<input type="text" class="form-control" id="todo_title" [(ngModel)]="title" name="title" value="{{ Todo.todo_title}}"> does not work
it's because you have a ngModel and a value configured on same input field
in this situation the ngModel have priority on value attribute
to fix it you can initialize title in ngOnInit
this.title = this.Todo.todo_title;
in your case you wait reply from http request so the initialization after hte http reply :
getTodoFromId(id){
this.http.get<{data: any}>('http://localhost:3000/api/todos/get_todo_from_id/'+id).subscribe((data) =>{
console.log("response in angular= \n");
this.Todo = data[0]
this.title = this.Todo.todo_title;
console.log(this.Todo.todo_title);
}
Define a property of type BehaviorSubject.
isAvailableData = new BehaviorSubject<boolean>(true);
Then where you subscribe the data set it to true.
getTodoFromId(id){
//console.log("id="+id)
this.http.get<{data: any}>('http://localhost:3000/api/todos/get_todo_from_id/'+id).subscribe((data) =>{
console.log("response in angular= \n");
this.Todo = data[0];
this.isAvailableData.next(true);
console.log(this.Todo.todo_title) //-> This one works
}
after that in your HTML add ngIf to col-md-12 div:
<div class="col-md-12" *ngIf="(isAvailableData | async)">
<form (ngSubmit)="editOnSubmit(todoForm)" #todoForm="ngForm">
<input type="text" class="form-control" id="todo_id" [(ngModel)]="id" name="todo_id" value="1">
<div class="mb-3">
<label for="todo_title" class="form-label">Title</label>
<input type="text" class="form-control" id="todo_title" [(ngModel)]="title" name="title" value="{{ Todo.todo_title}}"> //-> This one does not work.
</div>
<div class="mb-3">
<label for="label" class="form-label">Description</label>
<textarea class="form-control" id="todo_description" [(ngModel)]="desc" name="desc" ></textarea>
</div>
<button type="submit" class="btn btn-success">Edit To Do</button>
</form>
Also you made a mistake in your form the input should be like below:
And there is no need to define a property for id, title, ...
These are the properties of todo object
<label for="todo_title" class="form-label">Title</label>
<input type="text" class="form-control" id="todo_title" [(ngModel)]="Todo.todo_title" name="todo_title" #todo_title="ngModel">

Searching option and value in the URL LARAVEL 5.2

Hello I need to put searching option and value in the URL. I know it's very basic but I have never implement the search function before ever always used the templates one but this time I need to use it. below is my code please help me.
Right now I am getting this in the link
list/%7Boption%7D/%7Bvalue%7D
but I want this in the link list/Hello/thisishelloworld or this may be list/option?Hello/value?thisishelloworld but I think I can get the second option using Get instead of Post method
AND YA ITS IN LARAVEL 5.2
<center>
<div class="form-group">
<label>Select your option from below</label>
<select class="form-control" id="options" name="options" style="width:100%" type="checkbox">
<option>Hello</option>
<option>World</option>
<option>it's Me</option>
</select>
</div>
<div class="col-md-4" id="value">
<div class="panel panel-warning">
<div class="panel-heading">
Enter your Search below
</div>
<form role="form" action="/list/{option}/{value}" method="post">
{{ csrf_field() }}
<div class="form-group has-success">
<input class="form-control" placeholder="Search" type="text" name="{{ value }}" id="value">
<input type="submit" class="btn btn-primary" name="submit" value="Search">
</div>
</form>
</div>
</div>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function hide() {
$("#value").hide();
$("#h").hide();
$("#search").hide();
}
function show() {
$("#value").show();
$("#h").show();
$("#search").show();
}
function initHandlers() {
$("#options").change(function() {
show();
});
}
hide();
initHandlers();
</script>
Laravel 5. 2
Step 1:
First you have to create a route.
Routes.php :
Route::get('/list', function(){
// do process
})->name('search');
HTML :
something.blade.php :
{!! Form::open('search', ['route' => 'search', 'method' => 'GET']) !!}
<div class="form-group has-success">
<input class="form-control" placeholder="Search" type="text" name="search" id="value">
<input type="submit" class="btn btn-primary" name="submit" value="Search">
</div>
</form>

Sending search form submit to a particular controller method

Windows 8
Rails 4.1
Ruby 2.0
I have the following search form in my menu:
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" method="get" name="search-form" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
When I submit, I would like to call a particular method in the agents controller. I tried:
<input type="text" method="get" name="search-form" action="agents_search_view" class="form-control" placeholder="Search">
but it did not work. I also tried:
<button type="submit" action="agents_search_view" class="btn btn-default">Submit</button>
but it did not work either. Any ideas?
You should be adding action in the form tag,not in the input and not in the submit button.
This should work
<form class="navbar-form navbar-left" role="search" action="agents_search_view">
<div class="form-group">
<input type="text" method="get" name="search-form" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

Modx formit working in one site - not working in another

I have a form and formit call that works in one site and not another, which is a direct copy of the first [migrating to a new design] The sites are identical right now, files & database were just copied. All the plugins were checked and even reinstalled.
What I have is:
<!-- contact page -->
[[!FormIt?
&placeholderPrefix=`contact.`
&hooks=`spam,email,redirect,FormItAutoResponder`
&emailTo=`[[GetSystemSetting? &setting=`emailContactMailTo`]]`
&emailSubject=`domain.com Contact form has been submitted. [[+contact.subject]]`
&emailTpl=`ContactCustomEmailTpl`
&redirectTo=`346`
&emailReplyTo=`no-reply#domain.com`
&submitVar=`contactSubmit`
&validate=`name:required,email:email:required,subject:required,text:required:stripTags`
&fiarSubject=`Your contact request to domain.com`
&fiarTpl=`ContactCustomEmailTpl`
&fiarReplyTo=`no-reply#domain.com`
]]
<form class="form" action="[[~[[*id]]]]" method="post" role="form">
<input type="hidden" name="nospam:blank" value="" />
<div class="row">
[[!+contact.error_message:notempty=`<div class="col-sm-12"><div class="alert alert-danger">[[!+contact.error_message]]</div></div>`]]
<div class="col-sm-4[[+contact.error.name:notempty=` has-error`]]">
<div class="form-group">
<label for="name"> Name: *</label>
<input id="name" type="text" name="name" value="[[!+contact.name]]" class="form-control" />
</div>
</div>
<div class="col-sm-4[[+contact.error.email:notempty=` has-error`]]">
<div class="form-group">
<label for="email"> Email: *</label>
<input id="email" type="text" name="email" value="[[!+contact.email]]" class="form-control" />
</div>
</div>
<div class="col-sm-4[[+contact.error.subject:notempty=` has-error`]]">
<div class="form-group">
<label for="subject"> Subject: *</label>
<input id="subject" type="text" name="subject" value="[[!+contact.subject]]" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12[[+contact.error.text:notempty=` has-error`]]">
<div class="form-group">
<label for="text"> Message: *</label>
<textarea id="text" name="text" rows="7" class="form-control">[[!+contact.text]]</textarea>
</div>
</div>
<div class="col-sm-6 col-sm-offset-3">
<div class="form-group">
<label> </label>
<input class="btn btn-primary btn-block" type="submit" name="contactSubmit" value="Send Contact Inquiry" onClick="_gaq.push(['_trackEvent', 'ContactPage', 'Contact Submitted']);" />
</div>
</div>
</div>
</form>
</div>
The form will work if I remove the 'FormItAutoResponder' from the &hooks AND all items from the &validate parameters.
What is wrong with this form?
no usefull errors in modx or server logs
reinstalled formit
isolated it in a test page with no other markup
the emailTpl is present and mail gets sent if the 2 parameters are removed from the formit call
Perhaps the GetSystemSetting snippet is missing? Why not just use [[++emailContactMailTo]] instead?
Are the MODX and FormIt versions the same on both sites?
Try calling this debug snippet somewhere below the FormIt call. Look for unshown errors (starting with contact.error.) or any other unexpected placeholders.

HTTP Error 405.0 - Method Not Allowed The page you are looking for cannot be displayed because an invalid method (HTTP verb) is being used

i am stuck with a problem. when i hosted my site having two part, UI and Server, when i am trying to login to the system the following error is occurred. read lot of posts regarding this error and i cannot make it possible. please help me to catch the exact problem
<div class="logo-container"><h3>DMS<span>Beta</span></h3>
</div>
<div style="width:55%; float:left;">
<h2>Sign In</h2>
<div class="divAlertError" id="divLoginAlert" style="display:none;">
The username or password is incorrect
</div>
<form method="POST" accept-charset="UTF-8" class="form-signin">
<input type="text" id="username" class="input-block-level" name="username" placeholder="Username">
<input type="password" id="password" class="input-block-level" name="password" placeholder="Password">
<label class="checkbox" style="padding-left:0px;">
Forgot Password
</label>
<div class="btn-group">
<button class="btn btn-mini">Action</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>--select--</li>
<li>English -US</li>
<li>English -EN</li>
</ul>
</div>
<button type="submit" name="submit" class="btn btn-primary pull-right" id="btnSignIn">Sign in</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div>
<p> <center>© EMR 2013.All rights reserved</center></p>
</div>
</div>
<!-- Login Div ends-->
this is the code i am using and the error i that am getting is
HTTP Error 405.0 - Method Not Allowed
The page you are looking for cannot be displayed because an invalid method (HTTP verb) is being used.
please help me. i got this error after updating my ui design, before that all pages are working fine..
Regadrs,
Sivajith S.
It looks like your form is missing the action attribute.

Resources