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

How can I make the hidden div with the gif visible on submit at http://www.gseannouncer.com/'

Please note that the page submits to itself.  If I can't make the div visible onsubmit then I understand that I will have to use ajax/jquery.  The key is that I need it to happen as quickly as possible.

Thank you so much!
0
Concerto Cloud for Software Providers & ISVs
LVL 5
Concerto Cloud for Software Providers & ISVs

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.

Hello Experts,

Could anyone point me in the right direction on how to get started with GMail Calendar Integration.

I'm building an internal web application using PHP/MySQL, JS/jQuery, and I need to schedule follow-up appointments within my app.  So, within my app I need to:

-Have a button that would open a popup showing the availability from GMail Calendar.

-Be able to book the appointment within the popup, or otherwise. But, still have it set within GMail, returning the date, time, and any type of Appointment ID.

-At a later time, reschedule the appointment, if needed. That's why I'm thinking I need to have an Appointment ID returned from GMail?

I'm also aware that for this, I may need to use AJAX, which I have done only in JS, but I'm hoping to save and keep any creds within PHP for security purposes?

Any help will be greatly appreciated.
0
I have table in database "customer"
and this columns:
id, name, father_name, surname, adress
I want, in select box will be name (father_name) surname, and when I select that I want to autopopulate text input filed "adress". So, I need help with showing value in input field "adress". I use this to make drop down select box:

$link = dbConnect();
$query ="SELECT * FROM customer";
$result = mysqli_query($link,$query);

<select name="customer" >
    <?php while ($line = mysqli_fetch_array($result, MYSQL_ASSOC)): ?>
   <option value="<?php echo $line['ime'];?>" "><?php echo $line['ime'];?> <?php echo $line['surname'];?></option>  
   <?php endwhile; ?>
    </select>

Please help me with this, I try this from this link:
http://jsfiddle.net/d3htjbup/ but not success.
I put javascript in this tags: <script></script>

Thank you
0
Hi,

I have this page: http://kroweb.dk/gfdev/canvas/
What I want to do is to create a DB query from clicking a selection, and where the query is the text in the text field when hovering (myText). But I seem not to be able address "myText" correctly - because I actually don't get a query. it displays the headline but not anymore. What am I doing wrong?

I have this relevant HTML:
    <div class="w3-col w3-mobile" style="width:50%; margin-top: 0px; margin-bottom:0px; padding-bottom: 0px; padding-top:100px; border: solid 0px #cccccc;"> 


        <div id="AmtsKort">
            <?php include('amter3.php');?> 

        </div>      

        <div class="w3-row"> <!-- for content inside this column -->

        </div>
    </div>
    <!-- Column1, end-->

    <!-- Columns2, start--> 
    <div class="w3-col w3-mobile" style="width:45%;"> 

        <div id="sogne_list"> </div>

</div>

Open in new window



I have this JS in the amter3.php file:
<script>  

var allPaths=document.getElementsByTagName('path');
var rectText=document.getElementById('rectText');
var myText=document.getElementById('myText');
var hrefLoc='https://kroweb.dk/gfdev/canvas/'; <!-- Denne justeres -->



for(var i=0;i<allPaths.length;i++){
    allPaths[i].onclick=function (e){ 
    /* Here I need that clicking a selection fires a query in the DB*/       
$.ajax({
       url: 'ajaxSognHtml.php',
       data: {query:myText.value},
       method:'POST',
       dataType: 'html'
     }).done(function (res){             
            $('#sogne_list').html(res);
          });         

    };
    
}




for(var i=0;i<allPaths.length;i++){
    allPaths[i].onmouseenter=function (e){
    rectText.style.fill='#cc9900';
    myText.innerHTML=this.id;
    };
    
}
for(var i=0;i<allPaths.length;i++){
    allPaths[i].onmouseleave=function (e){
    rectText.style.fill='none';
    myText.innerHTML='';
    };
    
}

Open in new window


And I have this php db query code in the ajaxSognHtlm.php file:
           
