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");
});
}
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);
I am trying to display the onchange value of a textbox using ajax. My code is as follows :
ajaxquery.php
<html>
<head>
<title>Changing textbox value based on dropdown list using Ajax and PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
//fuction to return the xml http object
function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getCurrencyCode(strURL)
{
var req = getXMLHTTP();
if (req)
{
//function to be called when state is changed
req.onreadystatechange = function()
{
//when state is completed i.e 4
if (req.readyState == 4)
{
// only if http status is "OK"
if (req.status == 200)
{
document.getElementById('cur_code').value=req.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
<body style="font: 12px Verdana, Arial, Helvetica, sans-serif;">
<form style="text-align:center" method="post" action="" name="form1">
<p>Country : <input type="text" name="country" onChange="getCurrencyCode('code.php?country='+this.value)">
</form>
</body>
</html>
code.php
<?php
$country=$_REQUEST['country'];
echo $country;
?>
The value is not displaying. Where am I going wrong?
P.s. I am completely new to ajax and have no knowledge about it. Appreciate any help :)
<p>Country : <input type="text" name="country" onblur="getCurrencyCode('code.php?country='+this.value)">
<p>Country Code : <input type="text" name="cur_code" id='cur_code' ">
Changed the onchange function to onblur and added another input type. It is working perfectly now!
With the older version of telerik, we had a snippet of code to find the number of childnodes as given below
function onUploadSelect(ev) {
var numberOfFiles;
if (ev.target.childNodes[1] != undefined && ev.target.childNodes[1] != null) {
numberOfFiles = ev.target.childNodes[1].childNodes.length;
}
if ((numberOfFiles + ev.files.length) > 4) {
//some custom validation error msgs being thrown
}
}
the basic logic of this code is to prevent uploading more than 4 files,
Ex - i select 2 files,dont click on upload instead select a file again and then click on upload, I'm good(2+1<4)
With the KEndo Uplaod, ev.target is undefined,
can you suggest a possible alternative for this?
Thanks
Adarsh
Please try with the below code snippet.
Kendo-HTML
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<div class="demo-section">
<input name="files" id="files" type="file" />
</div>
<script>
$(document).ready(function() {
$("#files").kendoUpload({
select: onSelect
});
});
function onSelect(e) {
if (e.files.length > 4) {
alert("Please select max 4 files.");
e.preventDefault();
}
else {
var existingfileCount = $(".demo-section li").length;
if((e.files.length + existingfileCount) > 4)
{
alert("You can not upload more than 4 files");
e.preventDefault();
}
}
}
</script>
</body>
</html>
Kendo-MVC
Javascript
<script>
function onSelect(e) {
if (e.files.length > 4) {
alert("Please select max 4 files.");
e.preventDefault();
}
else {
var existingfileCount = $(".demo-section li").length;
if((e.files.length + existingfileCount) > 4)
{
alert("You can not upload more than 4 files");
e.preventDefault();
}
}
}
</script>
View.cshtml
<div class="demo-section">
#(Html.Kendo().Upload()
.Name("files")
.Events(events => events.Select("onSelect"))
)
</div>
Note : I have used 'demo-section' class to simplyfy the code. If you want to rename this class then rename this class in html/cshtml and javascript.
Let me know if any concern.
Hi this is what you want ,
function onSelect(e) {
var ct = $('#Count').val();
if (e.files.length > 4) {
alert("Please select max 4 files.");
e.preventDefault();
}
else {
ct= parseInt(ct == "" ? 0 : ct);
$('#Count').val(ct + e.files.length);
}
}
#Html.Hidden("Count")
to restrict user to not upload more then 4 file. If i understand right.
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 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