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 refresh dataTable after insert with modal?

My table is as follows:
<table id="dynamicTable" class="table table-striped table-bordered table-hover">
	<thead>
		<tr>
			<th class="center">
				<label class="pos-rel"><span class="lbl">#</span></label>
			</th>
			<th>Staff Name</th>
			<th>User ID</th>
			<th class="hidden-480">Password</th>
			<th class="hidden-480">Role</th>
			<th class="hidden-480">Class Assigned</th>
			<th>Actions</th>
		</tr>
	</thead>
	<tbody>

		<?php
		if($total_rows > 0)
		{
			$cnt = 1;
			foreach($result as $row)
			{
				$id = $row['UserId'];
				$staff_name = $row['Initials'];
				$staff_loginid = $row['Username'];
				$staff_password = $row['Password'];
				$staff_role = $row['Role'];
				$class_assigned = $row['ClassAssigned'];

				if($staff_role == 'Admin'){
					$role = "<div class='badge badge-info'>Admin</div>";
				}else if($staff_role == 'Form Master'){
					$role = "<div class='badge badge-warning'>Form Master</div>";
				}else {
					$role = "<div class='badge badge-success'>Subject Teacher</div>";
				}             
				?>
				<tr>
					<td><?php echo $cnt;?></td>
					<td><?php echo $row['Initials'];?></td>
					<td><?php echo $row['Username'];?></td>
					<td class="hidden-480"><?php echo $row['Password'];?></td>
					<td class="hidden-480"><?php echo $role;?></td>
					<td class="hidden-480"><?php echo $row['ClassAssigned'];?></td>
					<td><div class="hidden-sm hidden-xs action-buttons">
						<a 

Open in new window

0
Cloud Class® Course: Microsoft Windows 7 Basic
LVL 12
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

Hello Experts,

I need help on modal form validation.

The following code inserts properly (only when all inputs are filled correctly).

I'm having trouble validating subject_taught and class_taught inputs.

More so, I want the form to clear all inputs (reset) after insert without error. The datatable should refresh afterwards.

The code:
<?php
include('../includes/connection.php');


if ( ! empty($_POST) ) {
	
    if ( empty( $_POST["initial"] ) || empty( $_POST["username"] ) || empty( $_POST["password"] ) || empty( $_POST["role"] ) || empty( $_POST["subject_taught"] ) || empty( $_POST["class_taught"] ) ) {

    	$response = '<div class="alert alert-danger">
		<span class="badge badge-danger">Empty Field(s) Detected!</span> All fields are required.</div>';

        die($response);
    }

    // Validation passed so let's deal with the DB stuff

	$initial = $_POST["initial"];
	$username = $_POST["username"];
	$password = $_POST["password"];
	$role = $_POST["role"];
	$class_assigned = $_POST["class_assigned"];
	

	$master_query = '';
	
	$stmt = $conn->prepare("SELECT Username FROM Users WHERE Username = ?");
        $stmt->bind_param("s", $username);
        $stmt->execute();
        $staffList = $stmt->get_result();

    if (mysqli_num_rows($staffList) > 0 ) {

    	$response = '<div class="alert alert-danger">
		The Username: <span class="badge badge-pink">'.$username.'</span> already exists. Try another one!</div>';

	die($response);
  

Open in new window

0
I am making my Ajax Response. For this I take 3 variables in a while loop and save values of 3 database columns in them. As there are multiple records
in DB so I have concact the value like $value .= 'value from db'. After the loop I have put these three variables in an array and sent them by using json_encode.

Here is  the sample code
 
while($projects_row = mysqli_fetch_assoc($projects_result))
		{         
			$projects_name .= '<li id="project-id-5a01bffbcfbeb40a008b458a" data-id="5a01bffbcfbeb40a008b458a">
			<span class="li-txt" style="color:#ff0000;width: calc(100% - 90px);"><a id="myAnc" href="#">'.$projects_row['project_title'].'</a></span>
			<span class="thumb-container"><span class="thumb thumb-3" style=""></span> 
			<span class="thumb thumb-6" style=""></span> </span></li>';		

			$projects_detail .= $projects_row['project_detail'];			
			$projects_image .= $projects_row['project_image'];			
        }  

echo json_encode(array("message1" =>$projects_name, "message2" =>$projects_detail, "message3" =>$projects_image ));
		

Open in new window


In my Ajax Success function I am retrieving the values as:
  $.ajax({
                url:"myresponse.php",
                type: "POST",
                data:  {"country_id":country_id},
                dataType: "json",								
					success: function(data)
					{				
						console.log(data);
						//alert(data.message1);
						//alert(data.message2);
						jQuery("#project-list").html(data.message1);
						jQuery(".pr-cont-info").html(data.message2);												
					},
				
              });  

Open in new window


The issue is data.message1 and data.message2 contains data of all rows. I need to seperate the data of each row so that I can use any row data anywhere.
For example, in my case data.message1 contains data of 3 rows like 'USA Project 1 USA PROJECT 2 USA PROJECT'. I have print that data in a DIV and due <li> tags
one record is printed in one line. Now i want that if user click on USA Project1, then it only shows the details of Project1.  Currently it shows the details of all 3 rows.

So how to fix this issue?
0
All thanks to Chris Stanyon who has been helping in making sure I'm successful in my project.

Now, I have a bootstrap modal that inserts into mysql using explode. I like to use same type of modal form to update the data fetched from database.

When I click on the Edit button on the datatable, I want the Modal to open the record of the selected user for necessary update.

Please Note: I use Ajax to post to the database.

The sample of what I want is attached and the script for my insert is as follows:

Modal for Insert:
<!-- new staff modal-->
<div class="modal fade" role="dialog" id="addStaffModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Add New Staff</h4>
      </div>

      <form class="form-horizontal" method="post" id="newStaff-Form" action="data.php">
      <div class="modal-body">
      	
      	<div id="response" class="center"></div>
      	
        <div class="form-group">
    		<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="initials">Initials<span style=color:red;> *</span>
    		</label>
    		<div class="col-xs-12 col-sm-9">
    			<div class="clearfix">
    				<input type="text" name="initials" 

Open in new window

0
Here is my Ajax response:

 $projects_name .='<li id="project-id-5a01bffbcfbeb40a008b458a" data-id="5a01bffbcfbeb40a008b458a">
			<span class="li-txt" style="color:#ff0000;width: calc(100% - 90px);">'.$projects_row['project_title'].'</span>
			<span class="thumb-container"><span class="thumb thumb-3" style=""></span> 
			<span class="thumb thumb-6" style=""></span> </span> </li>';

Open in new window


Now I want that when user click on the Project Title (see $projects_row['project_title'] variable) then I want to change the style="display" property of two divs mentioned below:


1)I need to change style="display:none" to style="display:block"
<div id="project-content" class="map-sidebar project-sb" style="display: none;">



2) And in the below code, I want to change it to dispaly:none
<button class="sidebar-tab map-theme-bg-color" style="background-color: rgb(98, 166, 47); display: block;"></button>

Need jQuery code help

Ps: If I am not using Ajax then I am able to change value but with ajax Response I cannot get value.
0
Hello all,

I'm a hobbyist, starting to dip my toe into Bootstrap 4, along with JQuery and Ajax.

I've got a PHP script, which works fine for tabs in Bootstrap 3 - and I'm now trying to convert it into Bootstrap 4 Collapse/Accordion - but cannot get it working - my ajax content currently appears outside all the accordion tabs, at the very bottom of the screen. I've spent some time researching this, but cannot see examples on what I'm trying to achieve.
 
For my Bootstrap 4 Accordion, when it initially appears, I want the first panel open and populated with my dynamic ajax content - with loading gif -  with each panels content being dynamically refreshed with ajax with each panel press.

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


    $("#247button").click(function() {
 
        $("#ajax-content").empty().append("<div id='loading'><img src='/images/loading.gif' height='60' width='60' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');
 
        $.ajax({ url: this.href, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
    });
    return false;
    });
 
    $("#ajax-content").empty().append("<div id='loading'><img src='/images/loading.gif' height='60' width='60' alt='Loading' /></div>");
    $.ajax({ url: '/247getday2staffTIMES.php', success: function(html) {
            $("#ajax-content").empty().append(html);
    }
    });
});
</script>  


<div id="accordion">
 

Open in new window

0
Hello Experts,

How can I make my modal stay open even after clicking on submit button?

Apart from the above, I want the success_msg and error_msg to display on the modal as in attached. If there's error, I want all the inputs to still retain their values but if there's no error, data should be inserted, table refreshed and success_msg displayed while all inputs are cleared. In any case, modal remains open until I manually close it.

My modal is as follows:
<!-- new staff modal-->
<div class="modal fade" role="dialog" id="UpdateStaff">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Add New Staff</h4>
      </div>

      <form class="form-horizontal" method="post" id="newStaff-Form" action="">

      <div class="modal-body">
      
      	<div class="center"><?php echo $success_msg; ?></div>
		<div class="center"><?php echo $error_msg; ?></div>

        <div class="form-group">
    		<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="initials">Initials<span style=color:red;> *</span>
    		</label>
    		<div class="col-xs-12 col-sm-9">
    			<div class="clearfix">
    				<input type="text" name="initials" class="col-xs-12 col-sm-9" id="initials" placeholder="e.g. AbdulRasheed G. O." autofocus 

Open in new window

0
I am using a JS library to drag the controls on my PAGE to perform different functions. Checkout the demo by clicking on this link:
http://iamfashionphotographer.com/del/cb-m-1/final.html

Open in new window


1) When the page loads, see the right side and click on the icon.
2) Then you will see a snippet there. Just drag it on the page.
3) After that a button will be visible on PAge. Click on it and fill the form fields and fill the data with integer values and click on save.
4) The values are stored in DB.

