I wrote this code in javascript to disply information in this page (Normal_Info.php),
but unfortunately it did not work. If anyone can help me I will be grateful
<html>
<head>
<script language="javascript">
function ajaxFunction()
{
return window.XMLHttpRequest ?
new window.XMLHttpRequest :
new ActiveXObject("Microsoft.XMLHTTP");
}
function Go_there()
{
var httpObj = ajaxFunction();
httpObj.open("GET","Normal_Info.php", true);
httpObj.send();
httpObj.onreadystatechange = ChangedState()
{
if (httpObj.readyState == 4 && httpObj.status == 200)
{
document.getElementById("result").innerHTML=httpObj.responseText;
}
}
}
</script>
</head>
<body>
<form id=ff>
<input type=button value=Hi OnClick=Go_there() />
</form>
<div id=result>
</div>
</body>
</html>
i suggest using jquery http://jquery.com/
<script src="jquery.js"></script>
<script language="javascript">
$('#ff').submit(function() {
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('#result').html(data);
// alert('Load was performed.');
}
});
});
</script>
no need to click event
Related
I developed a simple ajax code.According to this image when click+ qty increase and when click - qty decrease
Code in online _help.blade.php
<head>
<title>Ajax Example</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
$(document).ready(function(){
$('.cart_quantity_up, .cart_quantity_down').on('click', function(e) {
e.preventDefault();
var increment = $(this).data('increase');
var itemId = $('.cart_quantity_input').val();
$.ajax({
type:'post',
url:'getmsg',
dataType:'json',
data:{
'item_id': itemId,
'increase': increment
},
success:function(data){
$("cart_quantity_input").val(data.qty);
} });
});
});
</script>
</head>
<body>
<div class="cart_quantity_button">
<a class="cart_quantity_up" href="javascript:void(0)" data-increase="1" > + </a>
<input class="cart_quantity_input" type="text" name="quantity" value="{{1}}" autocomplete="off" size="2">
<a class="cart_quantity_down" href="javascript:void(0)" data-increase="0" > - </a>
</div>
</body>
<footer>
<script type="text/javascript">
var csrf_token = $('meta[name="csrf-token"]').attr('content');
$.ajaxSetup({
headers: {"X-CSRF-TOKEN": csrf_token}
});
</script>
</script>
</footer>
Code in controller function
public function ajaxl(Request $request)
{
if ($request->ajax()) {
$id = $request->item_id;
if ($request->increase) {
//$cart->increment('qty');
$qty = 2;
} else {
//$cart->decrement('qty');
$qty = 0;
}
//echo"hello ajaxlara:";
return response()->json(array('qty'=> $id), 200);
}
}
And this routes.php
Route::get('/ajax',function(){return view('online_help');});
Route::post('/getmsg','Hello#ajaxl');
When I click + or - the value doesn't change and no error.
Please any one help me
The problem is very small.
This line:
$("cart_quantity_input").val(data.qty);
just you forgot to add . before cart_quantity_input
So change it to be :
$(".cart_quantity_input").val(data.qty);
Here I wrote A code which fetches data from API http://fcctop100.herokuapp.com/api/fccusers/top/recent and displays on console for starter but I'm Getting Error Like "parsererror" "Error: jQuery21106393266040831804_1456914722748 was not called"
var App = React.createClass({
//setting up initial state
getInitialState:function(){
return{
data:[]
};
},
componentDidMount(){
this.getDataFromServer('http://fcctop100.herokuapp.com/api/fccusers/top/recent');
},
//showResult Method
showResult:function(response){
console.log(response);
this.setState({
data:response.results
});
},
//making ajax call to get data from server
getDataFromServer:function(URL){
$.ajax({
type:"GET",
dataType:"jsonp",
url:URL,
success: function(response) {
this.showResult(response);
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render:function(){
return(
<div>
<Result />
</div>
);
}
});
var Result = React.createClass({
render:function(){
return(
<div>
<ul>
<ResultItem/>
</ul>
</div>
);
}
});
var ResultItem = React.createClass({
render:function(){
return(
<div>
<li>Hello This Is From ResultItem Component</li>
</div>
);
}
});
ReactDOM.render(
<App />,
document.querySelector("#app")
);
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>React Tutorial</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div id="app"></div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>
Your API returns JSON, you don't need use JSONP, just change dataType from jsonp to json
$.ajax({
type: "GET",
dataType: "json",
....
});
and in showResult set only response because response contains Array of Objects and does not have results property
this.setState({
data: response
});
Example
I'm using magnificient popup on my website, and I would like to execute ajax function when a link is clicked and the result of the query should be the content od the popup.
this is my code (I'm pretty new in JQuery) :
<script>
function showPics(str)
{
if (str=="")
{
document.getElementById("displayPics").innerHTML="";
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("displayPics").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getpics.php?q="+str,true);
xmlhttp.send();
}
</script>
<a class="1-popup" href="#">Guerlain</a>
<script type="text/javascript">
$('a').click(function() {
showPics($(this).attr('class').charAt(0)), //Ajax function call
$(this).magnificPopup({ //Popup call
type:'inline',
midClick: true,
closeBtnInside:true
});
});
</script>
<div id="displayPics"><b>Pictures will be listed here.</b></div>
The content is loaded, but the popup not.
Here's the solution of my issue :
<a class="1-popup" href="#displayPics">Guerlain</a>
<script type="text/javascript">
$('a').click(function(){
showPics($(this).attr('class').charAt(0)) //Ajax function call
});
</script>
<script type="text/javascript">
$('a').magnificPopup({ //Popup call
type:'inline',
midClick: true,
closeBtnInside:true
});
</script>
<div id="displayPics" class="white-popup mfp-hide"><b>Pictures will be listed here.</b></div>
Thank you all.
I'm learning some basic JQuery that appends Ajax queried data from a text file into a div element. The program doesn't work when the AJAX code is added and when the function is called from the fadeOut effect. Else the fadeOut works fine.
Am I supposed to code the AJAX in another file and link it? What is wrong in this code? Sorry if the title of the question isn't precise.
HTML
<html>
<head>
<title>Help Me</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="test.js" type="text/javascript"></script>
</head>
<body>
<div align="center" id = "div1" >
<img src="pic1" width="200" height="200" alt="" id = "pic1" />
<img src="pic2" width="200" height="200" alt="" id = "pic2" />
<img src="pic3" width="200" height="200" alt="" id = "pic3" />
</div>
<div id = 'myDiv'></div>
</body>
</html>
SCRIPT
$(document).ready(function() {
$("#pic1").click(function() {
$("#div1").fadeOut("slow", myFunction());
$("#myDiv").fadeIn("slow");
});
$("#pic2").click(function() {
$("#div1").fadeOut("slow");
});
$("#pic3").click(function() {
$("#div1").fadeOut("slow");
});
});
var xmlhttp;
function loadXMLDoc(url, cfunc) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction() {
loadXMLDoc("testfile.txt", function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
You need to pass the reference of myFunction to the callback. Your current method is calling your function on page load instead. Try this:
$("#pic1").click(function() {
$("#div1").fadeOut("slow", getData); // note: no () brackets
});
function getData() {
$.get("testfile.txt", function(data) {
$("#myDiv").html(data).fadeIn("slow");
});
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ajax div example</title>
<script type="text/javascript" src="jscripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var dbn,machine_name;
function main_draw(d,m,r)
{
dbn = d;
machine_name = m;
draw_charts();
if ( r > 0 )
{
setRefreshid = setInterval("draw_pie()",r);
}
}
function draw_charts()
{
document.getElementById('ajdiv4').innerHTML = "";
document.getElementById('ajdiv3').innerHTML = "";
document.getElementById('ajdiv2').innerHTML = "";
document.getElementById('ajdiv1').innerHTML = "";
draw_pie();
draw_line();
draw_space();
draw_backup();
}
function draw_pie()
{
setTimeout(function() {
$.ajax( {
url: 'JSCharts/graph_pie1.html',
success: function(html)
{
$("#ajdiv4").html(html);
}
}); }, 100);
}
function draw_line()
{
setTimeout(function() {
$.ajax( {
url: 'JSCharts/graph_line1.html',
success: function(html)
{
$("#ajdiv3").html(html);
}
}); }, 200);
}
function draw_space()
{
setTimeout(function() {
$.ajax( {
url: 'JSCharts/space_graph.php',
success: function(html)
{
$("#ajdiv2").html(html);
}
}); }, 300);
}
function draw_backup()
{
setTimeout(function() {
$.ajax( {
url: 'JSCharts/backup_graph.php',
success: function(html)
{
$("#ajdiv1").html(html);
}
}); }, 400);
}
</script>
</head>
<body>
<div id="ajdiv1" style="float:left"></div>
<div id="ajdiv2" style="float:left"></div>
<div id="ajdiv3" style="float:left"></div>
<div id="ajdiv4" style="float:left"></div>
<button id="b1" onclick="main_draw('CQ1','va2apsap010',10000)">Display Content</button>
</body>
</html>
Above is an entire code which makes AJAX calls upon clicking on "Display Content" and after that it refreshes content of div "ajdiv4" by calling function "draw_pie". The only problem with this is that when it refreshes, it moves the pie graph all the way to the left. I would like it to stay and update it in the current position. Please help if any of you know what is going on here, Thanks.
Have you tried specifying the dimensions of your DIVs? With your current code, you could probably do:
<style>
#ajdiv1, #ajdiv2, #ajdiv3, #ajdiv4 {
height:200px;
width:200px;
}
</style>
Alternatively, add a class attribute to simplify things:
<style>
.chartContainer {
height:200px;
width:200px;
}
</style>
If you have a working version up, or can post something on JSfiddle, that would make things easier to troubleshoot.