Go Premium for a chance to win a PS4. Enter to Win

x

AJAX

12K

Solutions

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

I am used to using procedural php and jQuery/ajax. Here is a simple example of how I would usually use them together.

Let's say I have a page that just has an input field.

<input type="text" name="name" id="name">

Open in new window


Then to keep it simple, I have some jQuery at the bottom of the page:

// code here to trigger the ajax call on button click/form submit etc.
		var form = $( "#loginForm" ).serialize();	
			$.ajax({
				url: 'functions/some-file.php',
				type: 'POST',
				dataType: 'json',
				data: form,
				beforeSend: function() {
					$( "#login" ).hide();
					$( ".spinner" ).html("<img src='img/spinner.gif'>");
				},
			})
                     // .done and .fail go here

Open in new window


The some-file.php file would look something like:

<?php

if($_POST) {

	$response = array();
	$message = "";

if(empty($_POST['name'])) {
		
		$message .= "Name required";
	}

if($message) {
	
		$response['success'] = false;
		$response['message'] = $message;
	
	} else {

                // add data to database
                $response['success'] = true;
		$response['message'] = "Success";
		
	}
	
	echo json_encode($response);
}

Open in new window


This works fine. I have a basic MVC framework that I built from scratch using only php based on a course I did (no templating engines or anything, just plain php) and don't know how to do the above in MVC.

At this point I have the view and the controller. I am not onto the model yet. At this point I have a form with email and password fields and I am just trying to do the validation. Here I am just checking if the email field is empty or not to keep it simple.

In my controller I just have:

      
public function login() {
		
		if($_POST) {
			
			
			$data = [
				
				'email' => trim($_POST['email']),
				'email_err' => '' 
			];
			
			if(empty($_POST['email'])) {
				
				$data['email_err'] = 'Email required';
			}
			
			if(empty($data['email_err'])) {
				
				//call login model
				

			} else {
				
				$this->view('users/login', $data);
			}
			
		} else {
			
			$data = [
				
				'email' => '',
				'email_err' => ''
			];
			
			$this->view('users/login', $data);
		}
	}

Open in new window


And my view:

<form action="<?php echo URLROOT;?>/users/login" method="post">
	<input class="form-email" type="email" placeholder="Email Address" name="email" autocomplete="off">
	<input class="form-password" type="password" placeholder="Password" name="password">
	<input class="login-btn btn-filled" id="login" type="submit" value="Login">
	<div class="spinner"></div>
	<input type="hidden" name="form_token" id="form_token" value="<?php //echo make_form_token(); ?>">
	<input type="text" name="some-field" style="display:none;">
</form>
<div class="alert alert-danger">

Open in new window


So, the question is, how on earth do I make the ajax call using the controller and send the data to the model?
0
Free Tool: Path Explorer
LVL 11
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

I have a legacy script for a client that I'm trying to get their original authorize.net coding to work with the new acceptJS coding format.

The following code makes a call out to a credit card processing service (authorize.net).  When it returns with validated info, it pops up a dialog box that the person then responds to in order to finalize the processing.

When it makes the call to authorize.net, a token is returned. But because JavaScript is running in asyncronos mode, if the person is on a slow internet connection, the box pops up before a reply has been received from authorize.net.

What I need to have this do is to postpone the processing of the popup dialog until I get a valid answer of either "Error" or "Ok" from authnet. Anything else should wait for that reply.

In the script below, the call to auth.net is made on line 23:  var resp = sendPay2Auth(apiLoginID, clientID, extr);

On the next line it then looks for the value of resp.respcd.  If it says, "Error" it returns false and thus the dialog box does not pop up.

If it returns "Ok" it pops up the dialog box for them to continue.

But the problem is if the call to authorize.net has sent back a response yet, it gives a value of "undefined" in which case it then just does nothing at this point. Which leaves the customer hanging.

So what I'm looking for is how to code this so that the script will just "wait" until it gets back either an "Ok" or and "Error" in the field designated as …
0
How to convert json data to excel
0
i have created a table having n rows  with some text boxes and a command buttonj. Everything, table, rows, textboxes and commandbuttons are created at run time.
i am able to handle click event of command buttons that completes with a page post back.
but i dot need post back.
So i want handle click event of group of dynamically creatd buttons without post back.

Kindly help.
0
Any one knows how to populate pdf fields using jquery? I have all of the data on browser and I want to populate values into pdf fields.
I know we can use c#, itextsharp but there is no point for me to use server side language if jquery can do the faster job for me...

