I have an implementation of AJAX, How to exactly replicate this with jQuery AJAX
var request;
function sendInfo()
{
var id = document.form.bid.value;
var url="retrieve.jsp?bid="+id;
if(window.XMLHttpRequest)
{
request=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
try
{
request.onreadystatechange=getInfo;
request.open("GET",url,true);
request.send();
} catch (e)
{
alert("Unable to connect to server");
}
}
I need to send a data bid onkeyup, display some data into the 'dispArea'
function getInfo()
{
if(request.readyState==4)
{
var val = request.responseText;
document.getElementById('dispArea').innerHTML=val;
}
}
Implement the same using jQuery AJAX
What I have tried ::
$(document).ready(function(){
$('#bookid').keyup(function(){
$.ajax({
url : 'retrieve.jsp',
data : {
bid : $('bookid').val()
},
success : function(responseText){
$('#dispArea').text(responseText);
}
});
});
});
bid is not available in the retrieve jsp file.
I didnt use # symbol in referring to the id "#bookid".
and to receive the text as html.
$(document).ready(function(){
$('#bookid').keyup(function(){
$.ajax({
url : 'retrieve.jsp',
type : 'POST',
async : 'false',
data : {
bid : $('#bookid').val()
},
success : function(responseText){
$('#dispArea').html(responseText);
}
});
});
});
Related
I make an AJAX request:
//javascript
var rq = new XMLHTTPrequest();
rq.open('POST','test.php', true);
rq.send(JSONString);
In "test.php" I make something like:
//php
$data = "Hello";
And I want to return $data back to my JS (via rq.responseText I suppose) how should I do it?
You can use XMLHttpRequest.response to get the response.
Please see the following code snippet and check out the documentation for details.
var url = 'test.php'; //A local page
function load(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
callback(xhr.response);
}
}
xhr.open('POST', url, true);
xhr.send(JSONString);
}
You can return JSON from PHP. EX
in javascript:
$.ajax({
url : url_api,
method : 'GET',
dataType : 'json',
data : {},
success : function (data) {
var hello = data.data;
}
});
In PHP:
<?php
$array = ['data' => 'hello'];
echo json_encode($array);
Dammit, the problem was that I did
rq.onload = alert(rq.response);
Instead of
rq.onload = function()
{
alert(rq.response);
}
Sorry pals
on adding the item, datagrid doesn't update automatically. On refreshing only record appears.
what needs to be done in the below code to auto update the table withou refreshing.
The url is the rest api I call to add the item
function addItem(){
var data = null;
var addItem = new XMLHttpRequest();
addItem.withCredentials = true;
var eName = $('#txtempname').val();
var eDesg = $('#txtdesignation').val();
addItem.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
console.log(this.responseText);
}
});
addItem.open("POST", "url");
addItem.setRequestHeader("authorization", "Basic cGR4OnBkeA==");
addItem.setRequestHeader("name", eName);
addItem.setRequestHeader("description",eDesg );
addItem.setRequestHeader("cache-control", "no-cache");
addItem.setRequestHeader("postman-token", "320fb698-18d9-790b-3471-3528ec60d948");
addItem.send(data);
$.ajax(
{
type:'POST',
url: 'url',
success:function(){
//s console.log("added succesfully");
swal("Added!", "Catalog Added successfully", "success");
getItems();
if ($.fn.DataTable.isDataTable('#subsiteList')) {
$('#subsiteList').DataTable().destroy();
}
$('#subsiteList tbody').empty();
},
error:function(){
console.log("error");
}
}
);
}
maybe you should take refrence from my solution to a similar question posted below : - Refrence link
I have a Json(config/server.json) config file which has server configuration.
eg:
{
"server": "127.0.0.1"
}
I want to read that 'server' parameter and assign that value to my other jquery functions.
eg:
var server = "";
$(document).ready(function() {
loadConfigFile();
loadCustomers();
});
function loadConfigFile() {
$.getJSON('config/server.json', function(jd) {
$.each(data.server, function(i,s){
alert(s);
});
});
};
function loadCustomers() {
$
.ajax({
type : 'GET',
url : server+':8080/cache/getCustomers',
...
}
My loadConfig file is not reading the JSOn file..What im doing wrong here?
Make sure that /config/server.json is exposed by server and valid address. You can try it by adding to browser. It should show entire file content. Next step, check browser console for errors..
Check this
$(document).ready(function() {
$.getJSON('config/server.json', loadCustomers);
});
function loadCustomers(configFile) {
$.ajax({
type : 'GET',
url : configFile.server+':8080/cache/getCustomers',
});
}
In your config/server.json add this :
{"server": "127.0.0.1"}
You client script :
var server = ""; // don't need
$(document).ready(function() {
loadConfigFile();
loadCustomers();
});
function loadConfigFile() {
$.getJSON('config/server.json', function(data) {
//HERE YOu need to get the name server
alert(data.server);
});
};
function loadCustomers() {
$.ajax({
type : 'GET',
url : server+':8080/cache/getCustomers',
success:function(data){
alert(data);
console.log(data);
$.each(data, function(i,s){
alert(s);
});
}
}
I am submitting the form on click button, but whatever I have changed that data is not sent but the previous data is sent, is there a way in which I can commit the data of the field in forms then send??
$j("body").on('click', "#btn_snd",function(){
Retrieve_Property_name();
$j(this).closest("form").submit();
});
});
The changes are done using ajax
function Retrieve_Property_name()
{
$j(".class_cat").hide();
var property_name = $j("#property_name").val();
$j.ajax({
type : "POST",
url : "ShowCat.jsp",
data : "property_name=" + property_name ,
success : function(data) {
if(data.trim()=="No")
{
$j("#Cat_name_hidden").val("General");
alert("Inside No");
}
else if(data.trim()=="Yes")
{
alert("Inside yes");
if($j("#Cat_name").val()==null)
{
$j("#Cat_name_hidden").val(" NULL");
}
else
{
//
alert("Categories:-"+$j("#Cat_name").val());
$j("#Cat_name_hidden").val($j("#Cat_name").val());
//
arr1 = $j("#Cat_name").val();
}
$j(".class_cat").show();
}
alert();
}
});
}
This is the change function
Instead of calling the submit function from the on function:
$j(this).closest("form").submit();
can you do this after your ajax call completes within the success function:
$j("#btn_snd").closest("form").submit();
My guess is that the form gets submitted before the ajax request completes and hence the old values are posted. So ideally the change function would be:
function Retrieve_Property_name()
{
$j(".class_cat").hide();
var property_name=$j("#property_name").val();
$j.ajax({
type : "POST",
url : "ShowCat.jsp",
data : "property_name=" + property_name ,
success : function(data) {
if(data.trim()=="No")
{
$j("#Cat_name_hidden").val("General");
alert("Inside No");
}
else if(data.trim()=="Yes")
{
alert("Inside yes");
if($j("#Cat_name").val()==null)
{
$j("#Cat_name_hidden").val(" NULL");
}
else
{
//
alert("Categories:-"+$j("#Cat_name").val());
$j("#Cat_name_hidden").val($j("#Cat_name").val());
//
arr1 = $j("#Cat_name").val();
}
$j(".class_cat").show();
}
alert();
$j("#btn_snd").closest("form").submit();
}
});
}
I have following code of javascript for search function. It works well when written inside html/php file it self, however, when I try to add this in my jQuery file, it doesn't work anymore.
<script type="text/javascript">
function findmatch(){
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function(){
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ){
document.getElementById('search_result').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'php/search.php?search_text='+document.search.search_text.value , true);
xmlhttp.send();
}
</script>
I tried replacing 'getElementById' with $('#') and few some ways. But didn't work. I want to convert in jQuery so I can manage/animate 'search_result' div according to size of result returned. I don't know how will I do that. But, if you can guide me fir that extra, It would be great/
If i understand correctly, it's Ajax call:
<html>
<head>
<script src="jqueryLibrary.js"></script>
<script type="text/javascript">
function findmatch() {
$.ajax({
url: 'php/search.php?search_text=' + document.search.search_text.value,
type: 'get',
success: function(responseText){
$('#search_result').text(responseText);
}
})
}
</script>
</head>
</html>
try this one
function findmatch(){
$.ajax({
type : "GET",
url : 'php/search.php?search_text='+document.search.search_text.value,
cache : false,
async : false,
success : function(data) {
$('#search_result').text(data);
},
error : function(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
So this should work:
function findmatch() {
$.post('php/search.php?search_text='+document.search.search_text.value,function(response){
$('#search_result').html(response);
});
}
//EDIT: Made a mistake, semikolon after function findmatch() { }; <<
Greetings