What I want:
1) When you click on Table or button, you will notice that some additional buttons/controls  will appear. Click on the last icon which is a delete icon. You will notice that control will be deleted from the page. But values are still saved in Database.

I want that if user click on delete icon then its data from the table must be deleted from the database.

Need code help that on which event I will set the ajax call to delete data against that control.

Note: If user drag a control on page then following event is called:
	$('.ui-droppable').on('sortstop', function(e,i) {
	});

Open in new window


Looking for expert opinion

Thanks
0
I have developed a list filter page which updates using ajax. Everything works well until I have discovered that search engines do not see this content!

Is there anything I can do to make this content visible to search engines using ajax, before I start a redevelopment?
0
Hi there.
I'm adapting a tutorial which uses ajax and php to pull information from my database, when  the user scrolls to the bottom of the page.

I noted however, that when I was reaching the bottom of the page, information wasn't always getting pulled from my database. I amended my code slightly to include my div tags within the php echo  (as per the original code) and the code now works (to an extent)  - it's pulling information as specified from the database.

So my working php code which displays the information on the page, and reloads is the following :

while($teacher = mysqli_fetch_array($data))
		{
			//here we are displaying the information from the database
			echo '
			<div class="container">
			<div class="col-sm-6 col-md-4 buffer">
			<div class="card" style="width: 100%;">
			
				<div class="card-header">
				<h1>'.$teacher['id'].'</h1>
				<img src="../public/img/flags/'.$teacher['nationality'].'flag.gif">
				<h2>'.$teacher['firstname'].'</h2>
				</div>
				
				<div class="card-body">
				<h1>'.$teacher['id'].'</h1>
				<h2>'.$teacher['firstname'].'</h2>
				</div>
			
			</div>
			</div>
			</div>
			';
		}