Let me know if you know how....
0
My form has checkboxes with user roles, and a select box with users. I need a select box to repopulate based on the checkbox value(s) when clicked. The checkboxes allow selection of either "all" (in which case the select options need not change) OR any combination of "cm", "adv", "cd" values. Once the checkbox(es) get clicked, the select box should repopulate dynamically (all this before form gets submitted).

<cfquery datasource="datasourceName" name="qry_staff">
    SELECT userID, lastname + ', ' + firstname AS staffName
    FROM   userTable
    WHERE  role IN('cm','adv','cd')
    </cfquery>

<form>
<input type="checkbox" name="assignedRole" id="checkedAll" value="all">All<BR>
<input type="checkbox" name="assignedRole" id="assignedRole" value="cm" class="checkSingle">Case managers<BR>
<input type="checkbox" name="assignedRole" id="assignedRole" value="adv" class="checkSingle">Advisors<BR>
<input type="checkbox" name="assignedRole" id="assignedRole" value="cd" class="checkSingle">Career developers

<select name="staff>
<cfloop query="qry_staff" multiple="multiple">
<cfoutput>
<option value="#qry_staff.userID#">#qry_staff.staffName#</option>
</cfoutput>
</cfloop>
</select>
<input type="submit">
</form>

The entire page must not reload every time a user changes text box selection(s). I haven't yet been able to find a suitable solution. I'm jquery knowledgeable, but not so much Ajax. What I've been able to find makes me think Ajax would really be the way…
0
Hi, is it possible to sort xml data in a classic asp page using AJAX and querystrings??

xml code

<?xml version="1.0" standalone="yes"?>
<DocumentElement>
<Data>
<EnsembleID>23331</EnsembleID>
<BookCode>NWP-MV</BookCode>
<Issue>Aeon Financial 2019</Issue>
<LongBLPTicker>QZ3838484 Corp</LongBLPTicker>
<ShortBLPTicker>8570 JT Equity</ShortBLPTicker>
<LongPos></LongPos>
<StubPos>600000000</StubPos>
<SIV>0.927</SIV>
<Parity>91.95</Parity>
<Premium>0.173</Premium>
<IV>99.23</IV>
<LongPx>107.81</LongPx>
<PxChg>0.05</PxChg>
<TheoChg>0.03753</TheoChg>
<StubPrice>8.59</StubPrice>
<ShPxChgPer>0.001277</ShPxChgPer>
<SLH>0.009</SLH>
<CurDelta>0.32</CurDelta>
<ImpDelta>0.444</ImpDelta>
<TheoDelta>0.417</TheoDelta>
<FutHdg1>-14.13</FutHdg1>
<ImpVolCB>0.242</ImpVolCB>
<ImpVolStub>0.242</ImpVolStub>
<V90D>0.198</V90D>
<DPnL>0.4</DPnL>
<WPnL>3</WPnL>
<MPnL>1.2</MPnL>
<YPnL>-4.9</YPnL>
<NetPnL>16.8</NetPnL>
<DayTE>-0.1647</DayTE>
</Data>

Open in new window




Page code...


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Summary</title>
<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: left;
    padding: 8px;
}
tr:nth-child(odd){
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:10px;
	background-color: #eef6ff
	}
tr:nth-child(even){
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:10px;
	

Open in new window

0
i have asp.net/c# web form project and on code behind we use about of the [webmethod]. And I want to use ajax updatepanel
to prevent auto fresh when the asp.net onclick button is clicked.

However, my programmer told me that ajax updatepanel won't work in this case. Please share with me if this is truth.

Thanks
0
The link:

http://www.kingislandrenewableenergy.com.au/kiapp-dashboard/dashboard.html

produces a chart that seems to be constantly updating. I would like to do something similar.

I used a sniffer - HTTP Analyzer V7 - to try and understand how the requests are made so that data is sent to the web page. However, I have not been able to find the GET or POST that should be periodically getting more data. I am lost.

How does this thing work?
0
Iam new to MVC,.On Home page I have a Html form (Index.cshtml) with  2 drop down displaying city from and city to.  i want to bind html grid on other view (Search.cshtml) depending upon my selection using Ajax MVC 5 iam using stored procedure taking 2 parameters, city from and city to. Iam also using EF 6 Database First .
I do not know where iam Missing. Also Getting Null Parameters. Please resolve my issue.

HomeController.cs

namespace DropinCabs.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        DropinEntities _cNx = new DropinEntities();
        [HttpGet]
        public ActionResult Index()
        {
            var List = _cNx.GetCities().ToList();
            SelectList list = new SelectList(List, "CityID", "CityName");
            ViewBag.CityList = list;
            return View();
        }
       
        public JsonResult Search(int? CityFrom, int? CityTo)
        {
           
            return Json(_cNx.Getsearchresult(CityFrom, CityTo), JsonRequestBehavior.AllowGet);
        }

    }

}