<?php
if ((isset($_POST['myText']))) {
  $con=mysqli_connect("db credentials") or die("Error connecting to database: ".mysql_error());

  mysqli_select_db($con,"genealogiskforum_dk_db9");
  mysqli_set_charset($con,"utf8");
  ?> 
  <br>

  <?php
  $query = trim($_POST['myText']); 
  $raw_results = mysqli_query($con, "SELECT `Sogn`, `URL`, `Amt` FROM sogne
    WHERE (`Amt` = '$query')") or die(mysql_error());
  var_dump($query);
    ?>

    <div class="sognecont" style="font-family:arial; font-size: 14px; font-weight:normal;"><h3>Sogne:</h3> 
      <?php
      while($row = $result=mysqli_fetch_array($raw_results)) {
        $txt= sprintf ("<a href=\"".$row["URL"]."\"target=\"_blank\">" . $row["Sogn"]."</a>"); 
        $txt1= sprintf (", ");
        echo $txt;
        echo $txt1;
    ?>
</div>
    <?php

      }

      mysqli_close($con);
    }else{  print ("POST is not set");
  }

  ?>

Open in new window

0
Hi
I've been struggling to get this to work and have attempted several solutions none work

Workflow:
User clicks a URL which calls a PHP script, this loads into a div below the link
Within the new content is a button which has attributes these need passing into a new function which again loads new content in this Div  

I tried passing 2 variables within the onclick like here  This caused ReferenceError: MyWord is not defined or SyntaxError: missing ) after argument list if using My Word  

I'm now getting
"id {object HTMLButtonElement) Tag undefined

$(function(){
$('a').click(function(e) {
    e.preventDefault();
    $(this).next('.resp').load( $(this).attr('href') );
});

function myFunction(me){
  var ID = me.getAttribute("id");
  var Tag = me.getAttribute("tag");
  
 $(this).closest(".resp").html ("<p>ID " + ID + "Tag" + Tag + "</p>>");

}

  });

Open in new window


HTML

    <div>
      <a id="1" href="myfile.php?param=My Word&ID=1">My Word</a>
      <div id='resp_1' class='resp'></div>
      <a id="2" href="myfile.php?param=MyWord&ID=2">MyWord</a>
      <div id='resp_2' class='resp'></div>
      
    </div>

Open in new window


HTML generated from first load function

<button id="Butt_1" data-tag="My Word"  onclick="myFunction(this)">My Word</button>
<!-- or second URL -->  
<button id="Butt_2" data-tag="MyWord"  onclick="myFunction(this)">MyWord</button>

Open in new window

