5 Replies - 1004 Views - Last Post: 15 November 2012 - 08:46 PM

#1 guyfromri  Icon User is offline

  • D.I.C Addict

Reputation: 46
  • View blog
  • Posts: 836
  • Joined: 16-September 09

$.ajax -- making it work correctly?

Posted 14 November 2012 - 07:55 PM

Hey guys!!

I've come across another problem that I can't seem to solve...

I have a tabbed document and when I click a tab, i want it to load a page in the container. Everything in my script works and there are no errors but it doesn't load anything in the content container...

Also, there are a few pieces I don't get about the $.ajax which is data? What exactly is this returning? I tried to google it but didn't come back with much of an answer. I'm just curious if I could put my variables in the connection string(URL) instead of the data or if there's an advantage to using it?

As always, thanks in advance!
    $(document).ready(function(){
      $('li').click(function(){        
        $('li').each(function(){
          $(this).removeClass('selected');           
        });
        $(this).addClass('selected');
        $(this).click(function(){
          $.ajax({
            type:'POST',
            url: 'http://google.com',
            success: function(data){
                $("#main-content").html(data);
            }
          });
        });        
      });
    })



Is This A Good Question/Topic? 0
  • +

Replies To: $.ajax -- making it work correctly?

#2 blackcompe  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1159
  • View blog
  • Posts: 2,547
  • Joined: 05-May 05

Re: $.ajax -- making it work correctly?

Posted 14 November 2012 - 09:08 PM

Quote

I have a tabbed document and when I click a tab, i want it to load a page in the container. Everything in my script works and there are no errors but it doesn't load anything in the content container...


Are you sure the request was successful? I.e. Is the success() function called? Have you tried an alert('debug') call inside it? Another thing: why make a POST request when you aren't sending parameters? Does a GET request not suffice?

Quote

Also, there are a few pieces I don't get about the $.ajax which is data? What exactly is this returning? I tried to google it but didn't come back with much of an answer. I'm just curious if I could put my variables in the connection string(URL) instead of the data or if there's an advantage to using it?


From the JQuery docs:

Quote

success(data, textStatus, jqXHR)Function, Array

A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.


So data is the page's HTML.

This post has been edited by blackcompe: 14 November 2012 - 09:09 PM

Was This Post Helpful? 0
  • +
  • -

#3 guyfromri  Icon User is offline

  • D.I.C Addict

Reputation: 46
  • View blog
  • Posts: 836
  • Joined: 16-September 09

Re: $.ajax -- making it work correctly?

Posted 15 November 2012 - 08:09 AM

Thanks for the help!

Honestly, I had copied a little snippet of that offline to check against my code and I left the POST there just because I didn't know if you had to have a way to send parameters whether they were there or not. Also, I had played with success a bit but I think I am going to give it a try today with fresh eyes.

I'm going to adjust a bit here and read the jQuery docs then I'll be back with my results.

Thanks again!
Was This Post Helpful? 0
  • +
  • -

#4 guyfromri  Icon User is offline

  • D.I.C Addict

Reputation: 46
  • View blog
  • Posts: 836
  • Joined: 16-September 09

Re: $.ajax -- making it work correctly?

Posted 15 November 2012 - 02:08 PM

Ok -- so I've been playing with the code and researching but I can't seem to get it to work...

I've tried a variety of ways but I'm going to go ahead and say I'm missing something here? I'm frustrated so it's probably something really simple at this point.

The entire script works, Tabs change, no errors but it won't alert me that the script has run and the div I'm accessing doesn't change.

Also, just in case it makes a difference, I'm using jQuery 1.8.2

Thanks again, guys!

Here's my full script so far
$(document).ready(function(){
      $('li').click(function(){        
        $('li').each(function(){
          $(this).removeClass('selected');           
        });
        $(this).addClass('selected');
        var h = $(this).find('a').attr('href');
        $.ajax({
          url: h,          
          success: function(data){
            alert('success');
            $("#main-container").html(data);
          }
        });
        return false;
      });        
    });



Here's the piece I can't get to work
        var h = $(this).find('a').attr('href');
        $.ajax({
          url: h,          
          success: function(data){
            alert('success');
            $("#main-container").html(data);
          }
        });



Just for good measure here's the HTML
       <div id="tab-container">
          <ul>
             <li class = "selected"><a href="http://bing.com">Bing</a></li>
             <li><a href="http://google.com">Google</a></li>
             <li><a href="http://yahoo.com">Yahoo!</a></li>
             <li><a href="http://aj.com">Ask Jeeves</a></li>      
          </ul>
       </div>
       <div id="main-container">
          
       </div>


Was This Post Helpful? 0
  • +
  • -

#5 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6246
  • View blog
  • Posts: 24,014
  • Joined: 23-August 08

Re: $.ajax -- making it work correctly?

Posted 15 November 2012 - 02:44 PM

Well, maybe "success" isn't being returned, and you should add an error handler?

$.ajax({
  url: h,          
  success: function(data){
    alert('success');
    $("#main-container").html(data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    alert(textStatus);
    if (typeof(errorThrown) != 'undefined') {
      alert(errorThrown);
    }
  }
});


EDIT: BTW, this is cross-domain AJAX, something I've never done, which may explain why it's failing. This is a special circumstance; regular old ajax was not meant to be used cross-domain for security reasons. And are you sure you want to POST? And are you sure this isn't in violation of these search engines' TOS?

This post has been edited by JackOfAllTrades: 15 November 2012 - 03:05 PM

Was This Post Helpful? 0
  • +
  • -

#6 guyfromri  Icon User is offline

  • D.I.C Addict

Reputation: 46
  • View blog
  • Posts: 836
  • Joined: 16-September 09

Re: $.ajax -- making it work correctly?

Posted 15 November 2012 - 08:46 PM

I'm going to look in to it.

Totally not actually using the search engine links I just did it as an example and to test my code. Once it's done, I'm actually going to be calling links from inside my website.

I'll post back after I play with the error handler.

Thanks!!!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1