Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x

AJAX

12K

Solutions

7K

Contributors

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.

Share tech news, updates, or what's on your mind.

Sign up to Post

I am using SharePoint 2013.  

I am using Handlebars to display my SharePoint list into a table, which works.  But when I try to turn it into a dataTable, it does not transform into a dataTable.  I was able to do it in jsFiddle and it works.  Can you see what I am doing wrong?  

siteAdmin.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Handlebar Js Template Starts Here --> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>   
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://understandsp.com/spdev/SiteAssets/siteAdmins.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.css" />
<script id="siteadmin-template" type="text/x-handlebars-template">
 
<table border=1 width="100%" id="example" class="display"> 
<thead>
	<tr>
		<th>Picture</th>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Email</th>
		<th>Phone</th>
	</tr>

Open in new window

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.

I have a view...that build a few controls...and has two buttons..with JS events..that need to pass the values from the view in the  javascript function calls..

Please help.


Here is the section of the view where the controls are defined mostly.  My insert call for example here need to pass the contactid..which will be on a hiddenfield passed into the page from another page when this page is rendered.
The other values the user will select.  One is a dropdownlist populated from my controller/model.
The other is a dropdown with static values.
ANd finally the last column is just a decimal value input on screen.
There is also a client value passed fro mthe user selection of an autocomplete dropdown...not seen in this view.  Those values all need to go in my insert ...which is just an ajax call back to a controller method from javascript.

 <table id="new-row-template" style="display:none">
        <tbody>
            <tr>
                <td>
                    <label></label> 
                </td> 
                <td>
                   @Html.DropDownList("DropDownListID", new SelectList(ViewBag.DDLRoles, "Value", "Text"), "--- Please Choose an Item! ---")
                </td>
                <td>
                    <select id="selectdesignate" name="selectdesignate" class="form-control">
                        <option value="1"></option>
                        <option value="2">Primary</option>
                        <option 

Open in new window

0
Hi,
I have a datatables table I am using to allow a person to resort the row order of the slides (see attached as example). In my mysql table I am using an additional column to set the row order of each row.
So essentially in mysql I have
id - primary auto increment
SlideOrder - I am using for the sequence
SlideTitle
and a couple created/modified datetime etc.

 
table example
When the user drops a row into place the code I'm using is below to send to server ( I start getting sketchy here on in):

oTable.on( 'row-reorder', function ( e, diff, edit ) 
{
var result;
var sendloop = [];
 		
	for ( var i=0, ien=diff.length ; i<ien ; i++ )
	{
		var rowData = oTable.row( diff[i].node ).data();
		result = ''+diff[i].newData+','+diff[i].oldData+'';
		sendloop.push(result);
	}
        	
	var jsonString = JSON.stringify(sendloop);
   
$.ajax({
        type: "GET",
        url: "/dealboxx/ohs/admin/sort",
        data: {data : jsonString}, 
        cache: false
    });
    });

Open in new window


The result of which sends an ajax request and the data variable (when I drag row 1 below row 4 for example):
data["1,2","2,3","3,4","4,1"]

Had I dragged row 2 below row 3 initially I'd be sending:
data["2,3","3,2"]

Had I dragged row 3 in front of row 1:
data["1,3","2,1","3,2"]

When the data gets to my server (my wrong code) does this:
public function sortCourse(Request $request)
    {
	$obj = json_decode($request->input('data'), true);
	
	foreach($obj as $row)
	{
     
		$insertArray = explode(",",$row);
		
		$slidechange = DB::table('ohs_courses_content')
			->select('id')
			->where('SlideOrder',$insertArray[1])
		    ->first();
		
    
	DB::table('ohs_courses_content')
            ->where('id', $slidechange->id)
            ->update(['SlideOrder' => $insertArray[0]]);
 	 	}
	
    
    }

Open in new window