Open in new window


However, I want to display more information within the while.. The following code represents the information I want to display within the while loop and how it should appear. This code displays everything correctly on it's own but the pulling of the data does not seem to work with it.  

<div class="row">
            

Open in new window

0
Free Tool: Port Scanner
LVL 12
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

I am working on web page on a php/mySQL server.

My quote/order web page has several cascadingdropdowns which are not working.   Not sure why, but the code
I wrote using a widgit way back.   This was before jQuary was around.  It was leading edge back  then but now its not so great.

Can you point me to a good example that I can
0
I am getting 401 error with the below ajax call. How do I fix this issue?

full error: ..................................................................................................................
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:64327' is therefore not allowed access. The response had HTTP status code 401.
/...................................................................................................................................

var call = $.ajax({
           
            url: "https://name.com/web/lists('Call Management')/items?$select=Item_x0020_ID,State,Description&$filter=(Item_x0020_ID eq %27BBB000126%27)",
            type: "GET",
            dataType: "json",
            crossDomain: true,            
            headers: {
                Accept: "application/json;odata=verbose"
            },
            success: function (result) {
                alert("it worked");
               
            }
        });
0
I've got a dropdown box which is populated with ajax according to what option i choose from another dropdown. I need to duplicate the dropdown box keeping the same options loaded via ajax, this is what i've done o far. Many thanks for your help

