AJAX

12K

Solutions

13

Articles & Videos

7K

Contributors

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.

Share tech news, updates, or what's on your mind.

Sign up to Post

My sample site URL : My working Site URL

I am trying to find a solution that will allow me to plot the GPS coordinates of many moving objects "live" on a Google Map.

The GPS coordinates of each object will constantly be updating into a MySQL database, and I'd like to know whether it is possible to read each updated coordinate, maybe once every couple of seconds, and re-plot the marker coordinates on the Google Map, without the user having to refresh the page.  Can this be done,?

would it also be possible to make each marker different, and each marker clickable to get more information on the particular object?

My map based on Jack Dougherty's FusionTable-Map-2-layers Template and running nicely on my hostgater server.

I have Traccar Open Source GPS Tracking Platform hosted with Amazone AWS and able to get tracker data to the mysql database, this database update every 30 second with live tracker data

# my db name “newTraccar” & all tracker data update for table `positions`

// -------------- Table structure for table `positions` ---------------------//

CREATE TABLE IF NOT EXISTS `positions` (
  `id` bigint(20) NOT NULL,
  `address` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  `altitude` double DEFAULT NULL,
  `course` double DEFAULT NULL,
  `latitude` double DEFAULT NULL,
  `longitude` double DEFAULT NULL,
  `other` 

Open in new window

0
Technology Partners: We Want Your Opinion!
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

// Cotroller
[HttpPut]
        public HttpResponseMessage Put([FromUri]string oldPwd, [FromBody]Hotel_Login Hotel_Login)
        {
            using (Hotel_ShowEntities entities = new Hotel_ShowEntities())
            {
                try
                {
                    var entity = entities.Hotel_Login.FirstOrDefault(e => e.Password == oldPwd);
                    if (entity == null)
                    {
                        return Request.CreateErrorResponse(HttpStatusCode.NotFound, "Customer with that Password=" + oldPwd.ToString() + "not found");

                    }
                    else
                    {
                        entity.Password = Hotel_Login.Password;
                        entities.SaveChanges();
                        return Request.CreateResponse(HttpStatusCode.OK, entity);
                    }
                }
                catch (Exception ex)
                {
                    return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ex);
                }
            }

        }