Search.cshtml
@section Scripts
{
    <script type="text/javascript">

        (function ($) {
            $.ajax({
                url: '@Url.Action("Search")' + Cityrom + CityTo,
                type: "POST",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (data)
                {
                    var items…
0
Vote for the Most Valuable Expert
LVL 7
Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

I have an AJAX Call that runs a function and it all works,  However, it does it does not return the Success message.  My code.
<html>
 <form id="unjoin" method="post">
                    <input id="email" name="email" type="hidden" value="<?php echo $unsub; ?>" />
                <input type="submit" name="submit" id="submit" value="Click Here To Unsubscribe">
                </form>
            </div>
            <div id="unsubscribe_bye" class="unsubscribe_bye">

            </div>

<script>
<script>
    $(document).ready(function () {
        $("#unjoin").on('submit', function (e) {
            e.preventDefault();
        });
        $("#submit").click(function () {

            $.ajax({
                url: 'includes/unsubscribe.php',
                data: $("#unjoin").serialize(),
                type: 'POST',
                dataType: 'JSON',
                success: function (response) {
                    $("#unsubscribe_bye").html(response.success);
                    console.log(response);
                    $("#unjoin")[0].reset();
                }
            });

        });
    });
</script>

<?php
$success = "";
$return = new stdClass;

$e = $_POST['email'];

$sql = "SELECT subscriber_id AS subscriber_id FROM test_table WHERE email = :email";

$pdos = $pdo->prepare($sql, array(PDO::ATTR_CURSOR => PDO::CURSOR_SCROLL));

$pdos->bindParam(':email', $e, PDO::PARAM_STR);

try {
    $pdos->execute();
    $rows = $pdos->fetch();
    $num = 

Open in new window

0
Hello,

First of all sorry for my bad english! :)
I would like to make a keyword suggester with elasticsearch and symfony3.
My users want to publish a post. When they type the title of the post, it launch an ajax call at the 'focusout' of the title field.
This ajax call analyse the text and split the string at withespace. Then it launch a elastic query for each substring.
Its working but its a lot of request for nothing...
I would like to make a full text search and elastic gave me the keywords he found in the text.
For exemple:
Title: I would ike to drive a bike in the city to go see the boat.
Elastic give : 'bike', 'city', and 'boat'

Experts Exchange make this autossuggest keyword with the title.

If someone can help me :)

Thank a lot,
best regards.
Quentin,
0
Hello Experts,

Using PHP, what is the best way to verify the user’s information, modify the information if necessary, and then process their information?

NOTE: For this particular question, I am not concerned about checking if the form is completely filled out. That is the easy part. If I’m thinking correctly, that is only a matter of checking if each $_POST variable is set.
0
Hello Experts,

I am working on a car seat rental program. Upon checking the check boxes of the seats the user wants to rent and clicking the "create rental agreement" submit button, a PDF file is generated which contains all of the renter's information. In addition, the database which contains an inventory of the available seats is updated to remove the seats from the available inventory.

The problem/issue I am running into is:

Upon clicking the "create rental agreement" submit button and then clicking the browser's back button, the rented seats remain checked (see the embedded image).

What is the best way to prevent this from happening? Can I auto refresh the page or eliminate the user's back button? What is the best practice for something like this?

I am open to any ideas.

Already Rented
0
on my form, i want to be able to insert one or more phone numbers. i created a dynamic input field to get this done but, when i insert more then one phone number and submit, i can only see one phone number in the database. i want the phone number to be inserted like this ( firstnumber,secondnumber,thirdnumber....). thanks in advance for the help. see the code:

this is the html and the script to generate the dynamic input
<table id="nameBoxWrap">
					<tr id="nameBox">
						<input type="text" id="phonenumber" name="phonenumber[]"  placeholder="phone number">
						<input type="button" value="ADD MORE" onclick="addNameSection()" ><br>
						
					</tr>
					
				</table>
				
            </div>
			<input type="hidden" id="addSectionCount" value="1" name="addSectionCount" >

<script>function addNameSection(){
	var addSectionCount=$("#addSectionCount").val();
	addSectionCount++;
	$("#addSectionCount").val(addSectionCount);
	$("#nameBoxWrap").append('<tr id="nameBox'+addSectionCount+'"><td></td><td><input type="text" placeholder="phone number" id="phonenumber'+addSectionCount+'" name="phonenumber[]"></td><td><input type="button" value="REMOVE" onclick=removeNameSection("'+addSectionCount+'")></td></tr>');
}	</script>

Open in new window


this is the js script to submit the form
<script>
//script that manage form data submission to database

    $(function(){
        $('#submitdata1').on('click',function(e){
            e.preventDefault();  // do not allow the default form 

Open in new window

0
I need to execute an async function for a set of data values.  I thought that the way to go would be to use Promises.  I have some of a sample of using what seems like a framework that I could modify to call my function with.  Here is the "framework". It doesn't run and tell me that Promise is not defined.

Any advise on this would be greatly appreciated.

Here is the "almost working" framework.
<!DOCTYPE html>
<html>

<head>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" data-semver="3.1.1" data-require="jquery@*"></script>
    
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      alert('hi');

      $('#btnWait').click(function() {
        doAsync().then(function(response) {
          alert(response);
        });
      });


    });



    // Code goes here
    function timeoutPromise(time, s) {
      return new Promise(function(resolve) {
        setTimeout(function() {
          resolve(Date.now() + " " + s);
        }, time);
      });
    }

    function doSomethingAsync(a, p) {
      return timeoutPromise(a, p);
    }

    function doSomethingElseAsync(b, p) {
      return timeoutPromise(b, p);
    }

    function doMoreAsnycStuff(c, p) {
      return timeoutPromise(c, p);
    }


    function doAsync() {
      try {
      
        //var promises = [doSomethingAsync(1000), doSomethingElseAsync(2000), 

Open in new window

0
POST 500 Internal Server ErrorProblem :
This is what I want :
When the link “Register” i.e “1” is clicked, a modal window opens. Therein after filling all the details and after pressing button “Signup” i.e “2” all data should be saved into database and the place where “Please wait…” is shown, it should show “Done” which will happen only when the process completed successfully
This is what’s happening :
After all the required details are filled and when the “Signup” button is clicked, a message is flashed on the screen showing “Something is wrong”. After through checking I came to the conclusion that “ajax part is not working”.  The same code is working perfectly on my localhost ie on my system but after uploading it is showing error : " 500 Internal Server Error". Code is shown below :
						<div class="modal-footer form-group">
							<div class="col-xs-8">
								<div id="regmesg" class="supmsg pull-left"></div>
							</div>
							<div class="col-xs-4">
								<button class="btn btn-default" data-dismiss="modal">Close</button>
								<button type="button" id="btnmodsignup" class="btn btn-primary" onclick="InsSignup()">Signup</button>
							</div>
						</div>

Open in new window

Code of InsSignup() function :
			function InsSignup(){	// Sign up Button 
				alert("1");
				$('#cboxtc').prop("checked", false);
				$('#btnmodsignup').attr("disabled", "disabled");
				$('#regmesg').html('Please wait....');
				alert("2");
				var catg = $.trim($('#catgddl').val()); 

Open in new window

0
I have an application which allows users to drag & drop files to a zone which is working well.  The problem is I want the form data to be sent to a WEB API 2 controller and I can't work out how to do this.

.NET:
        public void Upload(HttpPostedFileBase file)
        {
//Just a point to debug
            var test = "test";
        }

Open in new window


JS:
function UploadFiles() {
    var formData = new FormData();
    formData.append("file", viewModel.FilesToUpload()[0], 'test.jpg');
    
    $.post("/api/ApiDocument/Upload", formData)
                    .done(function (data) {
                        alert('done');
                    })
                    .fail(function (e) {
                        alert('fail');
                    });
}

Open in new window


Form:
upload.png
0
I have a web part page displaying 5 web parts. Four of the web parts (Efforts, Phases, Capture Points & Areas) are "provider" web parts, and come from lists that are the sources of 4 lookup columns in the 5th "consumer" web part (Lessons Learned).

The provider web parts are displaying the Title column from the lists.

The Using Javascript/jQuery, I "connected" the 4 provider web parts to the consumer web part, such that when you click on a Title column value, the consumer web part is filtered to show only those records that have the clicked value in the relevant metadata column.

All that is working very nicely.

Now, my requirement is to go one step further, and display the number of items that will be displayed if you click on a Title column value in any of the 4 web parts. If there are none, a "0" should be displayed.

I've constructed a lists service query that successfully returns the number of items that exist for a given, hard-coded, metadata value:
[SiteURL]/_vti_bin/listdata.svc/[ListName]/$count?&$filter=Effort/Title eq 'AAA'

So, the goal is to display such an item count beside the corresponding provider web part value, such as:
Efforts web part:
AAA (10) //assuming there are 10 items in the consumer web part tagged with Effort 'AAA'

Now, I'm bumping up against the current limit of my abilities.

I know that I need code (javascript, rest, ajax, json) for each provider web part with looping to cycle through all of the TD cells that have …
0
Free Tool: Subnet Calculator
LVL 11
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Im working with ajax toolkit tabs it is working properly but when i am adding bootstrap css files the tabs css  overwrite
Can u Help me to SOlve this problem?
Thanks in advance
0
in my partial view, I have used some jquery code for submitting my form.but I got this error.
The required anti-forgery form field"__RequestVerificationToken"
is not present. as you see I have added @Html.AntiForgeryToken() in my partial view and as well I have added [ValidateAntiForgeryToken] on my controller. but I got the error again.I have read all of the questions on the internet but they couldn't help me.

@model Dentistry.Areas.ViewModels.UserViewModel

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
    </button>
    <h4 class="modal-title custom_align" id="Heading">ویرایش کاربران</h4>

</div>

@if (Model != null && Model.UserId != string.Empty)
{
    <div class="modal-body" id="editModal">
        <form id="#myForm">
          @Html.AntiForgeryToken()
            <div class="form-group">
                @Html.HiddenFor(a => a.UserId)
            </div>
            <div class="form-group">
                <label>نام کاربری</label>
                @Html.TextBoxFor(a => a.UserName, new { @class = "form-control" })
                @Html.ValidationMessageFor(a => a.UserName)
            </div>
            <div class="form-group">
                <label>نام</label>
                @Html.TextBoxFor(a => a.FirstName, new { @class = "form-control" })
                @Html.ValidationMessageFor(a => a.FirstName)
          

Open in new window

0
I've actually been able to get this working on the editor in pages and posts using the code below. But haven't been able to get it to work for the new editor added to text widgets. I read that wordpress is using jQuery now for those text widgets, but even trying this without a hook, just adding the script sitewide to test doesn't work:

<script type="text/javascript">
jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) {
    if ( editor.settings.toolbar1 && -1 === editor.settings.toolbar1.indexOf( 'blockquote' ) ) {
        editor.settings.toolbar1 += ',blockquote';
    }
});
</script>

Open in new window


I tried that just to see if the new method wordpress says you can use to add more buttons would even affect the editor in the text widget, but it doesn't even add the blockquote icon as expected. So of course I can't poke around to try to figure out what would target the link option.

This is the code that does work for the editor in pages and posts:
<?php
function newtablink()
{
 ?>
<script type="text/javascript">
    jQuery(function () {
       jQuery('input#wp-link-target').prop('checked',true);
    });
</script>  
<?php
}

add_action( 'before_wp_tiny_mce', 'newtablink' );
?>

Open in new window


Anyone have any thoughts or suggestions on how to go about this for the widget? Below is a screenshot for a visual of where and what I'm trying to work with.
(If you wonder why we want to do this: we have some sites that have more external links than internal. So we want the people adding or editing content or widgets to be able to just enter the url without having to open in extra settings box. We don't want to add a plugin that automatically tries to auto add the target="_blank" as pages render because we want to still have individual control. Some of the people editing have very limited skills, so we want to try to simplify anything we can for some of the sites.)

Screenshot of the box that opens when adding a link in the editor.
0
Hello,

I have piece of code here. I am trying to create something like a quiz application. In  <h4>Add question</h4> part, I can add a question if I want to and I store all the details I entered into the database by making an ajax call. Upon success, this piece of code gets replaced by the same code with other data so that the user can enter all the details. What I am trying to do is once I add a question in 'Add question' part, then I should be able to display it throughout the quiz. How can I do a post for new_questions in ajax and send it to the controller?

Can anyone suggest me how to do proceed with this?

Any kind of suggestion would be helpful.
   
<?php
foreach($substeps as $row) {
 ?>
 <div id='img_div'>
      <h2 id="stepslist_<?php echo $row->stepid;?>" class="step"><p><?php echo $row->stepname;?></p></h2>
      <img src='http://localhost/project/uploads/<?php echo $row->image; ?>'>
</div>
<?php } ?>
 <?php
      foreach($questions as $each){
      ?><br><br>
      <input type="text" name="questions[]" class='form-control' id="questions_<?php echo $each->questionid; ?>"  value="<?php echo $each->questionname; ?>" disabled/><br/>
   
    <h4>Add question</h4>
    <input type="text" class="form-control" name="newquestion[]"  id="new_questions_<?php echo $each->questionid; ?>" /><br>
    <h4>Answer:</h4>  <select class="form-control" name="answer[]" id="answer" required>
 <option value="">Select</option>
 <option value="no">no</option>
 <option 

Open in new window

0
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
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

AJAX

12K

Solutions

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.