Depending on what I initially dragged it may work (if I'm dragging down or up). Couple drags into it and its a mess.

So my logic etc is no doubt totally wrong.

any help would be very much appreciated as always.
tj
0
I got hundreds of small rectangle image pictures of a words that I cut open from a letter-page.
Question is  how to allow User to rearrange images visually to reconstruct a original or alternative story?  

All kind of extras as game-like % to see how near constructed is to original would be good also, with print out option of final work.  

First i can just copy them all in to Word-Blog and start re-arrange in there, but this ended up with a freezed session.

Also was thinking about some image gallery scripts that would randomize images  and would fill a page by adding  the rectangle images after each other in flat view (there would be no option to re-arrange but at least would be able to display the output some-kind in readable format).

Notes:
(image rearrange platform, web-script, flash puzzle like game where people can randomize images and then one by one order them up and down, after each other.  )
0
I have a search results & edit details set of pages that use an Ajax Form to populate results of a search without reloading the entire page. That works fine and looks nice for the user.

Each of the search results is linked to an edit page (using standard HTML "A" tag) - again, that works OK.

What doesn't work is coming back from the edit page, as I end up back at the search page but with no results.

I tried using JavaScript to go back one page in history,

<a href="javascript:history.back();">[Go Back]</a>

Open in new window

which works but doesn't retain the search results.


Is it possible to return to the previous search results list, in the place (on the page) I came from, or is Ajax the wrong solution for that?

I am using MVC 5 & C#.
0
I have a list in Flexigrid and the edit form in a different page. Problem is after edit process is completed I would like to return the same page number from which row is edited. Instead it always goes to the first page of the list.

All of the this done in Codeigniter., after searching for a while I got below solution but still I am not sure how to get to the history page from the edit is clicked.

$('#MyFlex') .flexOptions({ url: urlAction, newp: 1 }).flexReload();

Open in new window

0
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
    tools:context="in.aftershoot.www.websitetoapplication.MainActivity">
<WebView
    android:id="@+id/webView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
</WebView>
</RelativeLayout>


MainActivity.java

package in.aftershoot.www.websitetoapplication;



        import android.graphics.Bitmap;
        import android.support.v7.app.AppCompatActivity;
        import android.os.Bundle;
        import android.webkit.WebView;
        import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.webView);
        webView.setWebViewClient(new myWebClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("http://192.168.0.101/whatsapp_message_sender/index.php");
        …
0
I need to show loader when ajax calls in mailchimp.

My coding like,

<form action="Myactionname" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="result" target="_blank" novalidate onsubmit="thirdpart();">
          <div class="mc-field-group">
            <!--<label for="mce-EMAIL" class="labelemail">Email Address <span class="asterisk">*</span> </label>-->
            <input type="email" value="" name="EMAIL" class="required email textinputbox" id="mce-EMAIL"
             placeholder="Email Address *" onfocus="this.placeholder=''" onblur="this.placeholder='Email Address *'">
            <input type="submit" value="Sign up" name="signup" id="mc-embedded-subscribe" class="btn_brd" >
          </div>
          <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
          <div style="position: absolute; left: -5000px;" aria-hidden="true">
            <input type="text" name="b_bc66e7d3354ff8ce99f71a04d_3831086bec" tabindex="-1" value="">
          </div>
        </div>
        <div id="mce-responses" class="clear">
          <div class="response" id="mce-error-response" style="display:none"></div>
          <div class="response" id="mce-success-response" style="display:none"></div>
        </div>
       
      </form>

<script src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>

My form validate and submit showing error …
0
Hello there

I have form on domino application wherein I can select number of records ( each of records is in HTML and have check box, with name and date data }

When user selects the records in the form and clicks on process/print html data for selected user using button, I would like to open another page wherein they will see html reports for selected user. ( i have view for all the users )

I know json and ajax to post data using agent, here I am not sure how to redirect to another page using ajax and json data to it.

Please help.
0
I want to display message with ajax  :
but i have this error in the console :
Cannot use 'in' operator to search for 'length' in L'email ou le mot de passe est incorrect.

Function Ajax
<script type="text/javascript">
   $(document).ready(function() {
        $(".login-btn").click(function(e){
             e.preventDefault();


            var _token = $("input[name='_token']").val();
            var email = $("input[name='email']").val();
            var password = $("input[name='password']").val();


            $.ajax({
                url: "/login",
                type:'POST',
                cache: false,
                data: {_token:_token,email:email, password:password},
                dataType: "json",
                success: function(data) {
                    if($.isEmptyObject(data.error)){
                        window.location = 'home';
                    }else{
                        // $(".print-error-msg").find("ul").html('');
                        // $(".print-error-msg").css('display','block');
                        // $.each( data, function( key, value ) {
                        //     $(".print-error-msg").find("ul").append('<li>'+data.error+'</li>+');
                        // });
                        printErrorMsg (data.error);

                    }
                },
                error: function(response){
                    $(".print-error-msg").find("ul").html('');
                    

Open in new window

0
Receive 1:1 tech help
LVL 11
Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

[{"name":"Name1","date":"16/01/2016"},{"name":"Name2","date":"12/12/2017"}]

I have above data which is been send using ajax json Probably POST method.

Now my question is that How I can parse this data into Lotusscript agent ?
0
Hi

I have web form wherein there are more then 25 records of the data [records are of name & date ],  there checkbox against each record, now what I would like to do is whatever number of records they are selecting, I would like to submit number of pairs using ajax in given url.

Below is the code: My concern is that if they select 25 records from I want to put 25 pairs of username and date field to ajax url:

SubmitAll is being called from processdata button as aforesaid.

function submitAll(){
            $('.usrChkBx:checkbox:checked').each(function(){
                  var $dtP = $(this).parent().next();
                  var date = $dtP.find('input').val();
                  var name = $dtP.next().text();
                  //var urldata='';
                  //urldata=urldata+ "&Date=" +date+ "&Name="+name
                  //alert(urldata);
                  
            });
            
      }
alert(urldata);
      $(document).ready(function() {
            $('#example').DataTable();
             $('.date').datepicker({format: "dd/mm/yyyy"});
             
             $(".checkAll").click(function(){
                  $('input:checkbox').not(this).prop('checked', this.checked);
            });
      } );
0
I have problem after migrate to another server.

When i click on menus page, "add to menu" loading, but not effect. Loading (spinning icon) stay all the time. And there is two more problems, in revolution slider when click save, says ajax error! error, and in WP Bakery when I want to edit content and click on edit button, loading but not showing anything.

I was change wp-config.php and increase memory limit, now in backend on status I can say green, just SQL version is red. When I was migrating I need to export SQL custom to MySQL40, because when I importing shows error with utf8mb4_unicode_520_ci. In phpmyadmin I cant see that collation. Now I changed all collation to utf8_general_ci. Maybe this causes problem?

Hosting provider is hostgator, shared hosting.
0
We have used ajax call with "async: false" through out our web application, now in Safari browser(in Windows and Mac OS both) if response gets delayed more than 5 seconds Safari browser throws dom timeout exeption.

$.ajax({
	type: "POST",
	contentType: "application/json; charset=utf-8",
	url: "Web method url",
	data: jsonData,
	async: false,
	success: function (data) {
	},
	error: function (data) {
	},
	complete: function () {
		
	}
});

Open in new window


The straight solution we found through different blogs is to set "async: true" or implement setTimeout() logic, that will fix the issue we have already tested that.

But we are looking for another solution that is there any way like by any property in configuration or AJAX call or any browser setting we can increase JavaScript Execution time for Safari browser.
0
<script>

         $(document).ready(function()  {
                    $('#importSubmit').on('click',function(){
                    var phone1=document.getElementById('phone').value;
                    //alert(phone1);
                    var msg=document.getElementById("message").value;
                    // alert(msg);
                    var opt=document.getElementById("opt").value;
                    //alert(opt);
                    var impt=document.getElementById("importSubmit").value;
                    //alert(impt);
   
                   
                    $.ajax({

                    type: 'GET',

                    url: 'http://localhost/whatsapp_message_sender/importData.php?',

                    dataType: "json",
                     //data:'foo='+ bar+'&calibri='+ nolibri,
                    data: 'importSubmit='+impt+'&phone=' +phone1+'&message='+msg+'&opt='+opt,    

                    success: function(data){
                    //alert(data);
                    $('#lkct').html(data);
                   

                                              },
                error: function(jqXHR, textStatus, errorThrown)

                {

                  alert("Error: "+errorThrown+" , Please try again");  

                }      

      });

        });
});
   //});
</script>


where I went wrong here  I'm getting this error  please help me to solve problem
0
This validation is working but I just wanted to check if it is actually acceptable practice to do what I am doing.

I have a Ajax.php file which is a controller within my controllers folder.

In there I have an Ajax class with an addAccom method which looks like:

      
public function addAccom()
	{
		$response = array();
		$message = '';
		
		if($_POST['category'] == '') {
			
			$message .= "Category required <br />";
		}
		
		if(empty($_POST['name'])) {
			
			$message .= "Name required <br />";
		}
		
		if(empty($_POST['description'])) {
			
			$message .= "Description required";
		}
		
		if($message) {
			
			$response['success'] = false;
			$response['message'] = $message;
			
		} else {
			
			$response['success'] = true;
			$response['message'] = "All good";
			
		}
		
		echo json_encode($response);
	}

Open in new window


I then have some jQuery in my scripts.js file being called in the footer. The jQuery appends the data to divs I have in the view. It is working fine but I just wanted to check that this is okay using PHP and MVC or if I am breaking some rules?

I do plan on sending data to the model and performing a database insert as well.
0
<!DOCTYPE html>
<html>
<body>

<h2>JSONStringFromJavaScriptObjectUsingStringfy_7</h2>

<p id="demo"></p>

<script>

var obj = { "name":"Gary", "age":30, "city":"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

</script>

</body>
</html>

Open in new window


i am looking at above example

what is java script object there ?

is below is java script object?
var obj = { "name":"Gary", "age":30, "city":"New York"};
or above is json object? or we can call it as both?
please advise
0
what is meaning of below
document.getElementById("demo").innerHTML

is it html or javascript or ajax or what syntax?

when we say document which document?
what it mean by innerHTML is there is somethong like outerHTML
what is getElementById

how do we give id to element
what are elements
if no id then what happens

please advise
0
Newbie question.  Sorry.

Looking for suggestions (best practice) regarding RESTful API implementation.

What are the pros or cons (if any) in calling a API method from within a MVC Controller?  It this the best approach?

Or should the API call be made strictly within the VIEW page via AJAX?

Thanks, in advance, for your help.
0
What does it mean to be "Always On"?
LVL 5
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

hi,

i am trying below

https://www.w3schools.com/js/tryit.asp?filename=tryjson_html_table

where the html table data coming from

i am not clear on what below code doing either


<!DOCTYPE html>
<html>
<body>

<h2>Make a table based on JSON data.</h2>

<p id="demo"></p>

<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { "table":"customers", "limit":20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        txt += "<table border='1'>"
        for (x in myObj) {
            txt += "<tr><td>" + myObj[x].name + "</td></tr>";
        }
        txt += "</table>"        
        document.getElementById("demo").innerHTML = txt;
    }
};
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

</script>

</body>
</html>

Open in new window


what is dbparam why we need to stringify json and send that

dbParam = JSON.stringify(obj);

please advise
0
hi,

i was trying to understand below ajax json example using xmlhttpobject to get file data from server
https://www.w3schools.com/js/tryit.asp?filename=tryjson_ajax

i am not sure what is happening here.

<!DOCTYPE html>
<html>
<body>

<h2>Use the XMLHttpRequest to get the content of a file.</h2>
<p>The content is written in JSON format, and can easily be converted into a JavaScript object.</p>

<p id="demo"></p>

<script>

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

</script>

<p>Take a look at <a href="json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>
</html>

Open in new window


what it means by below?
target="_blank

where is the server path?

what is meaning of below lines


var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
when is onreadystatechange related function called and what is 4 and 200 here?
why we need to use JSON.parse
and
document.getElementById
and
myObj.name;??

please advise
0
i have created a table having n rows  with some text boxes and a command buttonj. Everything, table, rows, textboxes and commandbuttons are created at run time.
i am able to handle click event of command buttons that completes with a page post back.
but i dot need post back.
So i want handle click event of group of dynamically creatd buttons without post back.

Kindly help.
0
Hi, is it possible to sort xml data in a classic asp page using AJAX and querystrings??

xml code

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

Open in new window




Page code...


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

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

Open in new window

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

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

Thanks
0
The link:

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

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

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

How does this thing work?
0

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.