I'm trying to show data after ajax call but it was disappeared after showing
here is my code:
<script src="js/jquery.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
$(document).ready(function(){
$(".medicine").keyup(function(){
var txt=$(this).val();
$.post("search.php",{medicine:txt},function(result){
$("#search-result").html(result);
});
});
$(document).on('click','#find', function () {
var input = $("#text").val();
var url = 'row.php';
var data = input;
$.ajax({
type: "POST",
url: url,
data: {data:data},
success: function (data) {
$(document).find('table').remove();
$("#temp_table").html(data);
}
});
});
});
</script>
first function is for search bar which is working second one also working but when data comes in success function it show for a second in temporary div and vanished
When your ajax completes, the success callback function removes all <table> elements caused by the use of the .remove() function.
$(document).find('table').remove();
Description: Remove the set of matched elements from the DOM.
If you want to clear the html content of your <table> elements instead of removing them (my guess), use .empty() instead
$.ajax({
type: "POST",
url: url,
data: {
data: data
},
success: function(data) {
$('table').empty();
$("#temp_table").html(data);
}
});
Related
I'm looking for a very basic way to display one piece of XML data from this public source in html: http://avwx.rest/api/metar.php?station=KTPF
Here is what I have so far, with no luck:
<script type="javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
dataType: "xml",
url: "http://avwx.rest/api/metar.php?station=KTPF",
success: xmlParser
});
});
function xmlParser(xml)
{
$(xml).find("Raw-Report")
{
$("#metar-text").append('<marquee class="metar-marquee">' + $(this).find("Raw-Report").text() + '</marquee>');
};
};
</script>
I have a div in the HTML with the id #metar-text that I would like scrolling (hence the conc. marquee tags) I only need to display the Raw-Report text.
Your code require some corrections to work.
<script type="javascript">
$(document).ready(function(){
$.ajax({//this part is OK
type: "GET",
dataType: "xml",
url: "http://avwx.rest/api/metar.php?station=KTPF",
success: xmlParser //note that success receives 3 arguments
});
});
function xmlParser(data, state, xhr)
{
var xml = xhr.responseXML; //xml document is here
if($(xml).find("Raw-Report").text()) //that is exists and not empty
{
$("#metar-text").append('<marquee class="metar-marquee">'
+ $(xml).find("Raw-Report").text()
+ '</marquee>'); //**this** is $.ajax in this context
};
};
</script>
I am struggling to figure out why this is not working, but I would like it so that the information from load.php is placed in the div sample but if that code is updated (say if i was pulling information from a database), only the information included in load.php would refresh - not the entire page.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var callAjax = function(){
$.ajax({
method:'get',
url:'load.php',
success:function(data){
$("#sample").html(data);
}
});
}
setInterval(callAjax,5000);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id='sample'>100 </div>
</body>
</html>
I had a similar situation with my AJAX calls. I am not sure if your syntax is actually bad but here is how my Ajax call looks for a similar partial load.
var callAjax = function(){
$.ajax({
url: "load.php"
type: "GET",
async: true,
success: function (data) {
$("#sample").html(data);
}
});
}
};
setInterval(callAjax,5000);
I found that my Ajax started working once I added the async:true and made sure my controller was handling GET requests. I had previously forgotten that it was set to HTTPPOST only.
I hope this helps out. Not sure if it will.
cheers.
setInterval('someFunc()', 1000);
function someFunc()
{
$.ajax({
async: true,
type: "GET",
url: "www.domain.com/url",
data: data,
success: function (html) {
$("#myDiv").html(html);
}
});
}
I have a form where I would like to pass the value of an text input field to an external page without a form submit event. I would like to field value to become a php variable on the external page.
Here is what I have so far:
<script type="text/javascript">
jQuery(document).ready(function() {
$(function() {
cityField = $('#the_form input[id=city]');
$.ajax({
type: "POST",
url: "external.php",
data:{ city: cityfield },
success: function(data){
console.log(data);
}
});
});
});
</script>
Within the external.php page, I would like to declare the city form field value as a php variable as
$city = $_POST['city'];
To start with
jQuery(document).ready(function() {
and
$(function() {
are equivalent. The $(function() should be something like
$("input[type='button']").click(function() {
so that when you click the button, it runs the ajax request.
I cleaned up the code but the data is not being sent to external.php. It is being set but not posting. Here is my revised code
<script type="text/javascript">
$('#city').blur(function() {
var cityField = document.querySelector('#city').value;
$.ajax({
type: "post",
url: "external.php",
data: {'cityField': cityField },
dataType: "text",
success: function(data, status){
if(status=="success") {
alert("You typed: " + cityField);
}
}
});
});
I dont feel right posting an answer for a single change... But
EDIT: There are actually a few things...
<!-- For .click() -->
Click Me!
<script type="text/javascript">
// $(function() { // Trigger on page load
// $('#doStuff').click(function() { // Trigger on a click
$('#city').blur(function() { // Trigger when the focus on the field is lost (click away, tab to another field, ect)
// $('#city').change(function() { // Trigger when the fields value changes
var cityField = $('#city');
$.ajax({
type: "POST",
url: "external.php",
data:{ 'city': cityField.val() },
success: function(data){
console.log(data);
}
});
});
</script>
Changes:
You dont need jQuery(document).ready(function() {}) AND $(function(){ }). Its the same thing.
Its smart to put a var in front on your variables.
Case is important. cityField and cityfield are not the same thing
You were just sending the whole dom element to your external script. (which I assume you only wanted the contents of the input)
Also, you dont need to look for "an input, with an 'id' attribute , with a value of 'city'". Just look for #city
EDIT:
Your updated code (just putting it here so its easier to see):
<script type="text/javascript">
$('#city').blur(function() {
var cityField=$('#city').val();
$.ajax({
type:"post",
url:"autosuggest.php",
data:{'cityField':cityField },
dataType:"text",
complete:function(data, status) {
alert("You typed: "+cityField);
}
});
});
</script>
Your data will should be available in autosuggest.php as $_POST['cityField'];
Having a status check within the success function, is a little redundant, in my opinion.
It would be better to move the success:function(data,... to a complete:function(data,...
i have this working code with this code i can pass data to div within same page
but insted of passing data to div i want to pass this to label or textbox so that i can post it to the server. i am new in ajax,jquery . please suggest me best answer
<script type="text/javascript">
//send clicker data to div
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(){
//alert(data);
$('.responseDiv').text(data);
}
});
});
});
</script>
<script type="text/javascript">
i think i need to change this line only
$('.responseDiv').text(data);
but dont know how to do that. didnt find any solution on net also
take any name like propertyId
Let's say the text field has id="propertyID"
Use the val() method to assign this new value to your text field.
$('#proertyID').val(data);
Like:
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(){
//alert(data);
// $('.responseDiv').text(data);
$('#proertyID').val(data);
}
});
});
});
In the below line change selector .responseDiv with id/name or class of input/label $('.responseDiv').val(data);
<script type="text/javascript"> //send clicker data to div
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(data2){
//alert(data);
$('.responseDiv').text(data2);
}
});
});
});
success return in data2 and use this..
I have the below jquery function to load data from database which works fine, however I would like to show that same data again over the same page, When I do that it doesn't work. it will only shows for the first one. could someone help me out?
<script type="text/javascript">
$(document).ready(function() {
loadData();
});
var loadData = function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "second.php",
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
setTimeout(loadData, 1000);
}
});
};
</script>
<div style='display:inline' id='responsecontainer'></div><!--only this one is displayed-->
<div style='display:inline' id='responsecontainer'></div><!-- I want it to show me the same data here too-->
ID of an element must be unique in a document, use class attribute to group similar elements
<div style='display:inline' class='responsecontainer'></div>
<div style='display:inline' class='responsecontainer'></div>
then use class selector
$(document).ready(function () {
loadData();
});
var loadData = function () {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "second.php",
dataType: "html", //expect html to be returned
success: function (response) {
$(".responsecontainer").html(response);
setTimeout(loadData, 1000);
}
});
};
The ID selector will return only the first element with the given ID