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.
Related
View Code:
<script>
function getMessage(){
$.ajax({
type:'POST',
url:'/getmsg',
data:'_token = <?php echo csrf_token() ?>',
success:function(data){
$("#msg").html(data.msg);
}
});
}
</script>
<body>
<div id = 'msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
<input type="button" value="Replace Message" onclick='getMessage()'>
</body>
Here ,When I click on the button it should be replaced by the other text. But nothings appears on clicking.
Controller code:
public function index(){
$msg = "This is a simple message.";
return response()->json(array('msg'=> $msg), 200);
}
In pure js that code work fine
function getMessage(){
alert('Its working!');
}
<body>
<div id = 'msg'>This message will be replaced using Ajax.
Click the button to replace the message.</div>
<input type="button" value="Replace Message" onclick='getMessage()'>
</body>
Looks OK.
Put a breakpoint in your success and see what data is.
Or do a console.log
Mick
in your ajax code you didn't define dataType, add dataType:"json", to retrive the json data, change your ajax code as
function getMessage(){
$.ajax({
type:'POST',
url:'/getmsg',
dataType:'json',
data:{
_token = '<?php echo csrf_token() ?>'
},
success:function(data){
$("#msg").html(data.msg);
}
});
Update your code with below mentioned code, and let's try.. i will working for me..
<script type="text/javascript" charset="utf-8">
$(document).on('click', '#btnSelector', function(event) {
event.preventDefault();
/* Act on the event */
getMessage();
});
var getMessage = function(){
$.ajax({
type:'POST',
url:'/getmsg', //Make sure your URL is correct
dataType: 'json', //Make sure your returning data type dffine as json
data:'_token = <?php echo csrf_token() ?>',
success:function(data){
console.log(data); //Please share cosnole data
if(data.msg) //Check the data.msg isset?
{
$("#msg").html(data.msg); //replace html by data.msg
}
}
});
}
</script>
<body>
<div id = 'msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
<input type="button" value="Replace Message" id='btnSelector'>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<body>
<div id='msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
<input type="button" id="ajax_call" value="Replace Message">
</body>
<script>
$(function () {
$('#ajax_call').on('click', function () {
$.ajax({
type:'POST',
url:'<?php echo url("/getms"); ?>',
data:'_token = <?php echo csrf_token() ?>',
success:function(data){
$("#msg").html(data.msg);
},
complete: function(){
alert('complete');
},
error: function(result) {
alert('error');
}
});
});
});
</script>
Jquery onclick function: jquery onclick function not defined
Also check: Function not calling within an onclick event
Hi all I am first time starting to learn ajax from website w3schools, and I follow the step by step I'm trying to get an AJAX example working but i'm unable to get it working. could you help me please ? thanks you.
And here is my code
ajax.php
<!DOCTYPE html>
<html>
<body>
<div id="demo"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
You can use ajax like this,
<script>
function loadDoc() {
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
//progress
xhr.upload.addEventListener("progress", function(e) {
//progress value e
load_progress(e);
}, false);
return xhr;
},
type: "GET",
url: "ajax_info.txt",
success: function(msg) {
//when success //200 ok
document.getElementById("demo").innerHTML = msg;
},
error: function(jqXHR, textStatus, errorThrown) {
//when error
}
});
}
</script>
I write a code that submit a form to another page without loading like ajax.I use jquery form plugin.but the problem is it is not working.
here is my code
<div id='preview'></div>
<form action='ajaxcall.php' id='upload_pic' enctype='multipart/form-data' method='post'>
<input type='file' id='pic' name='picture'>
<input type='button' id='sub'>
</form>
<script type="text/javascript" src='jqueryform.js'></script>
<script>
var options=
{
target:'#preview',
url:'ajaxcall.php',
success:function(){
document.getElementById("upload_pic").reset();
}
};
$(document).ready(function(){
$("#sub").click(function(){
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxForm(options).submit();
});
});
</script>
I understand that the ajaxForm() function is not working.the jquery file is above the code and working fine.After clicking button page automatically redirected to ajaxcall.php page.please help me finding out the error.Thanks in advance.
In this scenario you need to use ajaxSubmit
$(document).ready(function() {
var options = {
target : '#preview',
url : 'ajaxcall.php',
success : function() {
document.getElementById("upload_pic").reset();
}
};
$("#sub").click(function() {
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxSubmit(options);
});
});
Add one more submit function:
$(document).ready(function(){
$('#upload_pic').submit(function(e){ // <---pass event here
e.preventDefault(); //<----------------stop it here
});
$("#sub").click(function(){
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxForm(options).submit();
});
});
Try to stop the submit before the click.
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");
});
}
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