I'm starting to work with vuejs and I'm trying to make a http get call without sucess. I've tried several example showing how to do that but I get the following error in my console: this.$http is undefined.
html
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/js/uikit-icons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css"/>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<p v-bind:title='message'>
{{ message }}
<p>
<button v-on:click='changeView("matrice")'>get data</button>
</div>
</body>
<script type="text/javascript" src="/front/lala_web/matrice.js"></script>
</html>
js
var app = new Vue({
el: '#app',
data: {
message: 'Empty data'
},
methods:{
changeView: function(v){
this.$http.get('/view/'+v)
.then(function(resp){
this.message = resp.data;
})
.catch(function(){alert('Error')});
}
}
})
I'been able to get a http get call working using the following js, but doing so doesn't change data.message value of vuejs and I get the following error data is not defined.
js
var app = new Vue({
el: '#app',
data: {
message: 'Empty data'
},
methods:{
changeView: function(v){
var viewUrl = '/view/'
$.ajax({
url: viewUrl+v,
method: 'GET',
success: function (resp) {
if (resp.error == false){
console.log(resp)
data.message = resp.data
}
},
error: function (error) {
console.log(error)
}
});
}
}
})
You need to reference this.message not data.message. Also, you'll need to save a reference to this outside the scope of the ajax call, since this in the success handler doesn't refer to the Vue instance:
changeView: function(v){
var viewUrl = '/view/'
var self = this;
$.ajax({
url: viewUrl+v,
method: 'GET',
success: function (resp) {
if (resp.error == false){
console.log(resp)
self.message = resp.data
}
},
error: function (error) {
console.log(error)
}
});
}
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
I have a problem using CodeIgniter and jqGrid. The grid has the right design but does not load the data into the grid. The message displayed is "undefined".
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dark-hive/jquery-ui.css" type="text/css" rel="stylesheet"/>
<link href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" rel="stylesheet"/>
<link type="text/css" href="<?php echo base_url()?>asset/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
<link type="text/css" href="<?php echo base_url()?>asset/jqgrid/css/jquery.searchFilter.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>'asset/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>asset/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>asset/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<title>Jqgrid</title>
</head>
<body>
<script type="text/javascript">
jQuery().ready(function (){
jQuery("#list").jqGrid({
url:'<?php echo base_url().'index.php/jqgrid/example'?>',
mtype : "post",
datatype: "json",
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:20},
{name:'invdate', index:'invdate', width:90, align:'center',editable:true, formatter:'date',editrules: { required: true, date:true}, formatoptions:{srcformat:'Y-m-d', newformat:'m/d/Y'}},
{name:'amount', index:'amount', width:80, align:'center',editable:true,edittype:'text'},
{name:'tax', index:'tax', width:80, align:'center',editable:true,edittype:'text'},
{name:'total', index:'total', width:80, align:'center',editable:true, edittype:'text'},
{name:'note', index:'note', width:150, align:'center', sortable:false,editable:true,edittype:'text'}
],
rowNum:10,
width: 800,
height: 200,
rowList:[10,20,30,40,50,60,70],
pager: '#gridpager',
sortname: 'invid',
viewrecords: true,
caption:"CLientes"
}).navGrid(
'#gridpager',
{view:true,edit:true,add:true,del:true,search:true},
{closeAfterEdit:true,modal:true}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{}, // enable the advanced searching
{closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/
);
});
</script>
<table id="list"></table>
<div id="gridpager"></div>
</body>
class cliente extends CI_Model{
function __construct()
{
parent::__construct();
}
function cargar()
{
$q = $this->db->query("select * from invheader");
return $q;
}
}
class jqgrid extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->helper(array('url'));
$this->load->model('cliente');
$this->load->database();
}
function index()
{
$this->load->view('jqgrid/home');
}
function example()
{
$hal = isset($_POST['page'])?$_POST['page']:1;
$batas = isset($_POST['rows'])?$_POST['rows']:10;
$sidx = isset($_POST['sidx'])?$_POST['sidx']:'invid';
if(!$sidx) $sidx=1;
$q = $this->cliente->cargar();
$hitung = count($q);
if( $hitung > 0 ) {
$total_hal = ceil($hitung/$batas);
} else {
$total_hal = 0;
}
if ($hal > $total_hal) $hal=$total_hal;
$start = $batas*$hal - $batas;
$start = ($start < 0) ? 0 : $start;
$data->page = $hal;
$data->total = $total_hal;
$data->records = $hitung;
$i=0;
foreach($q->result() as $row) {
$data->rows[$i]['id']=$row->invid;
$data->rows[$i]['cell']=array($i+1,$row->invdate,$row->amount,$row->tax,$row->total,$row->note);
$i++;
}
echo json_encode($data);
}
}
I see the following problem/suspected places in your code:
First of all the file jquery.searchFilter.css will be not used in many resent jqGrid versions.
Including of both jquery.jqGrid.js and jquery.jqGrid.min.js is definitively wrong.
I don't use PHP myself, but "<?php echo base_url(); ?>'asset/jqgrid/js/i18n/grid.locale-en.js" seems me wrong. Probably you mean "<?php echo base_url(); ?>asset/jqgrid/js/i18n/grid.locale-en.js" (without ' charachter in the middle).
I don't know PHP syntax, but url:'<?php echo base_url().'index.php/jqgrid/example'?>' seems also suspected for mean something like url:'<?php echo base_url("index.php/jqgrid/example");?>'?
i dont know what is actual problem in the below code, but it doesn't work as i expected.
<html>
<head>
<script type='text/javascript' src='jquery-1.4.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#clickme').click(function(){
var uid="sekar#example.com";
var upass="sample";
$.ajax({
type : 'GET',
url : 'http://www.example.com/test.php',
data: {
em : uid,
pass : upass,
action : 'check'
},
success : function(msg){
alert(msg);
},
error : function(XMLHttpRequest, textStatus, errorThrown){alert(errorThrown);}
});
});
});
</script>
</head>
<body>
<input type='button' value='click' id='clickme' />
</body>
</html>
In that test.php i simply tried to echo "hello world" or echo $_GET['action']
But none of this worked i got only empty message? can some one help me in this issue?
Thanks!
There is no error in your code. But never pass your passwords using GET.
I create two files test.html and test.php.
Code of test.html:
<!-- language: html-->
<html>
<head>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#clickme').click(function(){
var uid="sekar#example.com";
var upass="sample";
$.ajax({
type : 'GET',
url : 'test.php',
data: {
em : uid,
pass : upass,
action : 'check'
},
success : function(msg){
alert(msg);
},
error : function(XMLHttpRequest, textStatus, errorThrown){alert(errorThrown);}
});
});
});
</script>
</head>
<body>
<input type='button' value='click' id='clickme' />
</body>
</html>
code of test.php:
<!-- language: php -->
<?php
echo $_GET['action'];
?>
Is it because data has to be a string?
data: "em="+uid+"&pass="+upass="&action=check",