I'm reading a tutorial and I'm having some problems with the examples... I tried to run the examples but i dont have results:
app.html
<!DOCTYPE HTML>
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/
jquery.min.js"></script>
<script>
function readSinglePost (url,target_div) {
var URL = url
jQuery.ajax({
url: URL,
dataType: 'json',
success: function(data) {
jQuery(target_div).html(data.post.content);
}
});
}
jQuery(document).ready(function() {
jQuery("#title").html("<h1>Hello World</h1>");
var url = "http://www.recorramisiones.com.ar/api/get_post/? json=get_post&dev=1&p=934";
var target_div = "#contents";
readSinglePost(url, target_div);
});
</script>
</header>
<body>
<div id="main">
<div id="title"></div>
</div>
</body>
</html>
if you try to test this url: http://www.recorramisiones.com.ar/api/get_post/? json=get_post&dev=1&p=934
works fine. But when i test app.html just appear "Hello World" and nothing more. Any idea?
Try add contents id like this to the html:
<div id="contents"></div>
</div>
Related
I trying to print the data which was entered by the user, and transfer that through ajax and trying to print or echo it with the help of php code, but I could not do that. enter code here
this is my code:
<html>
<head>
<title>
test ajax
</title>
<script src="jquery.js"></script>
</head>
<body>
<h2>test button</h2><br>
<form>
<input type="text" id="a"><br>
<input type="button" id="b" value="display">
</form>
<script>
$(document).ready(function() {
$('#b').click(function() {
let a = $('#a').val();
alert(a);
$.ajax({
type: "POST",
url: "same_file.php",
data: {
c: a
},
success: function() {}
});
});
});
</script>
</body>
</html>
<?php
extract($_POST);
if(isset($_POST["c"])) {
echo $_POST["c"];
}
?>
I think that, I have the problem with the php code. please give me any solution.
Try it like this
This is your Html
<html>
<head>
<title>
test ajax
</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h2>test button</h2><br>
<form>
<input type = "text" id = "a" > <br>
<input type = "button" id = "b" value = "display" >
</form>
</body>
</html>
<script>
$(document).ready(function(){
$('#b').click(function() {
let a = $('#a').val();
//alert(a);
$.ajax({
type: "POST",
url: "same_file.php",
data: {c: a},
success: function(response) {
alert(response);
}
});
});
});
</script>
This is your same_file.php
<?php
//extract($_POST); code works even without this
if(isset($_POST["c"])) {
echo $_POST['c'];
}
?>
Not sure if your jquery library call is ok so I called the one on the web instead. Also your success:function() was not doing anything which is why you didn't receive anything.
Also always format your code with some indention so that it can be easier to read and comprehend by others.
You probably want to echo before the body is rendered.
But in true, unless you need to process the data the user sends, you don't need PHP at all.
And in truth, you probably don't need jQuery as well, fetch() works just fine.
$(document).ready(function() {
$('#b').click(function() {
let a = $('#a').val();
alert(a);
$.ajax({
type: "POST",
url: "same_file.php",
data: {
c: a
},
success: function() {}
});
});
});
<?php
if (isset($_POST["c"]))
{
// print/echo user data send from form.
echo $_POST["c"];
// stop the script from rendering the html below.
exit();
}
?>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>test button</h2><br>
<form>
<input type="text" id="a"><br>
<input type="button" id="b" value="display">
</form>
<!-- add script element with js code here -->
</body>
</html>
Thanks for you all.
I am new in coding MVC, and I am trying to code a page that will create and as parent and child loop, using data from JSON (MenuHandler.ashx), the JSON data is tested and it's ok, but the Ajax was not working.
for your kind note: the Alert working before and after Ajax
this is my VIEW page:
<script type="text/javascript">
$(document).ready(function () {
$("#testaj1").click(function () {
alert ("test22")
$.ajax({
url: 'MenuHandler.ashx',
method: 'get',
dataType: 'json',
success: function (data) {
buildMenu($('#menu'), data)
$('#menu').menu();
}
});
alert("test33")
});
function buildMenu(parent, items) {
$.each(items, function () {
var li = $('<li>' + this.Name + '</li>');
li.appendTo(parent);
if (this.List && this.List.length > 0) {
var ul = $('<ul></ul>');
ul.appendTo(li);
buildMenu(ul, this.List);
}
})
}
})
</script>
<link href="~/Content/MyCSS/MyCSS.css" rel="stylesheet" />
#model IEnumerable<pedigree.Models.pedigree1>
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="~/Scripts/jquery-3.5.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<title>Index</title>
</head>
<body>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<form>
<button id="testaj1" type="button" >test</button>
<div class="tree">
<ul id="menu">
</ul>
</div>
</form>
Thanks for everyone as Alejandro Coronado said, the issue was in the handler.ashx file, I don’t now why wasn’t worked, but when I use instead json result action
The Ajax worked and the results came according to my expectations
Thanks everyone
The most common reason is the controller that you are pointing, maybe the controler uri is not correct, also be sure that your controller is returning a JSON.
I am using ajax for fetching records using following code.
<html>
<head>
<script>
$(function() {
$('.go-btn').on('click', function() {
var selected = $('#my-dropdown option:selected');
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "boxplot.html",
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
//alert(response);
}
});
//alert(selected.val());
});
});
</script>
</head>
<body>
some text
<button class="go-btn" type="submit">Go</button>
<div id="responsecontainer">
<br><hr><br>
<h2>PCA Plot Distribution:</h2><br>
</body>
</html>
In the above code, content page gets loaded on clicking button (at ) but anything after this gets disappeared. How can i fix this issue?
Because you are setting your response to whole div. Fix your html such that
<div id="responsecontainer"></div>
<div>
<br><hr><br>
<h2>PCA Plot Distribution:</h2><br>
</div>
So you are settings your response to responsecontainer and rest remains same.
You haven't closed your div in the HTML in the bottom
You just have to close that #responsecontainer div.
var response = "my Response";
$("#goButton").on("click", function(){
$("#responsecontainer").html(response);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
some text
<button class="go-btn" type="submit" id="goButton">Go</button>
<div id="responsecontainer"></div>
<br><hr><br>
<h2>PCA Plot Distribution:</h2><br>
</body>
</html>
I have a textarea that i am generating it with ajax, but after textarea is loaded then that textarea is not converting to WYSIWYG Editor, but it is working on normal textarea, Please help to solve my issue.
<!DOCTYPE html>
<html>
<head>
........
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "dashboard/show_data",
cache: false,
dataType: "json",
success: function(data){
$('#demo').html(data);
........
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
</head>
<body>
<textarea>Easy! You should check out MoxieManager!</textarea>
<section id="demo">
</section>
</body>
</html>
show_data.php
<textarea></textarea>
You should run nicEditors.allTextAreas again after inserting new textarea.
i want to replace result from readmore.php into <div id='box'> base on id_pages at index.php after click <a class=readmore> Read More </a>.
i tired to try how to get value from readmore.php using ajax.
this's my code
index.php
<html>
<head>
<link rel='stylesheet' type='text/css' href='style.css'>
<title> Home Page </title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$('.readmore').click(function(){
$.ajax({
type: "POST",
url: "readmore.php",
data: dataString,
success: function(returnedData) {
$( '#daleman' ).html(returnedData);
}
});
})
</script>
</head>
<body>
<?php
error_reporting(E_ERROR | E_PARSE);
include "koneks.php";
$db = new database;
$db->connectMYSQL();
//* Memulai Tampilan Menu
echo"
<div id='menu'>
<a href='manage.php'>Manage Blog</a>
</div>
";
//* Memulai Tampilan Page
$arraypage = $db->tampilPage();
foreach($arraypage as $data) {
echo"
<input type=hidden id=idnya name='idnya' value=".$data['id_pages'].">
<div id='boxpage'>
<div id='alasatas'>
</div>
<div id='alasjudul'>
".$data['judul']."
</div>
<div>
<div id='alasfoto'>
<img height='200px' src='pict/".$data['foto']."'>
</div>
<div id='alasisi'>
<div id='daleman'>
<br>
".$data['deskripsi']."
</div>
</div>
</div>
<div id='alasketerangan'>
<center>Tanggal dibuat : ".$data['tgl_dibuat']." Label : ".$data['label']." <a class='readmore' >Read More</a> </center>
</div>
</div>
</body>
</html>
";
}
?>
this my readmore.php
<?php
include "koneks.php";
$dbi = new database;
$dbi->connectMYSQL();
echo"
$_POST[idnya]
";
?>
i need help meybe to fix my code, my thanks
There are certain things missing in the code you've posted. Lets just simplify the code a little bit with some modifications.
index.php
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <!-- Added jQuery Reference -->
</head>
<body> <!-- Added body tag -->
<?php
echo "<input type='hidden' id='idnya' value='value_posted_for_idnya'><div id='box'> Replace Me </div> <a class='readmore' href='javascript:void(0)'>ReadMore</a>";
?>
<script>
$(document).ready(function(){ // Wrapped the script in $(document).ready function
$('.readmore').click(function(){
$.ajax({
type: "POST",
url: "readmore.php",
data: "idnya=" + $("#idnya").val(), //say you have only one field to post for now
success: function(returnedData) {
$('#box').html(returnedData);
}
});
})});
</script>
</body>
</html>
readmore.php
Can stay the same.
Try the code above and see what you get.
EDIT
If you have multiple fields to post with ajax function you can use serializeArray() method.
Simply wrap your fields with in a form tag as follows
<form id="frm">
...form controls
</form>
This time you have to specify name attributes in order for serializeArray() to work.
Then your new ajax function becomes
$(document).ready(function(){
$('.readmore').click(function(){
$.ajax({
type: "POST",
url: "readmore.php",
data: $("#frm").serializeArray(), //get all name-value pairs within form
success: function(returnedData) {
$('#box').html(returnedData);
}
});
})});
</script>
its possible that click function is not executing beacause you dont prevent default anchor action
<script>
$('.readmore').click(function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: "readmore.php",
data: dataString,
success: function(returnedData) {
$('#box').html(returnedData);
}
});
})
</script>
I have modified your code a little try doing this:
<script>
$('.readmore').click(function(){
var idnya = $('#idnya').val();
$.ajax({
type: "POST",
url: "readmore.php?idnya="+idnya,
data: dataString,
success: function(returnedData) {
$('#box').html(returnedData);
}
});
})
</script>
and in your readmore.php file use $_GET['idnya'] to get this value and use it in your query.