Advertise Here

Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

AJAX

12K

Solutions

Content

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.

Implementation Ideas

Hello Experts,

This post is more or less to pick your brain about things/ideas I should implement into my current system. Basically, the only requirement for my system was turn my employer's paper-based car seat rental program into a paperless system.

Here are screenshots of my system:

Index.php

Rental-form.php

Rent-success.pdf

(See attached PDF)

Return-form.php

Right now, the system does the following:

Presents the user (coworker) with a choice to either rent or return a car seat;
Provides an inventory of any available seats (from a MySQL database);
Generates a PDF version of our current rental agreement using FPDF;
Emails the generated PDF to the renter and another department in my office (not implemented yet); and
Presents the user with an HTML table in order to return any rented car/booster seats.

Being that I am a hobbyist php programmer, I am kind of in the dark when it comes to certain things. My career has nothing to do with programming, either. I enjoy PHP and took this task upon myself for fun.
rent-success.pdf

6 Comments

Concerto Cloud for Software Providers & ISVs

LVL 4

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

I am trying to do something similar to the app specs below. I'm looking for a sample. I thought I would use Asp.net Core MVC, Ajax and SQL server. I'm looking for a sample that can show me each step.

It's pretty simple.
1. My app has a form with 4 fields. (Vin, Make, Model, Year)
2. I input Vin in field 1 (Vin)
3. I GET from a third party Rest API JSON by passing the Vin to a URI string. The string will pass Vin I input and an API key
4. The API returns (Make, Model, Year)
5. I want to fill the additional form fields with (Make, Model, Year)
6. Finally, I want to save all fields (Vin, Make, Model, Year), to my Database.

I have been searching for an example similar. I did find the Weather app example, but it's not complete. It's just part of it.
Weather example: https://www.codeproject.com/Articles/1180283/How-to-Implement-OpenWeatherMap-API-in-ASP-NET-MVC

3 Comments

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 Comments

LVL 19

Question by

erikTsomik

5d agoSolved

javascript issue

I have the javascript where I am trying to do a simple show / hide of the div. but it does not work . please advice

http://jsfiddle.net/p51dytok/4/

10 Comments

LVL 1

Question by

Christopher Gore

6d ago

Which REST return should I use

I pulling data from REST. It will return XML, JSON, JSONP. Also, I can add a call back for ajax_func . Is there a best practice. I am planning to use .Net and MVC. Is there one advantage over another? I'm just starting from scratch right now.

3 Comments

Question by

Joseph Longo

7d ago

Modify Data Before Processing?

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.

3 Comments

I have an asp.net website that uses ajax and javascript.

I changed the javascript variable name but when i run the website and view the code i see the old vairable name. How do i get the progarm to use the new information.

I tried clearing the cookies and press f5

7 Comments

Hi,

My button don't work but alert work after success, what should I do ?

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/gif" href="img/drapeauBruxelles.gif" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Projet Map</title>
    <style>
       #map {
        height: 600px;
        width: 90%;
       }
    </style>
  </head>
  <body>
    <div class="container-fluid bg-2 text-center">
      <h1 class="margin">Des Marqueurs Google Maps</h1>
    </div>
    <div id="map"></div>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="https://developers.google.com/maps/documentation/javascript/adding-a-google-map?hl=fr">My Google Maps</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">

            <li><button type="button" id="btn1">Fontaine d'eau</button></li>
            <li><button type="button" onclick="actionImmediate();">Fontaine d'eau</button></li>

Open in new window

…

24 Comments

LVL 1

Question by

trevor1940

2017-09-08Solved

jQuery Datatables ajax with callback

Hi Following advise from here I'm attempting to build my table using Datatables

In the code bellow I get "TypeError: f is undefined datatables.min.js (line 60, col 471)" so I'm clearly doing something wrong

I can't just load the data as I need to do stuff, I've added comments, while the data is loading I'm creating a Openlayers marker point (Outside this question scope)

The button is used to simulate the ajax call the table will need to be refreshed

Could someone give me a hand first fixing the error second how to get at & manipulate the data, as commented

<!DOCTYPE html>
<html>
  <head>
    <title>Data Tables</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/fc-3.2.2/fh-3.1.2/rr-1.2.0/sc-1.4.2/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/fc-3.2.2/fh-3.1.2/rr-1.2.0/sc-1.4.2/datatables.min.js"></script>