This is the code to get tha value from the first dropbox and then use it for ajax

$('#flatGroup').on('change',function(){
        var countryID = $(this).val();
        console.log(countryID);
        if(countryID){
            $.ajax({
                type:'POST',
                url:'../controllers/ctrl_admin_group_table_app/ctrl_admin_get_building_table.php',
                data: {

                  group_id: countryID

                },

                success:function(html){
                    $('#flatTable-1').html(html);
                    $(".bs-select").selectpicker('refresh');

                }
            }); 
        }

    });

Open in new window


This is the code i'm using to close the second dropbox that receive the option from ajax

// start repeating form tabelle
        //Start repeating form group add limit
        var maxGroup1 = 5;
        //add more fields group
        var fieldGroup1= $(".fieldGroup1").clone();

        $(".addMore1").click(function() {

          var fgc1 = $('body').find('.fieldGroup1').length;

          if (fgc1 < maxGroup1) {

            var fieldHTML1 = '<div class="form-group fieldGroup1">' + fieldGroup1.html() + '<div class="col-md-1"><label 

Open in new window

0
Hi, I've edited this question as it was previously too long winded.  Breaking my issue down, using Ajax, I have declared values for offset and limit

$.ajax({
			 type: "GET",
				url: "mini_profiles.php",
				data: {
					'offset':0,
					'limit':9
					  },
				success:function(data){
					$('body').append(data);
					flag += 9;
				}

Open in new window


Later on in my code I try to assign those values to variables:

$limit = 'limit';
$offset = 'offset';

Open in new window


And then try to apply the following SQL select function:
$data_sql = "SELECT * FROM teachers_table LIMIT {$limit} OFFSET {$offset}";

However, I'm getting this error message:

Query: SELECT * FROM teachers_table LIMIT limit OFFSET offset
Error: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'limit OFFSET offset' at line 1


Is there an issue with how I've defined $limit and $offset or perhaps my sql query?

Many thanks.
0
I'm trying to include a live test for unique email and name.    The concept is to initially disable the submit button, and then re-initialize it if the credentials check-out to be unique. At this point clicking the submit button would initial the signup.php routines. Otherwise, the user would receive an error message to try again.

I have include the code "name_check' : 1," and "email_check' : 1," as ajax({ data arguments; because I've seen them in other code found online. But I don't understand what they mean: Is username_check a standard ajax function? I couldn't find any reference in the documentation.  Does this code assign the value 1 to username_check?

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

    let name_state = false;
    let email_state = false;

    $("input[type=submit]").attr('disabled','disabled');


    // Verify user name is unique in database
    //
    $('#name').on('blur', function(){
        let name = $('#name').val();
        if (name == '') {
            name_state = false;
            return;
        }
        $.ajax({
            url: 'check_credentials.php',
            type: 'post',
            data: {
                'username_check' : 1,
                'name' : name,
            });
            .done function(response){
                if (response == 'taken' ) {
                    name_state = false;
                } else if (response == 'not_taken') {
                    name_state = true;
                }
            }
        });
    

Open in new window

0
best books for these topics so that we can understand these without anyones's help.

also provide me the name of best websites(if any) to learn these .
0
I have a AJAX search form which takes input from user. Pressing Submit will send the request to php file which run 3 different queries and save results in 3 different variable
Now on my search result page, I want to show results in 3 different section.  

The searchresult1 variable result should display in 1st section (see attached diagram), searchresult2 variable result should display in 2nd section and so on.


see the layout of Search Results page here:
https://ibb.co/kH0Z3J

Open in new window


Code For Ajax Call
 function Search() {
        var input =jQuery("#input").val();
	var path_base = <?=base_path();?>
		
         jQuery.ajax({

        type: "POST",
        url: "myfile.php",
        data: {input:input,path_base:path_base},
        // dataType: "JSON",
        success: AjaxSucceeded,
        error: AjaxFailed
    });

Open in new window


myfile.php code
// Execute the query1
$q = '"' . $cl->EscapeString($_REQUEST['input']) . '"/1';
$searchresults = $cl->Query($q, 'search1' ); //second parameter is index name


// Execute the query2
$q2 = '"' . $cl2->EscapeString($_REQUEST['input']) . '"/1';
$searchresults2 = $cl2->Query($q2, 'search2' );

Open in new window


What is the best way to implement that. Can I combine all the 3 search results  and then seperate them in AjaxSucccess method. In that case how to setup the html? Need coding help.


Thanks
0
When i try get ehco from php to ajax, all time i get "Baddd".
Why isset($data['do_login']) all time false?!
Name button is normal..
If i delete ajax function and add in form action="demo.php", then after submit form open new window(demo.php) and write "good".
But with ajax it doesnt work :(
It say error: Undefined index: do_login in demo.php on line 6, but why?!
Help pls

	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h4 class="modal-title" id="myModalLabel">Увійти</h4>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	        	<span aria-hidden="true">&times;
	        	</span>
	        </button>
	      </div>
	      <div class="modal-body">
	        <form method="POST" class="js-form" id="popupResult">
				<input type="email" name="email" class="form-control" required="" 
				 placeholder="Електронна адреса">
				<input type="password" name="password" class="form-control" required="" 
				 placeholder="Пароль">
				<label>
					<input type="checkbox" name="option1">
					 Запам'ятати мене
				</label>
				<input type="submit" value="Submit" id="do_login" name="do_login"/>
	        </form>
	      </div>
	      <div class="modal-footer">
	      	<!-- <a href="" class="mr-auto ml-auto">
	      		Не отримали листа-підтвердження?
	      	</a> -->
	      <div

Open in new window

0
Still struggling with php/mySQL/ajax registration script. Now getting CORS error "Cross-Origin Request Blocked"  This may be FF issue because I'm not getting the error on Chrome.  I'm not clear why this error when everything is within pricelearman.com. Also, I tried to suppress the error by pasting in the .htaccess file recommended by H5BP.  In the end, my script is able to connect with the database, but no data is uploaded
signup.php
signup.js
signup_process.php
db_config.php
0
Cloud Class® Course: Amazon Web Services - Basic
LVL 12
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

Here is the dump of array which I have recieved from Ajax Request. Now I want to grab the value of 'title' and 'bundle' and send it as a json_encode
back to my php file so that I will access it in AjaxSuccess method.

I have print array with this:
print_r($searchresults['matches']);

Open in new window


Array Dump

  [93] => Array
        (
            [weight] => 4558
            [attrs] => Array
                (
                    [title] => Arabic Page test
                    [status] => 1
                    [created] => 1522315423
                    [entity_id] => 93
                    [bundle] => mainpage
                )

        )

    [105] => Array
        (
            [weight] => 4558
            [attrs] => Array
                (
                    [title] => News Page 2
                    [status] => 1
                    [created] => 1522415885
                    [entity_id] => 105
                    [bundle] => news
                )

        )

    [106] => Array
        (
            [weight] => 4558
            [attrs] => Array
                (
                    [title] => TESTTT
                    [status] => 1
                    [created] => 1522416460
                    [entity_id] => 106
                    [bundle] => mainpage
                )

        )

    [107] => Array
        (
            [weight] => 4558
            [attrs] => Array
                (
                    [title] => NEws Page 1
                    

Open in new window

0
I am using sphinx search. User can perform a Ajax search while entering a desired 'keyword' in a Search Textbox.

The search result page will display the result on the same page but  categorize the search results in 3 groups:

1) Website Search (This will display Page Title and Text. Content is saved in DB)
2) Images Search (It will show images from DB)
3) Videos Search (Video name, description, video thumbnail etc is saved in DB)

My Questions:

1) Can I pass one Ajax request for all 3 groups
2) Can I pass 3 seperate Ajax requests for each group
3) What is the best way to search images against user keyword as Images are in DB.

Thanks
0
Please refer to jsFiddle at "https://jsfiddle.net/midnightCabbie/mpm4uqtw/1/"  The issue is when clicked the submit button tries to send the data, but never succeeds. I'm not sure if the button is configured correctly, or if there is an issue with the php script.  

Here is the db_config.php  file:
<?php

//PDO
$db_host="localhost";
$db_user="pricelea_root";
$db_pass="pd5765166";
$db_name="pricelea_client_register";

try{
    $db_con = new PDO("mysql:host=$db_host;dbname=$db_name",$db_user,$db_pass);
     // set the PDO error mode to exception
    $db_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    echo "Connected successfully";
    }
catch(PDOException $e)
    {
    echo "Connection failed: " . $e->getMessage();
    }

?>

Open in new window


Thanks in advance
0
Basically I am trying to pre-populate a select based upon a value.

I have this edit modal that shows up when the user clicks EDIT row in a data table:



I am populating everything except the USER TYPE drop down, as you can see.

The usertype id of the row being edited , is available to me in this global variable:

currentRow.userType

Open in new window


I am obtaining an array of all usertypes from an ajax call and put in variable:

var modelLookup;

Open in new window


Sample JSON Response:
[
 {
    "id": 0,
    "name": "admin",
    "active": true
  },

 {
    "id": 1,
    "name": "user",
    "active": true
  }
]

Open in new window


and my select looks like this:

<select id="userType" class="form-control">
                            <option selected>Select User Type</option>
                            <option value="">user type here</option> 
                        </select>

Open in new window


So basically I need all usertypes in the dropdown, with the one with the id of currentRow.userType selected.

Can anyone help me out please?
0
This is a multipart form, so I am using FormData.
<form id="PriceForm" name="PriceForm" method="post" enctype="multipart/form-data" accept-charset="UTF-8">

Open in new window

I am using this same code in 2 other modules, and it is working fine. It appears it is not even reaching the PHP file, and I have run out of ideas to troubleshoot.
In the code below, I am pressing the "Save" button, which is recognized, and I have verified that it is sending correctly populated variables to DataSave.
Validation comes back positive (also verified)

What I have done to troubleshoot

1. Verified, line by line, that the code sequence is identical to what is working elsewhere.
2. Placed error information in the PHP file ($Error[] = "Testing";)
3. Finally, created a simple test file (shown at bottom) to return a result. There was no change, so it does not seem to be in the PHP file.

The button listener (I am selecting the "Save" button)
$(document).ready(function()
{
   $(document).on('click', '.SubmitButton', function(e)
   {
      e.preventDefault();
      var ButtonID = $(this).attr('id');
      var Form = $('#PriceForm');
      var Validate = false;
      if(ButtonID == "Reset")
      {
         if(confirm("Did you mean to clear the form?") == true)
         {
            ClearURI();
            window.location="pricing.php";
         }
      }
      else if(ButtonID == "Save")
      {
         var Data = new FormData(Form[0]);
         Data.append( 'Sec', 

Open in new window

0
Good day,

I have a ColdFusion program which uses an ajax call to populate a SELECT2. The ajax starts populating the SELECT2 after the 3rd character has been entered. What I am looking for is to display the selected value in SELECT2 after the submit button has been pressed. In other words, assume the word “play” is entered. After the submit button has been pressed, I would like to show “play” in the SELECT2. Below please find the CFM and CFC I am using. Any help is greatly appreciated.

comboBoxSelect2Json.cfm
======================
<SCRIPT LANGUAGE="JavaScript">
    function prcForm (form) {
       document.forms[0].action = 'comboBoxSelect2Json.cfm';
       document.forms[0].submit();
    }
</SCRIPT>

<cfif  NOT structKeyExists(form, "hdnMortgCashRMaint00")>
	<cfset valMortgCashRMaint00 = "">
<cfelse>
	<cfset valMortgCashRMaint00 = hdnMortgCashRMaint00>
	<cfdump var = "#itemName#">
</cfif>


<html lang="en">
    <head>
        <title>Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    </head>
    <body>
        <cfform name="vldContactInfo" method="post" action="">
            <div style="width:520px;margin:0px auto;margin-top:30px;height:500px;">
                <h2>Select Box with Search 

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.