We Keep Coding

Post Data from MCV is not calling JS function

Hi i want to post just a simple string to a controller action in asp.net mvc5.
Im trying to do this for hours and cant find a solution on how it works.
I have tried many different solutions without one of them working in how I want.
For hours...
I have a simple view:
#{
ViewBag.Title = "Rollen und Rechte";
}
<form>
<table cellpadding="5">
<tr>
<td>Rollenname:</td>
<td><input type="text" name="Name" id="roleNameVal" />Rollenname</td>
</tr>
</table>
<br />
<label id="resultLabel"></label>
<input type="submit" value="Submit" id="btn_click" />
<div id="mydiv"></div>
</form>
#section scripts {
<script type="text/javascript">
$('#btn_click').click(function ()
{
alert("jas");
var val1 = $('#roleNameVal').val();
$.ajax({
type: "post",
url: "/Create/Role",
data: { "val1": val1 },
success: function (data) {
alert(data);
}
})
}
</script>
}
The thing is that the function is never called.
What is wrong here?
And... in the next step I want to update div id mydiv
How can I change that without return a complete view in the controller and force a reload?
Thanks in advance :)

You are missing a closing parenthesis right before your closing </script> tag:
<script type="text/javascript">
$('#btn_click').click(function ()
{
alert("jas");
var val1 = $('#roleNameVal').val();
$.ajax({
type: "post",
url: "/Create/Role",
data: { "val1": val1 },
success: function (data) {
alert(data);
}
})
}**)**
</script>

instead of using button click event use the following
$(document).on("submit", "form", function (event) {
alert("jas");
var val1 = $('#roleNameVal').val();
$.ajax({
type: "post",
url: "/Create/Role",
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function (data) {
alert(data);
},
error: function (xhr, desc, err) {
}
})
}

you can use ajax.BeginForm of mvc
like this :
#using (Ajax.BeginForm("YourActionName", "YourControllerName", new AjaxOptions {
InsertionMode = InsertionMode.Replace, //target element(#mydiv) will be replaced
UpdateTargetId = "mydiv"
}))
{
<table cellpadding="5">
<tr>
<td>Rollenname:</td>
<td><input type="text" name="Name" id="roleNameVal" />Rollenname</td>
</tr>
</table>
<br />
<label id="resultLabel"></label>
<input type="submit" value="Submit" id="btn_click" />
}
<div id="mydiv"></div>
and in yourController :
public PartialViewResult YourActionName(string name)
{
return PartialView("_YourPartialView");
}
_YourPartialView is a partial View that you want to return replace it with "mydiv" And how to make it with VIEW is the same
if your partial view has a model you should do this :
return PartialView("_YourPartialView",yourModel);

AJAX call display response from php script in html

I have a html file where users can input a value.
I wrote a script in PHP that checks if this value is present in the databse. If it's present it returns
{"active":true}
Now my goals is that when the user inputs their value and submit they will be redirected to a certain page if this active is true. If it's false they should see an error message.
So here's what I've tried with my AJAX call:
$("document").ready(function(){
$(".checkform").submit(function(e){
e.preventDefault();
$.ajax({
type: "GET",
dataType: "json",
url: "api/check.php",
data: data,
success: function(data) {
if(data.active=="true"){
alert("success");
location.href="where_you_want";
}else{
alert("failure");
}
}
});
return false;
});
});
Here is my HTML:
<form action="api/check.php" id="requestacallform" method="GET" name="requestacallform" class="formcheck">
<div class="form-group">
<div class="input-group">
<input id="#" type="text" class="form-control" placeholder="Jouw subdomein" name="name"/>
</div>
</div>
<input type="submit" value="Aanmelden" class="btn btn-blue" />
</form>
For some reason I get an error:
Uncaught ReferenceError: data is not defined
I am new to AJAX and I am not sure if what I am trying is correct.
Any help would be greatly appreciated!
Thanks in advance.

Can you try:
$(".aanmeldenmodal").submit(function(e){
e.preventDefault();

I am updating my answer in whole
<html>
<body>
<form action="api/check.php" id="requestacallform" method="GET" name="requestacallform" class="formcheck">
<div class="form-group">
<div class="input-group">
<input id="txt1" type="text" class="form-control" placeholder="Jouw subdomein" name="name"/>
</div>
</div>
<input type="submit" value="Aanmelden" class="btn btn-blue checkform" />
</form>
</body>
</html>
jQuery part is like
$("document").ready(function () {
$("body").on("click", ".checkform", function (e) {
e.preventDefault();
var request = $("#txt1").value;
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {request: 'request'},
dataType: 'json',
success: function (data) {
if(data.active==true){
alert("success");
}else{
alert("failure");
}
}
});
});
});
ajax.php should be like this
if(isset($_GET['request'])){
//check for the text
echo json_encode($arr);
}