<script type='text/javascript'>
	$(function() {
      // jQuery
       $('button').on('click', function (){
          var link = "MOCK_DATA.json";
//          $('#MainTable tbody').html(table);

Open in new window

…

10 Comments

Dear experts!

I am experiencing this weird situation as for the first time. I am currently using PHP, html, and JQUERY to design my pages.

I have navbar that direct user to 3 distinctive pages:
1. Home Page
2. inventory
3. Sales

Home page is set as the default page. If select the Inventory option in navbar it will bring me to hte inventory page and same concept applies to sales page.

I am using ajax POST which will pass some values over to the either the inventory or the sales. I was able to navigate from home to inventory or inventory to sales or sales to inventory etc.... without any issue.

But somehow when I hit the F5 or the refresh option in my browser (I am using Chrome and Firefox) it will redirect me back to Home page.

I am wondering why it does that? Doesn't it suppose to stay on the inventory page if I am currently on inventory page?

I tried to trouble shoot here is the strange thing. If I am on Home page and POST to inventory page, I can see my variable that I want to post over to the inventory page ( with the from the $_POST variable and the $_POST variable has a value that tells me what page I am on). If I hit the refresh button or F5, I can see the $_POST value that redirect me to home page instead of the inventory. This kind of trouble me as to why I get redirected back to home instead of staying on the inventory page.

5 Comments

Concerto's Cloud Advisory Services

LVL 4

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question by

Joseph Longo

2017-09-06

Auto Refresh HTML Form

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.

5 Comments

LVL 1

Question by

Black Sulfur

2017-09-05Solved

How to create new CSRF token after ajax POST

I have a user area where a user can change their password. There is a CSRF token on the form. Once the user submits the form via ajax and the password is successfully changed, I unset the token. This is what I do for non-ajax pages and and then redirect the user on successful submission. But since the user isn't redirecting the session is unset and the token no longer works.

My question is, do I need to unset the session after the password was successfully changed? If so, then what would be the best way to go about it?

In my html, the create token function is called:

 <input type="hidden" name="form_token" id="form_token" value="<?php echo make_form_token(); ?>">

Open in new window

In the ajax submit, validation is performed to check that the session matches the form token.

PHP
AJAX

4 Comments

Question by

impressionexpress

2017-09-03Solved

image upload using AJAX

I have a form with a few fields. text & select.. I am POSTing the form AJAX all this seems to be working except for the $_FILES. In my PHP file I get the value of the file field when I do print_r($_POST); but not when I do print_r($_FILE)

Im expecting got get my textbox and selectbox values in the print_r($_POST);
and get my input type file to display when I print_r($_FILES);

Here is the code

	$("#ApplyChanges").click(function () {
		var fd = new FormData();
		var formErrors = 0;
		$('#girl_info :input[type=text], select, textarea').each(function () {
			if ($.trim(this.value).length >= 1) {
				$(this).css('border-color', '');
				if(this.id == 'language'){
				var languagesArray = [];	
				$("#language option:selected").each(function (i, selectedLanguage) {
					languagesArray[i] = $(selectedLanguage).val();
				});
					fd.append(this.id, JSON.stringify(languagesArray));
				}else{
					fd.append(this.id, this.value);
				}
			}else{
				formErrors++;
				$(this).css('border-color', 'red');				
			}
		});
		
		var counter = 0;
		$('#girl_info :input[type=file]').each(function () {
			if ($.trim(this.value).length >= 1) {
				counter ++;
				fd.append(this.id, this.value);
			}
		});
		
		formErrors = 0; 
		counter = 1;
		
		if(formErrors === 0 && counter >= 1){
			$.ajax({
				type: 'POST',
				enctype: 'multipart/form-data',
				url: '../ajax/form.php',
				data: fd,
				cache: false,
				contentType: false,
				processData: false,
				success: function

Open in new window

…

15 Comments

LVL 1

Question by

Westside2004

2017-09-01Solved

jQuery Ajax call return value to calling function?

Hi,

I'm using jQuery 3.1

How can I have this function return a value back when the value does not get set until after the ajax call? I do not want to use "async:false" in my ajax function as that seems to be bad practice. My code is below, but it doesn't work obviously. Somehow I need to get the checkEmailAvailability function to return a value, but due to the async nature, I can't get it quite right.

I also hear using success callback is old school, so I'm open to doing this differently.

...calling code:

var isEmailAvailable = checkEmailAvailability();

function checkEmailAvailability() {

	var emailAddress = $('#email').val();
	
		$.ajax({
			url: 'remote.php?method=process',
			dataType: 'text',
			type: 'POST',
			data: {email: emailAddress},
			success: function( data, textStatus, jQxhr ){
				
                               // if the email is not available
				if(data === 'false'){  
				}
			}
		}); // close ajax
	
}

Open in new window

7 Comments

Question by

Whing Dela Cruz

2017-09-01

Asp error handler Part 2

Hi experts, I'm having trouble sending file to .asp server using ajax as the code shown below. I've observed that too much character could hinder the asp server not to receive, sending an error says; "The source you are looking for has been removed, had its changed or is temporarily unavailable". My question is, Is there other way forcing the server to receive big data using Ajaz like the way i used below? What approach should i use to handle big data to send .asp server? Thanks experts!

function iGetPerona(x,code,inv)
{				
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp = new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	xmlhttp.onreadystatechange=function()
	  {
	  if (this.readyState==4 && this.status==200)
	    {
	        var msg = this.response;
	        alert(msg);
	    }
	  }                                            
		xmlhttp.open("GET","SavePersona.asp?a="+x + "&idb="+ mcCode + "&b=" + code + "&c=" + inv, true);
		xmlhttp.send();
}

Open in new window

7 Comments

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

…

11 Comments

I have the following script, and everything is working as intended. My problem now is that when I update the variable value, I loose the ORIGINAL FONT of the field. Ex. when the user open the page the table has ?<h3> .... </h3> for he cells, and when I update the variable value, the Font or Format goes back to the normal Font NOT THE <H3>
I want to be able to update values keeping the same format or font.
This is the original cell from table
<tr><td width="180"><h3>Sub-total</h3> </td><td align="right" width="150"> <span id="total-price"><h3>15.98</h3> </span> </td></tr>

and when the listener updates the value, it works yes, but the font changes

Help tnx

             <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script type="text/javascript">
                  $(document).ready(function () {
//set an event listener on the click function of the submit button
// $("#submit").on("click", function(e){
//prevent the form from submitting
// e.preventDefault();
//reset quantity value when page reloads
                        $('#qty').val(2);
// intercept 'change' event for the quantity input
                        $('#qty').on('change', …

4 Comments

LVL 5

Question by

Isaac

2017-08-25Solved

ERROR - Ajax Request Error (Origin 'null' is therefore not allowed access.)

I am trying to run the code below

    $(function() {
        var params = {
            "api_key": "{xxxxxxxxxxxxx}"
            // Request parameters
            "StationCode": "{string}"
        };

        $.ajax({
            url: "https://api.wmata.com/Rail.svc/json/jStationParking?StationCode=A09",
            type: "GET",
            contentType: "application/json"
        })
        .done(function(data) {
            //alert("success");
            console.log("success" + JSON.stringify(data) );
        })
        .fail(function() {
            console.log("error");
        });
    });

Open in new window

but I get this error:

5 Comments

LVL 1

Question by

Black Sulfur

2017-08-24Solved

Refresh jQuery value

I had this question after viewing How to json encode two arrays.

I am not sure if there is a way to "refresh" a jQuery value or if I would have to make another ajax call instead.

I am using ajax to retrieve my cart contents. Each item in the cart has an individual remove button to remove a particular item from the cart. When a user clicks this, an ajax call is made and the item is removed. Another ajax call is made which updates the number of items in the cart. I need to however also update the cart subtotal because that is the only thing that isn't changing. The subtotal/total of the cart is assigned in the cart display function. Can I just refresh this value? If not, I am not sure how to update or do I have to make another ajax call?

This is my function to show the cart:

function show_cart() {

    $.ajax({
            url: 'functions/show-cart.php',
            type: 'POST',
            dataType: 'json',
        })

        .done(function(data) {
            $.each(data.cart, function(index, item) {

                var showCart = `

				<div class="row hr marg-b-30 marg-t-30">
						<div class="col-md-2 col-sm-2 col-xs-12 marg-b-30">
							<img src="uploads/${item.pic_name}" alt="${item.product_name}" class="">
						</div>
						<div class="col-md-5 col-sm-5 col-xs-12 marg-b-30">
							<a href="#" class=""><b>Product</b></a><b

Open in new window

…

jQuery
AJAX

2 Comments

Hire Technology Freelancers with Gigs

LVL 10

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

HI
I HAVE AN AJAX HTNL EDITOR ON A SCREEN
AND I HAVE 3 TEXTBOX WHERE AUTOPOSTBACK = TRUE
ONCE I ENTER ANY BOLD CHARCTERS INSIDE THIS AJAX HTNL EDITOR POSTBACK OF TEXTBOX IS NOT FIRED HOW TO SOLVE SUCH WEIRD ISSUE
below is the design:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="test.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link id="MyStyleSheet" rel="stylesheet" type="text/css" href="~/Styles/CssStyles.css" runat="server" />
    <%--<link id="MyAlertStyle" rel="stylesheet" type="text/css" href="~/Styles/sweetalert.css" runat="server" />--%>
</head>
<body>
    <form id="form1" runat="server">
         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"
            AsyncPostBackTimeout="360000" AllowCustomErrorsRedirect="False">
             </asp:ScriptManager>
        <asp:UpdatePanel ID="sd" runat="server">
            <ContentTemplate>
     <asp:TextBox ID="txt_Year" runat="server"  Height="22px" 
                                                AutoPostBack="true" CausesValidation="false"
                                                OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
        <asp:TextBox ID="Literal_ProbationMemo" runat="server" CssClass="descriptionTextBox"

Open in new window

…

7 Comments

1 Comment

I am using the below code to create an Ajax DataTable. I want to make a row clickable, and have it open a URL using data from one or more of the columns. So, if there is a row with 2 columns, ID and CarType, and that row is clicked, I want the browser to go to the follwing URL when the row is clicked: www.myshop.com/cars.html?ID=77&CarType=Chevy

This works fine for the first load, but if you perform a search, or the contents dynamically change and the table is re-drawn, it fails. Can someone please assist?

	$(document).ready(function(){
		searchCars();
	});
	function searchCars() {
		 $('#carsTable').DataTable().destroy();

		// clear the search results
		$("#carsTable tbody").empty();
		// search criteria when form is submitted
		var carType = $("#carType").val();
		var carColor = $("#carColor").val();

		// url to php
		var url = "CarTypes.PHP";

		// argument(s) to add to the url
		url += "&carType=" + carType;
		url += "&carColor=" + carColor;

		var carTable = $('#carsTable').DataTable({
			"order": [
				[ 0, "desc" ]
			],
			"BAutoWidth": true,
			//"stateSave": true,
			"bFilter": false,
			"ajax": url,
			"sAjaxDataProp": "DATA",
			"processing": true,
			// export button 
			"dom": 'Blfrtip',
			"columnDefs": [
				{"visible": false,"targets": [1]}
			],
			buttons: [
			{
			extend: 'collection',
			text:'Utility',
			titleAttr: 'Utility',
			autoClose: true,
			className: 'btn btn-primary btn-xs',
			buttons: [
			'colvis',
			'copy',
			'excel',

Open in new window

…

4 Comments

I am using jQuery Datables with Ajax, so my rows are created dynamically when the datatable loads. Does anyone know how I can make the row, or a column clickable? I'd like to make it so when a user clicks a row, or one of the items in a column it links them to another page. In the URL they click, I will need to include data from one of the columns in that row. For example, if someone clicked the first row below, I'd want to send them to a url: www.myshop.com/newcar.html?ID=77

ID Carname Cartype
-------------------------------------
77 carA chevy
76 carB dodge

2 Comments

Question by

crescue

2017-08-20Solved

How to know if your are ip is from texas

How to know if your ip browser is from texas ? I want to find out for charging TAXES or not to my online customers. If they are from Texas then TAXES need to be calculated. I am using PHP to make the calculations for the Total price. I was thinking of adding a field on my page for the customer to enter their zip code, but I wanted that field to be filled depending on the browser (ip) location and to know whether is from Texas. Is there any way to do this with PHP or AJAX

Tnx

6 Comments

Question by

Stephen Forlance

2017-08-19Solved

Ajax call from within modal

Hi all,
Im using Jquery and Bootstrap.

Very simple test set up. I have a page which opens a remote content modal.

In the modal there is a div I wanted updated depending on whats in the select box. At the moment nothing seems to happen, Im guessing this is to do with the way Im initalizing the Jquery functions (ie. the elements dont exist on the page until the initial modal call). Any ideas how to solve this?

This is the page:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#thisone").replaceWith("Hello world!");
    });
    
    $("#selector" ).change(function() {

if($("#selector").val()=="one") {
	$("#question").load("text1.txt");
} else if($("#selector").val()=="two") {
	$("#question").load("text2.txt");
}


});
});

</script>
</head>
<body>
<a class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal"  href="modal.html">Click to open Modal</a>
   



<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">

Open in new window

…

3 Comments

First
Prev
1
2
3
4
5
6
7
Next
Last

AJAX

12K

Solutions

Content

Contributors

COURSE of the MONTH

AJAX

Related Topics

AJAX

Related Topics