File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes ajax call in jquery Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "ajax call in jquery" Watch "ajax call in jquery" New topic
Author

ajax call in jquery

David Mbura
Ranch Hand

Joined: Apr 06, 2010
Posts: 65
I want to make an ajax call in jquery which will bring a picture and texts on the side (actually it is a profile picture and little info about that particular person).And have a link underneath that picture.But i dont know what data type to use in $.ajax()?And where do i put the link in html?Also i am mocking the data so i dont know in what file to put the picture and text.Thank you in advance.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61773
    
  67

Ajax (jQuery or not) doesn't deal with binary data. The correct way to dynamically load an image is to set the src attribute of an <img> tag to the URL of the image. You can create the image element on-the-fly, if appropriate, or just set the src of an existing element.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
David Mbura
Ranch Hand

Joined: Apr 06, 2010
Posts: 65
So the data type is going to be html content(loading html fragment)? if i am mocking up the data what is gonna be the file type though?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61773
    
  67

Do you really need to use Ajax at all? If all you need to do is to reload the image, then no.

Is there more data that you need from the server? If so, JSON is the most likely format.
David Mbura
Ranch Hand

Joined: Apr 06, 2010
Posts: 65
well think of any social media site...when you click on the picture gives you the profile of that person.But before all that should be text below that picture describing name,age,and city.For now i am just doing the front end only so in the future i am going to need service in the back end.what do you think?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61773
    
  67

Still not seeing why you need Ajax yet. Most of the type of data you are describing is stuff that can be set onto the page before it even gets sent to the browser (using JSP or PHP or some such -- don't know what your server environment is). Why the need for Ajax to fetch data after the fact? That's the info that's missing.

Or -- are you eschewing server-side templating and planning to do all dynamic content on the client?

Generally:
  • You use .load() to fetch a pre-formatted HTML fragment on load it into the DOM.
  • You use $.getJson() to fetch data.
  • David Mbura
    Ranch Hand

    Joined: Apr 06, 2010
    Posts: 65
    oh ok,so what do you suggest in that scenario?.
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61773
        
      67

    Sorry, you aren't really giving enough information to understand the scenario.

    Generally, dynamic information that is known when the page is loaded is templated into the page using JSP/PHP/whatever on the server. Ajax is used when the data to be fetched isn't known until some client-side event occurs.

    Can you explain the specific scenario you are trying to deal with in those terms?

    David Mbura
    Ranch Hand

    Joined: Apr 06, 2010
    Posts: 65
    Let me put it this way ,when you are a registered member of a certain site once you login it takes you to your home profile which displays your picture and info about you.Now i am trying to build a home profile.Think of any site like linked in or facebook...hope that gives you an idea.
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61773
        
      67

    What you describe falls into the first category. It's data that's known when the page is being fetched and it's best to deal with it on the server before the page is sent to the browser. There's no need to wait until after the page loads to send yet another request to go get data that was already known at the time the page was originally requested.

    What's your server environment? Servlets and JSP? PHP? Other?
    David Mbura
    Ranch Hand

    Joined: Apr 06, 2010
    Posts: 65
    it is jsp...but i was thinking about mocking (separate the front and backend) so i can get the front end done quick
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61773
        
      67

    I don't see how using Ajax to populate data, even with jQuery's assistance, could possibly be faster and easier than doing the same in JSP.

    But if that's what you want to do, then $.getJson() is the best way to fetch non-HTML data from the server for use on the client.
    David Mbura
    Ranch Hand

    Joined: Apr 06, 2010
    Posts: 65
    i am ok with anything,whatever route that might get it to work ,i will go for it.The only thing that is confusing me is the set up,if i am going to manipulate data from the server side that means i am going to load ready made page via url to that jsp?just like in your boot closet lab?...Thank you for being patient with me i am still a rookie.
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61773
        
      67

    The Boot Closet examples are a good example of what I'm talking about. Server-side templating is used to deliver the initial page populated with inventory data that is known at that time, and then Ajax is used to fetch dynamic data when things like boot styles and sizes are chosen -- information that cannot be known at page load because they are chosen by the customer.
    David Mbura
    Ranch Hand

    Joined: Apr 06, 2010
    Posts: 65
    ok ok...so the actual page is created in jsp ,all you do in the client is call that url...right?
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61773
        
      67

    No, after that the Ajax calls return either JSON data, or HTML fragments. You'll rarely (if ever) use Ajax to grab an entire HTML page.
    David Mbura
    Ranch Hand

    Joined: Apr 06, 2010
    Posts: 65
    That is what i meant, see if it is correct
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61773
        
      67

    If url/to/profile/jsp returns an HTML fragment as its response, it will be inject into the DOM.
    David Mbura
    Ranch Hand

    Joined: Apr 06, 2010
    Posts: 65
    Ok could i do that for every piece of information in that home pfrofile page,like injecting html fragment per piece of info like recent posts,messages ,list of connected friends separately(inject each piece as separate html fragment)?
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61773
        
      67

    Sure. If that makes sense. The combination of Servlets/JSP and jQuery/Ajax is powerful juju.

    You have the choice to return HTML fragments to inject into the DOM, or JSON data (or XML if you must) and use that data to manipulate the DOM on the client. Choice is good.
    David Mbura
    Ranch Hand

    Joined: Apr 06, 2010
    Posts: 65
    ok...can i do ,like this piece of info return html fragment and other piece return json data in one page?
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61773
        
      67

    Absolutely, each Ajax call is an island unto itself. You can mix and match as much as you want. The Boot Closet example does that.

    What you cannot do is return both type of data in the same call (well, you can always return an HTML fragment as a string in a JSON construct -- but that's getting a bit messy).
    David Mbura
    Ranch Hand

    Joined: Apr 06, 2010
    Posts: 65
    Ok Thank you!....Since i am mocking the data,what local file type is suitable when i want to return html frag,also for json data?
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61773
        
      67

    Well, .html for HTML. But really, it doesn't matter.

    If you need proper content-types and such, you probably won't be able to just use files. My mockups tend to be hard-coded JSP files so I can set response properties appropriately even if the data is mocked.
    David Mbura
    Ranch Hand

    Joined: Apr 06, 2010
    Posts: 65
    even for json data put in .js file type wouldnt matter?
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61773
        
      67

    No, and bear in mind that using a file URL may not give you valid results. Make sure your mock data is being served by a web server using HTTP.
    David Mbura
    Ranch Hand

    Joined: Apr 06, 2010
    Posts: 65
    mmh...i have never done that before (save test data in web server).I think i should write some code first then figure out where i am going to put the test data afterwards.
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61773
        
      67

    What's your platform? If you're on a Mac, the Apache Web Server is built-in and can be turned on with a single mouse click.

    For windows, you're on your own, but I think Apache is pretty easy to install. Or you could just use Tomcat as a web server.
    David Mbura
    Ranch Hand

    Joined: Apr 06, 2010
    Posts: 65
    i have windows..think i should install apache then...so that is the proper way to mock the data?
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61773
        
      67

    Or Tomcat.

    You can try just serving up text files, and that works for you, cool. If it turns out you need to set content headers, then you may need to switch to JSP or PHP.
    David Mbura
    Ranch Hand

    Joined: Apr 06, 2010
    Posts: 65
    I guess ,i should just start with text files first then until when i need JSP....i have tomcat but i dont know how do you save the data though.
     
    I agree. Here's the link: http://aspose.com/file-tools
     
    subject: ajax call in jquery