In api/check.php
You can pass data in json format
$json = json_encode($data);
retrun $json;
You can also not share any data so You can remove data from jQuery.
data:data
Your Jquery look like this:
$("document").ready(function(){
$(".checkform").submit(function(e){
e.preventDefault();
$.ajax({
type: "GET",
dataType: "json",
url: "api/check.php",
success: function(data) {
if(data.active=="true"){
alert("success");
location.href="where_you_want";
}else{
alert("failure");
}
}
});
return false;
});
});

Login Process with jQuery Ajax and PHP

Hey guys I need some help.
My problem is the error div is not displaying the content that I want it to appear in the success function of my AJAX request. I tried alerting the response and it returns true if user-name and password is correct and returns false if incorrect.
I don't know why its not working.
so this is my code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" name="main-div">
<div id="error">
AA
</div>
<center>
<div name="login-div">
<h2>LOGIN PAGE</h2>
<form method="post" class="login_form">
Username: <input type="text" name="username"></br></br>
Password: <input type="password" name="password"></br></br>
<button type="submit" name="button_login" id="button_login">LOGIN</button>
</form>
</div>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
$("#button_login").click(function(){
var data = $(".login_form").serialize();
$.ajax({
type: 'POST',
url: 'login_process.php',
data: data,
beforeSend: function(){
alert(data);
},
success : function(response){
//alert(response);
if(response=="true"){
$("#error").html("CORRECT USERNAME AND PASSWORD")
//window.location="home.php";
}else{
$("#error").html('<a>WRONG</a>');
});
}
}
});
});
});
</script>
</body>
</html>
Thanks in advance

There is an extra closing bracket in the script what you wrote. Try to open the page in the chrome and open the developers console to see the syntax error.
Login.html:44 Uncaught SyntaxError: Unexpected token )
I corrected the syntax as below
$(document).ready(function(){
$("#button_login").click(function(e){
e.preventDefault();
var data = $(".login_form").serialize();
$.ajax({
type: 'POST',
url: 'login_process.php',
data: data,
beforeSend: function(){
alert(data);
},
success : function(response){
//alert(response);
if(response=="true"){
$("#error").html("CORRECT USERNAME AND PASSWORD")
//window.location="home.php";
}else{
$("#error").html('<a>WRONG</a>');
}
},
error : function(response) {
$("#error").html('error'+ error);
}
});
});
});

Calling JSon file with ajax(Uncaught ReferenceError: request is not defined)

Brand new to using JSon/ajax. Trying to replicate this jQuery UI Autocomplete using a static json file as source just as an example. I'm not positive I'm referencing this correctly if someone could let know whats wrong. Getting a (Uncaught ReferenceError: request is not defined)
<form id="searchform" method="get" role="search">
<input id="searchfield" />
<input type="submit" name="go" value="go!" />
</form>
<script src='js/jquery-1.11.0.min.js'></script>
<script src="js/autocomplete/jquery-ui-1.10.3.custom.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$.ajax({
url: "json/Providers.json",
dataType: "json",
data: {term: request.term},
success: function(data) {
var cat_data = $.map(data, function(item) {
return {
ProviderID: item.ProviderID,
Name: item.Name,
};
});
$("#searchfield").catcomplete({
delay: 0,
source: cat_data,
minlength:0
});
}
});
});
</script>
json format
{"Providers":[{"ProviderID":"3","NAME":"name1"},
{"ProviderID":"4","NAME":"name2"},
{"ProviderID":"5","NAME":"name3"}]}

This particular data: {term: request.term}, is the problem
You need to define any javascript variable before accessing them.
var request;
In your case data is not required. Just remove data: {term: request.term} since you are loading the static .json file

Since you're a reading json file, it is clear there is no need to pass any parameter. So remove data: {term: request.term}

jquery ajax in codeigniter returns nothing

this is my function in controller
function show_data()
{
return " this is me ";
}
this is my view:
<html>
<head>
<title>ajax call first time</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello");
$.ajax({
type:'POST',
dataType: "text",
url:'elements/show_data',
success:function(res){
console.log(res);
$('#response').html(res);
},
fail:function()
{
$('#response').html("done");
}
});
});
</script>
</head>
<body>
<div class="response" id="response" ></div>
<div class="container" id="container" ></div>
</body>
</html>
the console says empty string returned why?

This is how I use $.ajax
$.ajax({
type: 'POST',
dataType: 'text',
url: 'the/url',
data: {data1: "value", data2: "value"}
}).done(function(res) {
console.log(res);
});
You may want to check your url elements/show_data with browser (use GET) to make sure that your controller works.