cancel
Showing results for 
Search instead for 
Did you mean: 
Not applicable

How to use $.ajax function in nintex list forms.?

i want to implement auto-complete text box for stock tickers inside nintex list forms.

I am trying to develop the autocomplete textbox using jquery ui. for that purpose i used $.ajax function to call the external yahoo finance api url.

the code is as follows.

var YAHOO = {

        Finance: {

            SymbolSuggest: {}

        }

    };

             

 

 

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

 

 

var txtareaTicker= '#'+idTicker;

    NWF$( "#txtareaTicker" ).autocomplete({

source: function (request, response) {

var query=request.term; 

NWF$.ajax({

              type: "GET",

              url: "http://d.yimg.com/autoc.finance.yahoo.com/autoc",

              data: {query: query},

              dataType: "jsonp",

              jsonp : "callback",

              jsonpCallback: "YAHOO.Finance.SymbolSuggest.ssCallback",

          });

          // call back function

          YAHOO.Finance.SymbolSuggest.ssCallback = function (data) {          

                var suggestions = [];

                //alert(JSON.stringify(data.ResultSet.Result));                           

                NWF$.each(data.ResultSet.Result, function(i, val) {                                                                

                    suggestions.push("Name:"+ val.name+" #Symbol:"+val.symbol+" #Exchange:"+val.exchDisp);

                });

              

            response(suggestions);

          }

},

minLength: 1,

select: function (event, ui) {

               //alert(ui.item.value.split("#")[1]);

               NWF$(".clsTicker").val(ui.item.value.split("#")[0]);

               //$("#stockvalue").val(ui.item.name);         

},

});

 

 

 

 

});

 

When i don't use $.ajax function and uses simple jquery.ui autocomplete it works fins inside nintex forms.

is there any problem with ajax function inside nintex forms.

 

please help me out.

thanks in advance

Labels: (2)
Tags (3)
Reply
4 Replies
Workflow Hero

Re: How to use $.ajax function in nintex list forms.?

To answer your immediate question: yes, you are able to use $.ajax inside of your Nintex Forms.  I've used it successfully before.  If you aren't getting results then its going have to do with either the URL you are requesting from, or the JS itself.

Thanks,

~Mike

0 Kudos
Accept as Solution Reply
Not applicable

Re: How to use $.ajax function in nintex list forms.?

Hey Mike,

Thanks for the reply.

sorry but i really new to this whole nintex thing. so i am early beginner in nintex with sharepoint.

what i did as u suggested i thought that url must be problem so what i did is as follows:

i added the script editor web part on webpart page & copied the  code  as follows:

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta name = "viewport" content = "width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-min.js"></script>

</head>

<body >

<h>Stock Quotes AutoSuggest </h>

</br></br>

<input style="width:800px; height:20px;" id="txtTicker" class="clsTicker"/>

<script type="text/javascript">

    var YAHOO = {

        Finance: {

            SymbolSuggest: {}

        }

    };

$(document).ready(function(){             

$(".clsTicker").autocomplete({

source: function (request, response) {

var query=request.term; 

$.ajax({

              type: "GET",

              url: "http://d.yimg.com/autoc.finance.yahoo.com/autoc",

              data: {query: query},

              dataType: "jsonp",

              jsonp : "callback",

              jsonpCallback: "YAHOO.Finance.SymbolSuggest.ssCallback",

          });

          // call back function

          YAHOO.Finance.SymbolSuggest.ssCallback = function (data) {          

                var suggestions = [];

                //alert(JSON.stringify(data.ResultSet.Result));                           

                $.each(data.ResultSet.Result, function(i, val) {                                                                

                    suggestions.push("Name:"+ val.name+" #Symbol:"+val.symbol+" #Exchange:"+val.exchDisp);

                });

              

            response(suggestions);

          }

},

minLength: 1,

select: function (event, ui) {

               //alert(ui.item.value.split("#")[1]);

               $(".clsTicker").val(ui.item.value.split("#")[0]);

               $("#stockvalue").val(ui.item.name);         

},

});

});

</script>

</body>

</html>

The above code works fine on webpart page:stockautosuggest.png

I don't know where must be the exact problem.can u point out if there is anything in the code that nintex doesn't support...

Thanks A lot

0 Kudos
Accept as Solution Reply
Workflow Hero

Re: How to use $.ajax function in nintex list forms.?

Hey sagar nesarikar‌ this is looking pretty nifty.. How did you go in the end where you able to figure it out ?

0 Kudos
Accept as Solution Reply
Workflow Hero

Re: How to use $.ajax function in nintex list forms.?

Hi Sagar,

Are you able to execute ajax calls?

0 Kudos
Accept as Solution Reply