0
Since I started changing the page structure here (http://www.gopherstateevents.com/results/fitness_events/results.asp?event_type=5&event_id=658) my data table does not work.  Also, my inline list is not in line.  Any help resolving these two issues would be much appreciated.
0
I would like to make the dropdown sorted but not sure how to do it right. For those of you already helped me in the past. Please understand I ran with some trouble with your solutions and always get different results.

I want to re-post and hope to get working sample. Thanks


<select></select>

function fnGetBondNameList(bondState) {
            $.ajax({
                url: "http://localhost:5489/BondList.xml",
                success: function (xml) {
                    parseSelectXML(xml,"bondName","Bond",bondState);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Status: " + xhr.status);
                    alert("Error: " + thrownError);
                }
            });
    } 

function parseSelectXML(xml, selectid, xmlnode, bondState) {
    var selecthtml = "", selectBondName = "";
    var options = [];
    $(xml).find(xmlnode).each(function () {
        if (bondState == $(this).find('GeneralInformation').find('State').text()) {
            selectBondName = $(this).find('GeneralInformation').find('Name').text();
        }
    });
    $("#" + selectid).prop("disabled", false);
    $('#' + selectid).html(selecthtml);
    $('#' + selectid + ' option:first').attr('selected', 'selected');
}

<?xml version="1.0" encoding="utf-8"?>
<Container>
  <GeneralInformation UI="BondInfo">
    <State>CA</State>
    <Name>Zebra</Name>
  </GeneralInformation>
  <GeneralInformation UI="BondInfo">
    

Open in new window

0
I have a PHP form that is used for entering a membership number.

When the input field changes, an ajax call is fired to a. check that the card number is from a valid range of possible card numbers and b. check if the card has already been issued.

If both checks are satisfied then no error message are displayed and the user can submit the form.

If either check fails, a warning message is displayed (either card not valid, or card already issued), but the form can still be submitted.

I also use https://jqueryvalidation.org/ to validate the format of the field and other in the form.

I am looking for a way of making the submit button "disabled"  unless the 2 checks on the field are satisfied. This could be either via the https://jqueryvalidation.org/ or otherwise.

The relevant parts of the code are shown below

Thank you.

<form action'#' method='post' id='account-add'>";
Card No<br/>
<input type='text' name='cardno' id='cardno'/><div id='disp'></div>
<input type='hidden' name='postback' value='add'/>
<input type='submit' id='submit' value='Add' />
</form>
	
<!--jquery validation-->
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js?v=1"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js?v=1"></script>
<script>
$().ready(function() {
					$.validator.addMethod("cardno", function(value, element) {
							return this.optional(element) || 

Open in new window

0
I have a <div> that I load using jquery:
  $("#<divId").load("/controller/action/" + id);
this works perfectly ... ONCE!

if I make a modification to the database (update, delete, add) and call the load function again, I don't see the updates because the second load function never calls the controller!  I'm stumped here!
0
I have a series of jquery ajax 'get' calls inside a $.each loop. In order to wait until ALL those 'get' calls are completed, I have a $.when.apply block, which executes once all the results of the multiple 'get' calls are populated into an array of json objects called 'ajaxList'. When I try to output the contents of the ajaxList array of json objects inside the $.when.apply block, I get following jquery error:

jQuery.Deferred exception: ajaxList is not defined ReferenceError: ajaxList is not defined

Following is my code:
//Excel Reader 
    function ExcelToTable(event) { 
        event.preventDefault();
        //show ajax loader
       // showLoading();
      // $(".overlay").show();
      //$.blockUI({ message: '<h1><img src="./images/ajax-loader.gif" /> Processing...</h1>' }); 
        ///show ajax loader

        $('#MainModalWindow').modal({
            keyboard: false,
            focus: true,
            backdrop: 'static'
        });
        $('#MainModalWindow').draggable({
            handle: ".modal-header"
          });
        
          $('#MainModalWindow').on('hidden.bs.modal', function (e) {
            $(this)
                .find("#displayErrors tr td")
                    .html("");
          });
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xlsx|.xls)$/;  
        /*Checks whether the file is a valid excel file*/  
        if (regex.test($("#excelfile").val().toLowerCase())) {  
            var xlsxflag = false; /*Flag for checking whether 

Open in new window

0
Industry Leaders: We Want Your Opinion!
Industry Leaders: 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!

I have a simple ajax form that when submitted sometimes opens a print dialogue screen!

I can't see why and how this happens, but would be grateful for anyone's thoughts!

The offending code is

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Enquiry Form
    </title>
    <link rel="stylesheet" type="text/css" href="css/enquiryform.css?v1">
<script type="text/javascript" src="js/1.11.3.jquery.min.js"></script>
    <body>
      <form  id='enqform' action='' class='modal-content' method='POST'>
        <div class='form_container'><h1>Enquiry Form</h1>
          <label><b>Enquiry</b>
          </label>
<textarea type='text' placeholder='Enter Enquiry' name='enqenquiry' id='enqenquiry' >Please contact me about Free Consultation</textarea>
          <label><b>Clinic</b>
          </label>
          <select id='enqbranchid' name='enqbranchid'>
            <option selected disabled value=''>Select Clinic
            </option>
            <option value='CIT'>London - Spitalfields
            </option>
            <option value='MAR'>London - Marylebone
            </option>
            <option value='MAN'>Manchester
            </option>
            <option value='DOR'>Dorridge
            </option>
            <option value='NAN'>Nantwich
            </option>
          </select>
          <label><b>Firstname</b>
          </label>
          <input type='text' placeholder='Enter firstname' 

Open in new window

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
I have something like below. And all I need is to get xml string
And then save as new xml

<products>
<product>a</producf>
<product>b</product>
</products>

Return xml file and get just product a.
0
I have a jQuery autocomplete where it is populated a JSON file with a label and a value.

Can someone write a event handler in my script that will call a function and alert the value when it is selected from the autocomplete?

$(document).ready(function() {
    $('#rates-input').autocomplete({
        source: "../js/selections.php"
    });
});

Open in new window

0
How do you setup a wait wheel animation while a file is loading in Visual Studio?

Thanks,

Dan
0
I've got a problem that needs solving and it involves the function that you see below. I'm trying to get to a place where I can understand every line of the code and I would appreciate some confirmation on what I THINK I understand. In other instances, I'm just plain stuck.

Here's what I've got:

    function filterInit(){ // Init means I'm starting this as soon as the page initializes
        $('select').material_select(); // I don't know what "material_select" means

        $.ajax({ //this is what's happening when the user clicks on the "select" - you've got an AJAX request being triggered
            'url': '/admin/library/get-tags', // the URL of the code that's returning data
            'data': {
                'filtered': true // don't know what the significance of this is
            },
            'dataType': 'JSON', // data type is JSON
            'success': function(resp){ // if there's data being returned, then do the following
                // remove everything but the default option since it acts as the label for material_select()
                $('#filter-tags option:not([value=""])').remove(); // if the value is blank, remove it
                $('#filter-tags-default option:not([value=""])').remove(); //if the value is blank, remove it

                // add the tags as options
                for (var i in resp.data) { //populating the select with options, but I don't understand the next two lines
                    var $select …
0
I have setup a page (using php) on our intranet which uses ajax to record background data on another website https://website.com.
The data that that is passed via ajax is being recorded, but the response is not being received.

The ajax call is as follows:
$.ajax({ // create an AJAX call...
      url: 'https://www.website.com/card.php?me=1482', // the file to call
      success: function(response) { // on success..
                $('#cardinfo').html(response); // update the DIV
      }
});

The div element does exist and the id is correct.

Assistance appreciated.
1
I essentially have 2 forms on one page. Each has some input controls and a button. I want to validate the controls relative to the button, but when using basic bootstrap validation techniques, both buttons validate the entire page.

How do I break up the forms and only validate the controls relative to the 2 buttons?

For example...

 <div class="col-lg-12">
    <h2><u>Daily Schedule</u></h2>
    

    <div class="col-md-3">
    <label for="heard2">Enabled?</label>
    <div class="form-group">
    <asp:DropDownList ID="ddlDaily" runat="server" class="form-control"></asp:DropDownList>
    </div>
    </div>
    
                    <div class='col-md-3'>
                     <label for="heard">Start Date/Time <i>(will repeat daily)</i></label>
                    <div class="form-group">
                        <div class='input-group date' id='myDatepicker'>
                            <asp:TextBox ID="tbDDT" runat="server" class="form-control"></asp:TextBox>
                            <span class="input-group-addon">
                               <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                    </div>
   
    
    </div>
    <div class="col-md-3">&nbsp;&nbsp;&nbsp;<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" class="btn btn-primary" /><br /><br /><br /></div>

Open in new window


How would I only validate the fields above when clicking the button above, ignoring anything else that might be on this page?
0
I have implemented a cascading drop-down with two drop down boxes and it works.  The problem is that the drop downs don't clear out when a new selection is made, so it grows with current and previous values.  I think it's because my array does not clear out.  I tried doing used.length=0 but that did not work.

Any help would be appreciated.


<tr>
                <td>Priority</td>
                <td>
                                <select id="priority">
                                </select>
                </td>
  </tr>
<tr>
                <td>Station</td>
                <td>
                                <select id="station">
                                </select>
                </td>
  </tr>

$(document).ready(function() {                
                                                      
         fillDropDown('Project Module');
                     
});


function fillDropDown(list, stVal) {

                if (list == "Project Module") {
                                //The internal name for 'priority' is 'field13'
                                var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('Project Module')/items?$select=field13";
                }else{
                                if (stVal.length == 1) {
                                                stVal = "0"+stVal;
                                }
                                var endPointUrl = _spPageContextInfo.webAbsoluteUrl + 

Open in new window

0
Free Tool: IP Lookup
LVL 11
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

For security reason I store client files outside of root directory. To view files I use html form generated by Ajax. There is no problem to use that form to upload files to the server. The problem is to get it back and display on a generated form. All other information I can get by PHP file using XML header and display it on a form. To display downloaded file in PHP I can use readfile($uploaddir."file_name") function. But how can I pass downloaded file to my generated html form?
0
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
Index.php
Rental-form.php
Rental-form.php
Rent-success.pdf

(See attached PDF)

Return-form.php
return-form.php
Right now, the system does the following:
  1. Presents the user (coworker) with a choice to either rent or return a car seat;
  2. Provides an inventory of any available seats (from a MySQL database);
  3. Generates a PDF version of our current rental agreement using FPDF;
  4. Emails the generated PDF to the renter and another department in my office (not implemented yet); and
  5. 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
0
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
0
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/
0
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
0
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

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.