We help IT Professionals succeed at work.






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.


How can I send back my model info to the dialog box ounce I submitted its form.
right now it's asking me to save json file after my submission

        public JsonResult RulePartialView(CABRRulePartialViewModel model)
            model.SelectGroupDataListSource = _careAdvanceBusinessRulessService.GetGroupse();
            model.SelectGroupDataSource = _careAdvanceBusinessRulessService.SelectedDataFromGroup(model.HiddenFieldForSelectedCondition);

            return Json(model, JsonRequestBehavior.AllowGet);

Open in new window

my dialog box partial view

@model BCUW.Model.CABusinessRules.CABRRulePartialViewModel

<script >
    $(document).ready(function () {



        $("#ConditionSelect").change(function () {
            var GetValue = $(this).val();

        function getOperatorOptions(isFilter) {
            return {
                buttonWidth: '170px'

        function getGroupOptions(isFilter) {
            return {

Open in new window

I have a large table (1000 records) that is generated from a SQL database and PHP.

I have a button on each row that opens a fancybox screen overlay that contains information from another table, based on the id of the row that contains the button. This overlay table could contain 1000 records.

Therefore, the whole page could contain 1,000,000 (1000 X 1000 records), which would take too long and kill the server etc.

My code displays the 'master' row and the 'slave' rows as follows:

//master table header
echo "<table id='download' class='tablesorter'>";
echo "<thead><tr>";
echo "<th>Id</th>\n";
echo "<th>...</th>\n";
echo "<th>Order Ref</th>\n";
echo "</tr></thead><tbody>";

//master table sql
$sql= "select  [id], [orderref],.... from table";
$result=sqlsrv_query($conn, $sql);
while($row=sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {

//master table content
echo "<tr>";
echo "<td>".$row['id']."</td>\n";
echo "<td>...</td>\n";

//button to show overlay with slace table
echo "<td>";
echo "<a data-fancybox data-src='#hidden-content".$n."' href='javascript:;'>".$row['orderref']."</a>";
echo "<div style='display: none;' id='hidden-content".$n."'>";

        //overlay content
        echo "<h1>Slave Table for Order ".$row['orderref']."</h1>";
        echo "<table id='slave' class='tablesorter'>";
        echo "<thead><tr>";
        echo "<th>Id</th>\n";
        echo "<th>...</th>\n";
        echo "<th>Order Ref</th>\n";

Open in new window


I need your help!!

My javascript:
 var URLname2 = document.location.href.match(/.*\/(.*)$/)[0];

the variable "URLname2" generate this path below

what I want for the "var URLname2" is to pull just the word "Rule" from the whole path

I'm not sure how this is done, but I tried Substring and didn't work. 

Thank you so much for your help, 

Open in new window

I need to capture the exact time and write it to a sql server db via a classic asp web page.  I have a page that does that now...sort of.  It uses the Now() asp function.  The problem is that, if the internet happens to be slow where we are, by the time the command goes to the server, the time may not be as precise as we need.  Is there a way to capture that time client side (using javascript for instance) and then write it to the server, all with one button submit?

Thanks in advance for your help.
Hi Experts,

Can you anyone see why the Currency converter stopped working for some reason at https://www.aces-project.com/index.php/live-apps/

If you place a breakpoint at line 76 on https://www.aces-project.com/wp-content/themes/aces-project/live-apps.js, then run it, you'll notice that  I set my url appropriately on  Li. 35, but within my AJAX Call neither my url is appended from Li. 44 nor any data  is sent to the php script from Li. 49-52

Any help would be greatly appreciated.
Thank you!
Good moning !

I use this code to edit the quantity of products from a button. With Chrome it goes very well but with Firefox it sends me an ajax error.
This happens when I change quantities quickly.
If I click on Chrome several times, everything is fine, but on firefox it crashes.
Can you guide me please?

function BTN_EDT(i){
	var $button = $(this);
	var val_R = document.getElementById("ARR_NumId_" + i).value;
	var val_Q = document.getElementById("ARR_Quantite_" + i).value;
		type : "POST",
        url: '_produit-update.php',
        cache: false,
		data: {val_R:val_R, val_Q:val_Q},
        error: function(e){console.log('Ajax Error',e);alert('Erreur Ajax');},
        success: function(response){console.log('Ajax Success',response); location.reload(true);}

Open in new window

Thank you in advance
I am trying to use this jQuery plugin but I cannot retrieve the entered data and associated emoji to send these data to a database via an AJAX call.

I can see the text and the emoji in the emojioneArea in the DOM but can't figure out how to extract them into a JavaScript variable.

I believe that I have followed the guidance in the emojioneArea GitHub examples but for me it does not work.  If I try to use the setText or getText methods the browsers tell me that they are not valid functions.

The screen scrapes attached are from IE11 but I have the same issue with Firefox.

Any assistance will be most appreciated and thanking you in anticipation.


From the DOM
The code I am trying
P.S., The alert returns no data but the length is correctly one.
I'm trying to post to an HttpHandler ashx file with parameters.

function sendClickData(methodName,paramValue) {
    try {
        // create web service param object
        var passUrl = "SetGridDefaults.ashx";

        // save data to web service using an ajax post method
            type: "POST",
            url: passUrl,
            data: "MethodName=SetDefaultGridView",
            success: function (data) {

            error: function (error) {
    } catch (e) { }


Open in new window

In the data row, I am passing values to be retrieved as query strings:

In my ProcessRequest, I am retrieving the value:

  Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

        Dim method As String = context.Request.QueryString("MethodName").ToString()

Open in new window

When I run it, it gives me an error that the MethodName is null on the request.querystring line of code:
>>An exception of type 'System.NullReferenceException' occurred

This code was from an original article here:
original code

The only thing I see different is that it says to include an older version of jquery - version 1, whereas I am using version 3.

Also, in addition, I would like to pass two values if possible.

And yes, I know I can use a web service or API, but I was hoping I could use this, since it's just a very simple request.


Hi, I have a PHP script which calls another PHP script via a jQuery ajax call.  I can see that the call is successful and that there is a proper response from the network activity.  However I am having trouble processing that response in the calling PHP/JavaScript code.

Here's my attempt:


From the network activity I see the response is:

["data1","data2"] and this is what I am expecting (actual data not shown)

But I cannot 'see' nor process these data in the success data in the calling code shown above.  The alerts do not fire.

Any guidance will be most appreciated and thank you in anticipation.
We are getting a CORS error when trying to run and API request from one of our subdomains to another. I saw an htaccess fix...

<ifmodule mod_headers.c="">
   SetEnvIf Origin "^(.*\.MyDomain\.com)$" ORIGIN_SUB_DOMAIN=$1
   Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
   Header set Access-Control-Allow-Methods: "*"
   Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization"

I added that to the htaccess file of where the API request was going *to*, but we still get the error. Does it need to go in the htaccess of the site the request is coming *from*? Or both? In other words, does the htaccess stuff need to live where the request originates or where the request is processed? Or both?
I have the following ajax codes, and want to send Json data to MVC Controller.
Can you show me how to do that  on MVC Controller?

function Submit(domain) {
    //alert("Thank You");
    var x = $('#formdiv *').serializeArray();      
    var data = {};
   $.each(x, function (i, field) {
        data[field.name] = field.value;
    var json = JSON.stringify(data);   
    $(document).ready(function () {
            url: domain + "/Api/ReceiveJson",
            type: "POST",
            data: {json},
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (data) {alert('Success');},
            error: function (msg) { alert(msg); }
    return false;

Open in new window

Hi Guys,

We are having an issue with trying to connect to a 3rd party application from our website

We  have tried sending requests to the Azpiral sandbox server using Ajax GET and POST methods but i am getting a CORS error access control allow origin not present. CORS is installed on our domain https://ohehirsstudents.ie/.
Azpiral sandbox url for testing: http://sandbox.azpiral.com/PBPartnerWS/PBPtnrServices_1_11.asmx
WSDL file and docs are present in the attached Sligo IT zip file.

I can provide if really nescessary, i have spoke to their support and they are telling me that they hav enever seen an issue like this
Hi Experts

My client has Google Analysts for 2 primary domains, and I have a custom carts in other sub domains.

How do I go about and send purchase info to Google Analytics? Do I need to setup the Product IDs within Google? And, is this even possible considering I'm using sub domains.

The intention is to keep the existing code.

I got a data object like below. This is a part of RestAPI method return. But when i call REST API using Jquery AJAX , I am getting Name, Address correct but the List of ProductName is coming is empty.

Is there any reason whey List is empty. I checked the method it is having the values but at the side of Jquery Ajax response i am getting it as empty.

public class TotalRectificationOverTime
        public string Name;
        public int Address;

        public List<string> ProductName;

Error with resources when using ajaxtabcontainer.  I have other ajaxcontrols on the page (calendar) that have not had a problem, but after adding the tab container to the page I get an error as follows.

Error Rendering Control - Table2 An unhandled exception has occurred.
Could not find any resources appropriate for the specified culture or the neutral culture. Make sure "AjaxControlToolkit.Properties.Resources.NET4.resources" was correctly embedded or linked into assembly "AjaxControlToolkit" at compile time, or that all the satellite assemblies required are loadable and fully signed.

Open in new window

Below is the code:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
<asp:Table ID="Table2" runat="server" Height="70%" Width="100%">
                <asp:TableCell ID="TableCell22" RowSpan="6" Width="20%" VerticalAlign="Top" HorizontalAlign="Center" 
                BorderStyle="Inset" BorderWidth="2" BorderColor="Gray" runat="server" Height="100%" CssClass="CellPadding">
<asp:Panel ID="Panel2" runat="server">
                    <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" BackColor="Black" BorderStyle="None" 
                        Font-Names="Arial" Font-Size="10" ForeColor="#FFFFCC" AutoPostBack="True" TabStripPlacement="Bottom">
                        <ajaxToolkit:TabPanel runat="server" ForeColor="#FFFFCC" Font-Size="10" 

Open in new window


I have set up a very simple update panel page as I was getting a full postback each time on a new site I have set up in VWD, it refuses to update just the update panel, but if I copy over the page to the older site it works fine.

They have identical web configs and I'm not using a master page so no interference there.

Same on the live server, one work, one doesn't - any ideas?


I am quite confused as to what I can do and what I cannot do within the UploadComplete event of the AjaxFileUpload control.

There are 2 ASPX Label controls which are assigned values within the UploadComplete event, however, the assigned values do not appear on the page after the event completes. The uploaded file is saved to the designated directory, however.

I'm including the ASPX, the VB code behind and the web.config files as follows:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>

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

			<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

			<asp:Label ID="Label1" runat="server"></asp:Label>

			<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" AllowedFileTypes="jpeg,jpg,gif" />

			<asp:Label ID="Label2" runat="server"></asp:Label>


Open in new window

VB Code Behind
Imports AjaxControlToolkit

Partial Class _Default
	Inherits System.Web.UI.Page

	Private Sub AjaxFileUpload1_UploadComplete(sender As Object, e As AjaxFileUploadEventArgs) Handles AjaxFileUpload1.UploadComplete

		Label1.Text = "Here we are 1."

		AjaxFileUpload1.SaveAs("C:\inetpub\ClientWebs\AjaxFileUploadSync\Images\" & e.FileName)

		Label2.Text = "Here we are 2."

	End Sub

End Class

Open in new window

<?xml version="1.0" encoding="utf-8"?>


		<compilation debug="true" targetFramework="4.0" />
        <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />



			<add name="AjaxFileUploadHandler" verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit" />



Open in new window

Any assistance you might provide would be most helpful.

Much thanks,
David Bach
Hello !

I ask your help to be able to have the following format in an input : a1B2-c3D4-R2EJ-s1fe
This is not a credit card format, but a gift voucher.
The user can copy / paste the code or simply write it.
I tried to dig a little but I'm not well advanced.

Can you help me please ?
thank you in advance
I'm doing an ajax call to a ColdFusion function to return a query. It should return a single record with three columns for an event's title, description, and date. I want to place each of those three pieces in their corresponding divs. Everything is working fine but I can't figure out how to access the results, and the options I've Googled up have failed me. How do I get the JSON equivalent of CF's queryName.columnName? Thanks!

The jQuery I'm using is as follows:
		 var id = this.id;
		 var splitid = id.split('_');
		 var eventID = splitid[1];
		 // AJAX request
			type: "POST",
			url: "/cfc/calendar.cfc?method=getEventAjax",
		  dataType: "json",
			data: {
			 returnFormat: "json",
			 eventID: eventID
			success: function(response){ 
				// Add response in Modal body
				$('#eventTitle').html(what goes here for the title?);
				$('#eventDescription').html(what goes here for the description?);
				$('#eventDate').html(what goes here for the date, and what about formatting?);
				// Display Modal
			error: function (response) {
        $("#modal-body").html("This event could not be loaded.");

Open in new window

The function is simple:
<cffunction name="getEventAjax" access="remote" returntype="query" hint="returns info for single event">
		<cfargument name="eventID" type="numeric" required="yes">
		<cfquery name="qGetEvent" datasource="#APPLICATION.ds#">
			SELECT eventTitle, eventDescription, eventDate FROM calendar
			WHERE ID = <cfqueryparam value="#ARGUMENTS.eventID#" cfsqltype="CF_SQL_INTEGER">
		<cfreturn qGetEvent>

Open in new window

In the console log I'm getting
{COLUMNS(3), DATA: Array(1)},
DATA: Array(1)
0: Array(3)
0: "Radio Interview with Lucy Ann Lance of 1290AM"
1: "<p>Interview will take place at 8:20am EST</p>"
2: "July, 29 2019 00:00:00"
After attempting to edit a mysql record in node.js, I am receiving null results when I review the mysql query report and the affected rows are returning zero.  There is no change to the record. However, the backend says that the results are not null, the sql query is not null and that the req.body for all the values are not null.

Here is the mysql general query log:

190717 16:42:40	    3 Query	SELECT * FROM stores
		    3 Query	SELECT * FROM stores
		    3 Query	SELECT * FROM stores
190717 16:42:42	    3 Query	SELECT * FROM stores
190717 16:43:13	    3 Query	UPDATE stores SET `station` = NULL, `address` = NULL, `monthly c-store sales` = NULL,`operator` = NULL, `top sku` = NULL WHERE `id` = NULL

Open in new window

These are the results returned on the frontend:

affectedRows: 0
changedRows: 0
fieldCount: 0
insertId: 0
message: ""
protocol41: true
serverStatus: 2
warningCount: 0

Open in new window

However, the backend says that the values are not null after putting in the following code:

if (results !== null) {
        console.log('results is not null');
        console.log('results is null');

      if (sql !== null) {
      console.log('sql is not null');
      console.log('sql is null');

      if (req.body.Station !== null) {
        console.log('req.body is not null');
        console.log('req.body is null');

Open in new window

Here are the results.....
{ station: 'Hopefully',
  address: 'this',
  monthlycstoresales: '200',
  operator: 'will',
  topsku: 'work',
  id: '7' }

results is not null

sql is not null

req.body is not null

Open in new window

Here is the backend code:

Open in new window

Dear Experts, I'm trying to learn How to Make Load More Results From Database using jQuery,Ajax,PHP and MySQL

I found this simple code on the web which is suppose be working but I have the below error.

Warning: mysqli_fetch_assoc() expects parameter 1 to be mysqli_result, bool given in ....

I tried a few things but it didn't work. What do you suggest I should do?

On the top of my two pages I have database connection, and my code is :
$con = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                $("#load").click(function () {

            function loadmore()
                var val = document.getElementById("result_no").value;
                    type: 'post',
                    url: 'getrecord.php',
                    data: {
                        getresult: val
                    success: function (response) {
                        var content = document.getElementById("result_para");
                        content.innerHTML = content.innerHTML + response;
                        document.getElementById("result_no").value = Number(val) + 2;

Open in new window

I have written my first Spring MVC controller. While I have no problems with GET requests, I am still having some issues with POST methods.

This is the code in my controller:
@RequestMapping(value = "/editorsWriters", method = RequestMethod.POST)
    public <HttpServletRequest> ResponseEntity<List<FreelancerContactWriterListView>> getEditorsWriters(
                                                                    @RequestParam int[] languageIds, 
                                                                    @RequestParam int[] summaryGroupIds, 
                                                                    @RequestParam String[] writerStates,
                                                                    HttpServletRequest request, HttpServletResponse response) {

        WriterState[] writerState = Arrays.copyOf(writerStates, writerStates.length, WriterState[].class);

        List<FreelancerContactWriterListView> writers = writerService.getActiveWriters(languageIds, summaryGroupIds, writerState)
                                                                    .map(writer -> this.convertTo(writer))

           return new ResponseEntity<List<FreelancerContactWriterListView>>(writers, HttpStatus.OK);

Open in new window

and this is the JavaScript code:

 $("#search").on("click", function(e) {
            var languages=$("#languages").val();
            var summaryGroups = $("#summaryGroups").val();
            var writerStates = $("#writerState").val();
            var myObject = new Object();
            myObject.languageIds = languages;
            myObject.summaryGroupIds = summaryGroups;
            myObject.writerStates = writerStates;

            var myData = JSON.stringify(myObject);


                method: 'POST',
                dataType: 'json',
                data: myData,
                contentType: "application/json"

Open in new window

This is the JSON sent:


Open in new window

The problem is that I get a POST 404 (Not Found) error in the JavaScript console
POST https://dev1.getabstract.com/api/pps/contactFreelancers/editorsWriters 404 (Not Found)

and the following message in the terminal of my IDE:

2019-07-14 22:49:06,923 DEBUG [BaseControllerExceptionHandler] Page not found for the URL https://dev1.getabstract.com/api/pps/contactFreelancers/editorsWriters with query null: Required int[] parameter 'languageIds' is not present

Open in new window

So it is reaching or sending the POST to the correct URL, but what am I doing wrong?

Is the way I have created the data wrong?
languages, summaryGroups and writersStates are all arrays and I am putting them together into one JSON.

Thanks for your help

I have a search field which provides data from a database for the user. It works well but the autocomplete coding doesn't.  The station names are suppose to automatically show. Please see the code below...

<h3>Search Box</h3>
    <label>Type Station Name</label>
    <input id = "stationBox" type="text">
    <ul id="autoList"></ul>
    <button id ="stationOne" >Submit</button>
    <div id="searchResult"></div>

Open in new window

//Inserting information in a search bar--
  $(document).ready(() => {
    $('#stationOne').click(() => {
      var requestUrl = 'stationNames/' + $('#stationBox').val();
      console.log('making ajax request to', requestUrl)
          success: (data) => {
          console.log('You received some', data);
          var search_data = '';
            $.each(data, function (key, value) {
              search_data += '<li>ID: ' + value.ID + '</li>' +
                '<li>Station: ' + value.Station + '</li>' +
                '<li>Address: ' + value.Address + '</li>' +
                '<li>Sales: ' + value.Monthly_CStore_Sales + '</li>' +
                '<li>Operator: ' + value.Operator + '</li>' +
                '<li>Top SKU: ' + value.Top_SKU + '</li>' +
                '</<li>' + '<br/>';


Open in new window

Good Morning Dear Expert,

I'm actually using Cfswitch expression to play several module on the same page with a page's "refreshment" when i submit the form.. i would like to use Coldfusion and Ajax for a different experience.. Is it possible on a input or submit Click, to call an Ajax function on the same page and in this function, change the variable of the CFcase expression to play a different mudule ?

Any response will be helpful..
I am using jQuery   I have a a dropdown box and the the code is in a dialog box that opens from an onclick event(). I have a .change() event that fires twice.  I know this problem is caused by the dialog box because when I remove  the dialog box it works fine

Then at a later point the user selects one of these values

and I detect the change with this

$('#Code').change(function () {
				      var value = $(this).val();
				      var text = $(this).find(":selected").text();
				      alert(' Text = ' + text  + '  value = '  +value  );
                                      .... do more stuff

Open in new window







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.

Top Experts In