Solved

ajax, jquery call

Posted on 2015-02-13
19
181 Views
Last Modified: 2015-03-12
Question 1: I put ../RestService/QuoteService/GetModelList(066,315217) and it return data.
And I want to know how to write jquery code instead of just call on URL. Can you show me?

Question 2: the output return below: How can i bind e.g. ModelNo in html <select></select> and <asp:dropdown></asp> In code behind c#.net?

Thanks

{"PackageKey":null,"PackageNo":1,"TotalPackages":1,"Status":"Ok","Data":
"[
{\"ModelNo\":\"A20dsfasdM-SD\",\"ModelName\":\"20X FUJINON LENS 2/3\",\"NetPrice\":0.0,\"ListPrice\":2965.0,\"AMD\":2315.0},{\"ModelNo\":\"AA-FP790G\",\"ModelName\":\"12VDC POWER SUPPLY\",\"NetPrice\":0.0,\"ListPrice\":103.4,\"AMD\":107.0},

{\"ModelNo\":\"AAasdfasd0U\",\"ModelName\":\"AC ADAPTOR/BAT CHGR\",\"NetPrice\":0.0,\"ListPrice\":262.53,\"AMD\":391.0}
]"}
0
Comment
Question by:ITsolutionWizard
  • 10
  • 9
19 Comments
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40610273
As it looks like you're returning JSON, it should be as simple as this:

$.getJSON('../RestService/QuoteService/GetModelList(066,315217)', function(data) {
     // data now contains your JSON object you've described above
});

Open in new window


No idea about the ASP bind to select control so I"ll leave that to a .NET expert.
0
 

Author Comment

by:ITsolutionWizard
ID: 40610449
When you mentioned "// data now contains your JSON object you've described above".

I really need to know how to extract the data.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40610547
You just use dot notation:

E.g.
data.PackageKey
Or
data.Data; //contains your array

Does they make sense?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:ITsolutionWizard
ID: 40610582
no...i am new here. so please show me in codes.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40613578
in your webpage you have a <select id='mylist'></select>

$.getJSON('../RestService/QuoteService/GetModelList(066,315217)', function(data) {
     // data now contains your JSON object you've described above
    if (data.Status === "Ok") {
        $.each(data.Data, function(i,el) {
            $("#mylist").append("<option value='"+el.ModelNo+"'>"+el.ModelName+"</option>");        
}
});

Open in new window

0
 

Author Comment

by:ITsolutionWizard
ID: 40615149
Well, I found out your code missing ")" and I added it is still not working. I verify the web service is fine.
Below is the code

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>      
    <script language="javascript" type="text/javascript">
        $.getJSON('../RestService/QuoteService/GetModelList(066,315217)',    
    function(data)
    {
         // data now contains your JSON object you've described above
        if (data.Status == "Ok") {
             $.each
            (
            data.Data, function(i,el)
            {
            $("#mylist").append("<option value='" +el.ModelNo + "'>" + el.ModelName + "</option>");            
             }
             )
        }
    }    
    );
    </script>
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40615529
I'll get a demo working for you soon
0
 

Author Comment

by:ITsolutionWizard
ID: 40615685
Thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40615698
http://jsbin.com/lecini/1/edit?html,js,output which uses http://jsbin.com/roquge/1.js as sample data

$(function() {
  var url = '../RestService/QuoteService/GetModelList(066,315217)';
  url = 'http://jsbin.com/roquge/1.js'; // this is just for testing and you should comment out this line for your testing
  $.getJSON(url, function(data) {
    // data now contains your JSON object you've described above
    if (data.Status === "Ok") {
      $.each(data.Data, function(i,el) {
        $("#mylist").append("<option value='"+el.ModelNo+"'>"+el.ModelName+"</option>");        
      });
    }
  });
});

Open in new window


html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<select name="mylist" id="mylist"></select>
</body>
</html>

Open in new window

0
 

Author Comment

by:ITsolutionWizard
ID: 40615735
Why using === ok? Should it be == ?
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40615773
== you leave it up to JavaScript to determine if each side is equal. Eg 2 == "2" well more often than not return true though one is a number and one is a string.
=== ensures they are the same value as well as type. Eg both must be a string or both must be a number etc
0
 

Author Comment

by:ITsolutionWizard
ID: 40615789
I see thank
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40615792
Did the demo work for you? We're you able to adapt the code?
0
 

Author Comment

by:ITsolutionWizard
ID: 40615822
I have to try later. But for some reasons the status is undefined when I tried earlier.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40615829
No problem just post when you've got an update. I'm still monitoring :)
0
 

Author Comment

by:ITsolutionWizard
ID: 40617986
still not working.

For some reason, my web service return status 'undefined' however, when I load the web service on url with input parameter. It is working.

Now I do not why.  My Web service has no issue at all.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40618019
Ok back to basics then:

Try $.get('../RestService/QuoteService/GetModelList(066,315217)', function(data) {
console.log(data);
});

Also please post the full JavaScript code you're using
0
 

Author Comment

by:ITsolutionWizard
ID: 40621879
it show null.

And if I want to test below:

how to  load data from ( '../RestService/QuoteService/GetModelList(066,315217)';
)

and put it into of your .js file.

This way at least I can try test it out.

Currently, if I open  '../RestService/QuoteService/GetModelList(066,315217)' on the browser, I can see the information list it
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40622110
Maybe you're just missing the jQuery wrapper:

$(function() {
$.get('../RestService/QuoteService/GetModelList(066,315217)', function(data) {
console.log(data);
});
});
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question