//Ajax call

 $(document).ready(function () {
                $("#btnSubmit").click(function () {
                    var CurrentPwd = $("#CurrPwd").val();
                    var Newpwd = $("#NewPwd").val();
                    console.log(Newpwd);
                    $.ajax({
                        type: "Put",
                        url: "http://localhost:16580/api/ChangeForgetPass/Put?oldPwd=" +…
0
I have a user form that is created in extjs framework. The user form has many user fields which are being passed as part of request payload to the REST controller. I am trying to add a grid panel(most likely in a tabular format with multiple rows & columns) to the user form. But I am not sure how to pass the grid panel data as part of request payload to the REST controller. I will post more code if any more details are needed. Any help would be appreciated. Thanks.

Ext.define('soylentgreen.view.admin.UserForm', {
    extend : 'Ext.form.Panel',
    alias : 'widget.userform',
    bodyStyle : 'padding:5px 5px 0',

// some userform elements like firstname,lastname, go here.....

name : 'userTeamGrid',
  xtype : 'gridpanel',
id : 'userTeamGrid',
itemId : 'userTeamGrid',
multiSelect : true,
selModel : Ext.create(
        'Ext.selection.CheckboxModel',
        {
          injectCheckbox : 'first',
          mode : 'MULTI',
          checkOnly : false
        }),
anchor : '100%',
width : '700px',
height : 250,
flex : 1,
store : 'userTeamStore',

var user = form.getRecord();
form.updateRecord(user);
user.save({
        callback : function(records, operation){
          //reset the (static) proxy extraParams object
          user.getProxy().extraParams =  {
            requestType: 'standard'
          }
          if(!operation.wasSuccessful()){
            var error = operation.getError();
0
In my wordpress site, Ajax Load more plugin is not working for the specific page. Itz working in some of the pages. But not working in the rest of the pages. Below are the urls that can give you a clear description.
Working Page : "http://www.stockimagesafrica.com/people"
And not working in http://www.stockimagesafrica.com/downloads/category/southern-africa/
0
Hello All;

OK, this is code that I found a while back, and posted here.
ASP Classic - Insert text, Line breaks and Code

The issue that I had, or am still having now, is that I am giving the user the option to choose the tags they want to use.
They can have as many tags as they need in their post.

The issue with the code in the link above is that it will only do one tag hard coded.
So, that I have done is added an REGGEX into it, and it works GREAT! for the highlighting,
However, adding this in, has messed up the main function of this code FUNCTION, and that is.
It adds the line breaks to everything OUTSIDE of the Code tags.

The REGGEX that I used and works is this.

Function Reggex(strString, strPattern, strReplace)

	Dim RE: Set RE = New RegExp

	With RE
		.Pattern = strPattern
		.Global = True
		.IgnoreCase = True
		Reggex = .Replace(strString, strReplace)
	End With
	
End Function

fString =   Reggex(fString, "\[code=(.*?)\](.*?)\[\/code=(.*?)\]", "<pre class=""line-numbers"" id=""code""><code class=""language-$1 demo"">$2</code></pre id=""code"">")

Open in new window


The original code is this. (Modified to work in my project)

 	CodeTags(1,1,1) = "[ code=sql]" ' Remove the space between the bracket, 
 	CodeTags(1,2,1) = "[/ code=sql]" ' Remove the space between the bracket, 
 	CodeTags(1,1,2) = "<pre class=""line-numbers"" id=""code""><code class=""language-sql demo"">"
 	CodeTags(1,2,2) = "</code></pre id=""code"">"

Open in new window


This is the entire script.


Open in new window

0
Hi ,

I am using masterpage and masterpage is having Ajax ModalPopupExtender Control. Also page uses Frames. ModalPopup shows always in the top frame and top frame is greyed out. Bottom frame is not greyed out. how to to show modalpopup window in the center of the page and both frames are greyed out.

Masterpage.aspx
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="AdminMasterPage.master.cs" Inherits="CoreTeamFeedback.Administration.MasterPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

   <asp:ContentPlaceHolder id="head" runat="server">
   </asp:ContentPlaceHolder>
<style>
 .modalBackground

    {
        background-color: #cccccc;
        filter: alpha(opacity=50);
        opacity: 0.6;
    }

    .modalPopup
    {
        background-color: #FFFFFF;
        width: 300px;
        border: 3px solid #507F70;
        border-radius: 12px;
        padding:0
    }

    .modalPopup .header
    {
        background-color: #285C4D;
        height: 30px;
        color: White;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        font-family:Verdana;
        font-size:8pt;
    }

    .modalPopup .body
    {
  

Open in new window

0
Oh the wonderful MVC world....

I am trying to setup a timeout script for my website. Currently it seems to work but if the user wanted to extend the timeout time then move to another page it seems to have lost all of my session varibles I had saved.

FilterConfig.cs code:
public class IsAuthenticatedAttribute : ActionFilterAttribute  
    {  
        public override void OnActionExecuting(ActionExecutingContext filterContext)  
        {  
            if (rowCnt >= 1) //Making sure user has permissions to even view this site  
            {  
                System.Diagnostics.Debug.WriteLine("Current timeout: " + HttpContext.Current.Session.Timeout);  
                System.Diagnostics.Debug.WriteLine("Session timeout: " + HttpContext.Current.Session["timeoutDate"]);  
  
                if (HttpContext.Current.Session.Timeout == 20) //20 is the default timeout setting  
                {  
                    //It's the first time the user has visited the page so set timeout!  
                    filterContext.HttpContext.Session.Clear();  
                    filterContext.HttpContext.Session.RemoveAll();  
  
                    HttpContext.Current.Session.Timeout = 1;  
                    HttpContext.Current.Session["sessionVars"] = new initSessionVars().getSVars;  
                    sessionVars sVars = HttpContext.Current.Session["sessionVars"] as sessionVars;  
  
                    //Send them to the main page in order to populate the sessions and 

Open in new window

0
<script>
  function myFunction() {
     var query = '?';
     var str = $("form").serialize();
     $("#results").text(query += str);
     var x = $("#results").text();
     return x;
 }
  $( "input[type='sel'], input[type='text']").on( "click", myFunction);
  $( "select" ).on( "change", myFunction);

  //window.alert(myFunction());
 //query += '&' + value + '=' +  value +'.value';
 var jsonString = JSON.stringify(myFunction());
 console.log(jsonString);
 $.ajax({
    url: 'insert_value.php',
    data: jsonString,
    
    contentType: 'application/json; charset=utf-8',
    type: 'POST',
  }).done(function(resp) {
    $('#result').html(resp)
  });
  
</script> 
    

Open in new window




This is not showing values on the console only "?Gender=Male&id=" after editing values on the controls it is not changing values and giving above message on the console it giving something like this   [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
0
we are generating dynamic controls like dropdown and textboxes so how we need to get data and assign those values to array and creating query string and pass that to one variale using ajax
please let me know the answer for this question
dyn_html.php
0
Hello,

I have spent about 10 hours trying to figure this out.

So this form worked on another server 2 days ago, I moved it to a new server and now the form will not submit. I tried to look if there were any errors but no errors are recorded.

I am afraid that I don't have the correct tools, can someone that is familiar with js take a look and see if they see where the error is being reported, I am assuming there is a way to check it in the browser.

http://tinyurl.com/mux3tml

Thanks!
0
Independent Software Vendors: We Want Your Opinion
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

JS on child page:
GetRadWindow().BrowserWindow.refreshGrid(args); ---Does not refresh the grid on the master page.

vb on child page:
 Protected Sub DetailsView1_ItemCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewCommandEventArgs) Handles DetailsView1.ItemCommand
        If (e.CommandName = "Update") Then
            ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CloseAndRebind();", True)
        ElseIf (e.CommandName = "Insert") Then
            ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CloseAndRebind('navigateToInserted');", True)
        Else
            ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CancelEdit();", True)
        End If

    End Sub

Open in new window

0
Dear All,
I have a textbox in a asp.net web page .
When the user click inside the textbox I need to open a panel that contain 3 textboxes and a confirm button.
the user will then b able to write in these 3 textboxes(with jquery autocomplete) and I will concatenate the strings to a final string in the parent textbox.
I tried to use a ajaxtoolkit:PopupControlExtender and it did the trick but it will close every time the user select an option from the autocomplete. Any Idea how to keep this popup opened after selection done and close it only when confirm button click?
0
ColdFusion CFSelect will not bind and return the Selected Value in ColdFusion 11.... It works fine in ColdFusion 8 and 9, but when put on CF11 it will not work

Here is the code.

<cfselect name="Field1" id="Field1" value="" bind="cfc:cfc_Field1DrillDown.lookupField1({Field1Desc},'#vField1Category#')" bindonload="YES" />

The CFC:

<cfcomponent output="false">
      
      <!--- Lookup used for auto suggest --->
      <cffunction name="lookupField1" access="remote" returntype="array">
            <cfargument name="vField1Desc" type="string" required="true">
            <cfargument name="vField1Category" type="string" default="" required="false">
            <!--- Define variables --->
          <cfset var data="">
          <cfset var result=ArrayNew(2)>
          <cfset var i=0>
            
            <!--- Do search --->
            <cfquery datasource="#Request.FieldDSN#" name="data">
                  SELECT QueryFieldID, QueryField
                  FROM FieldNames
                  WHERE (SICDefinitionID = '#ARGUMENTS.vField1Desc#')
                  ORDER BY QueryField
            </cfquery>
            
            <cfif data.recordcount IS 1>
                    <cfset result[1][1]=data.QueryFieldID>
                      <cfset result[1][2]=data.QueryField>
                        <cfset result[1][3]=IIF(ARGUMENTS.vField1Category eq data.QueryFieldID,DE(true),DE(false))>
            <cfelse>
                  <cfset result[1][1]="N/A">
                <cfset result[1][2]="">
                  <cfloop index="i" from="1" to="#data.RecordCount#">
                    <cfset result[i+1][1]=data.QueryFieldID[i]>
                        <cfset result[i+1][2]=data.QueryField[i]>
                        <cfset …
0
When a site is  using jquery/XMLhttp requests we were able to get active ajax calls in the back end using "jQuery.active".
But when a site is using Aurelia fetch for ajax calls(Fetch complete: POST), how to get number of active fetch calls in the back end?
0
Hi mates,

I have written an app built around JSON object and ajax though with PHP.

This one is using WebMethod() with asp.net and I am running into "error while inserting data"

Though that is my custom error message, it tells me there is an issue with sanitizing data.

I am also receiving [object Object] which tells me that a certain form field is not getting stringrified.

Can someone please help?

    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on("click", "#btnAdd", function () { //
                var rowCount = $('.data-contact-person').length + 1;
                var contactdiv = '<tr class="data-contact-person">' +
                    '<td><input type="text" style="width:200px;" name="sourcename' + rowCount + '" class="form-control sourcename01" /></td>' +
                    '<td><input type="text" style="width:200px;" name="sourceaddress' + rowCount + '" class="form-control sourceaddress01" /></td>' +
                    '<td><input type="text" style="width:200px;" name="sourceincome' + rowCount + '" class="form-control sourceincome01" /></td>' +
                    '<td style="width:200px;"><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
                    '<button type="button" id="btnDelete1" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
                    '</tr>';
                $('#maintable').append(contactdiv); //

Open in new window

0
I have got DropZoneJs working to upload multiple images, store them in a specified location and add records to the database.

The problem I am facing now is how to add javascript/jquery to call the php file that I want to be responsible for deleting database records and removing files. The code I found for removing uploaded images was on the DropzoneJs website but this just removes the visible image on the screen, nothing else.

They have commented below where you should make the ajax call but I don't know how. I am guessing that I need to pass the images ID's to the php page which will perform the delete.

Dropzone.options.imageUpload = {
			init: function () {
				this.on("addedfile", function (file) {
					// Create the remove button
					var removeButton = Dropzone.createElement("<button class='btn btn-fill btn-danger'>Remove file</button>");
					// Capture the Dropzone instance as closure.
					var _this = this;
					// Listen to the click event
					removeButton.addEventListener("click", function (e) {
						// Make sure the button click doesn't submit the form:
						e.preventDefault();
						e.stopPropagation();
						// Remove the file preview.
						_this.removeFile(file);
						// If you want to the delete the file on the server as well,
						// you can do the AJAX request here.
						this.on("maxfilesexceeded", function(file) { this.removeFile(file); });
					});
					// Add the button to the file preview element.
					

Open in new window

0
I have inherited a SharePoint site that has a mix of SPServices calls and .aJax calls to obtain list data.  Can anyone suggest why a mix?  Also,  I am looking into converting the calls which are 100% async false to async true.  Can I handle the two call types .ajax and spServices the same with regards to that?  I am aware that I need to use promises or some mechanism to ensure that the call has completed and that page has had required updates performed before I make any subsequent calls to functions which need to process the page once its in its "next" state.
0
I had this question after viewing how to clear Browser cache using angularjs.

we are retrieving by using ajax call to server.Then we are assigning them by using model of angular JS.
This caching is only happening with Internet explorer version 11/10/Edge
0
so please help me to find out the way for continuing the display of serial number in all the pages.............
0
On Demand Webinar: Networking for the Cloud Era
LVL 9
On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

i have a form that has two fields
1.field1     selectbox1
2.field2     selectbox2
now i get values in selectbox1 from the database and the option i get in this selected field shows in alert as
field1  :radha
filed2: sharma
i have alert value that i get in response.
now i want that as i select field1 ,than field2 should show value as sharma in the form just after a click on the option of selectbox1

\$(document).ready(function () {
      

\$('#CONTRACT_NO').on('change', function()
{
            
                        
            var CONTRACT_NO = \$('#CONTRACT_NO').val();
                  var CONTRACT_DATE = \$('#CONTRACT_DATE').val();
     
\$.ajax
({
                  type: "POST",
                  url: "macrocall.cgi",
                  data: {
                              macro: "ajax/name",
                              CGISESSID:"$CGISESSID",
                              FIELD1:FIELD1,
                              FIELD2:FIELD2,
                              
                              action : 'FIELD1'
                              },
                              dataType: 'text',
                              success: function(data){
      
alert(data);});
0
Hello all,

My site was working fine under the regular http site.  When i was force to move over to secure https site, ajax stop working.  I don't know what i am doing wrong.

the code is below:
				$.ajax({
				type: "POST",
				url: "update_location.php",
				data:'vlat='+locLat+'&vlong='+locLong+'&vTranId='+tranId,
				success: function(data){
					$("#city-list").html(data);
                                      
				}
				});

Open in new window

0
Hello experts,

I am trying to learn and code REST protocol with Ajax. I have been using Poster plugin on Firefox to see REST in action. It works as expected.

Now I need to convert the 'Poster' functionality into code. Here is what I have:

$(document).ready(function(){
	var myBasic = "Basic <my Base64 credentials>";
	$.ajax({
		  type: "GET",
		  contentType: "application/xml",
		  url: "http://10.85.85.18/<my Rest command>/1",
		  beforeSend: function (xhr){ 
			xhr.setRequestHeader('Authorization', myBasic); 
		  },
		  success: function(xml){
			alert("Connection Success");
		  },			  
		  error: function(xhr, ajaxOptions, thrownError) {
			alert("Problem");
		  }
	 })			 
 });

Open in new window


As you see, for start; I am only after a successful connection. However, when I call this on Firefox, I receive this error:
"NetworkError: 403 Forbidden - http://<ip address>/<my Rest command>/1"

This is expected since my wireshark capture shows no sign of authentication Header:

OPTIONS /<my Rest command>/1 HTTP/1.1
Host: 10.85.85.18
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-GB,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: http://10.85.85.11
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization,content-type
Connection: keep-alive
Cache-Control: max-age=0

Can you guide me to write the correct Ajax call which includes/modifies the authentication header?

Thank you in advance
0
I recently migrate the Wicket 1.4 application to 1.5
In 1.5 I was using inter-component event to pass value from the ModalWindow's page to the calling page (in 1.4 ModalWindow.WindowClosedCallback was used for this purpose).
The problem : in onEvent I can't update the container from the calling page's panel because AjaxRequestTarget provided with event belongs to ModalWindow, not to the calling page.
I tried to update the calling page with setResponsePage(getPage()) in onEvent, but it reloads the right data in ModalWindow first (I issued close for it before), and then after clicking on close button in ModalWindow, the target container would be refreshed (in the calling page)
0

AJAX

12K

Solutions

13

Articles & Videos

7K

Contributors

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.