Solved

ajax, jquery call

Posted on 2015-02-13
19
188 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 9
19 Comments
 
LVL 43

Accepted Solution

by:
Rob 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
 
LVL 1

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 43

Expert Comment

by:Rob
ID: 40610547
You just use dot notation:

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

Does they make sense?
0
More Than Just A Video Library

Train for your certification. Learn the latest DevOps tools. Grow your skillset to do better work.

At Linux Academy, we release new training modules every week so you'll always be up to date on the latest tech.

 
LVL 1

Author Comment

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

Expert Comment

by:Rob
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
 
LVL 1

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 43

Expert Comment

by:Rob
ID: 40615529
I'll get a demo working for you soon
0
 
LVL 1

Author Comment

by:ITsolutionWizard
ID: 40615685
Thanks
0
 
LVL 43

Expert Comment

by:Rob
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
 
LVL 1

Author Comment

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

Expert Comment

by:Rob
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
 
LVL 1

Author Comment

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

Expert Comment

by:Rob
ID: 40615792
Did the demo work for you? We're you able to adapt the code?
0
 
LVL 1

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 43

Expert Comment

by:Rob
ID: 40615829
No problem just post when you've got an update. I'm still monitoring :)
0
 
LVL 1

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 43

Expert Comment

by:Rob
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
 
LVL 1

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 43

Expert Comment

by:Rob
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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
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…

705 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