Solved

ajax, jquery call

Posted on 2015-02-13
19
175 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
Comment Utility
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
Comment Utility
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
Comment Utility
You just use dot notation:

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

Does they make sense?
0
 

Author Comment

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

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
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
Comment Utility
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
Comment Utility
I'll get a demo working for you soon
0
 

Author Comment

by:ITsolutionWizard
Comment Utility
Thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:ITsolutionWizard
Comment Utility
Why using === ok? Should it be == ?
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
== 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
Comment Utility
I see thank
0
 
LVL 42

Expert Comment

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

Author Comment

by:ITsolutionWizard
Comment Utility
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
Comment Utility
No problem just post when you've got an update. I'm still monitoring :)
0
 

Author Comment

by:ITsolutionWizard
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Maybe you're just missing the jQuery wrapper:

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

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
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)

743 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now