0

I'm trying to code my first ajax function using jquery. I can't get it to work and am at a loss on why. My intent is to trigger the call upon a dropdown selection change event. I've boiled it down to the most basic function, just to try to establish that the process is completing, and it isn't.

My jquery code:

$('#selectgallery').change(function () {

    var id = $(this).val();

    $.ajax({
        type: "GET",
        url: "http://www.testsite.com/testing.php",
        dataType: "html",
        data: "gal =" + id,
        success: function (result) {
            alert("AjaxSuccess: " + result);
            //                         $("#gallist").html(result);
        },
        error: function (result) {
            alert("AjaxFailed: " + result);
        }
    });
})

Content of testing.php:

<?php
$result = "You connected";
echo "$result";
?>

The intent is that the php will grab data based on "id" and return html that I want to use to replace what was in #gallist. I left the commented line of code for illustration. That wasn't happening, so I put alerts to see how far I was getting. Using an alert I verified that the change function executes and "id" captures the intended value. I don't seem to be getting to the response. I don't get the alert for success or for error, like nothing is happening.
Can anyone point me in a direction to figure out why?

As requested by Marios, the entire html/javascript for this is as follows:

<!DOCTYPE HTML>
<html>
<head>

<title>Test Page</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Merriweather+Sans' rel='stylesheet' type='text/css'>

 <!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>

</head>
<body>

<div class="wrapper">
    <div class="header-bg">
    <div class="wrap">
        <div class="top-header">
            <div class="top-header-title">
                <p>Test Page</p>
            </div>
        </div>
    </div>
    </div>

<div class="content-bg">
<div class="gwrap">
<script src="js/jquery.ruggieri-admin.js"></script>
<div id="testmsg">
    <h3>This is the Test MSG Div</h3>
</div>

<div id="gallist">
    <h3>This is the GalList Div</h3>
</div>
<div class="gallerylist-form">
<form id="paintinglist" method="post" action="">
    <select name='selectgallery' id='selectgallery'>
    <option value="01">Gallery 1</option>";
    <option value="02">Gallery 2</option>";
    <option value="03">Gallery 3</option>";
    <option value="04">Gallery 4</option>";
    <option value="05">Gallery 5</option>";
    </select>
</form>
</div>

</div>
</div>

</div>
</body>
</html>

And then the javascript:

$(document).ready(function(){
$('#selectgallery').change(function () {
    var id = $(this).val();
  $("#testmsg").html("<h3>GalleryID: is " + id + "</h3>");
    $.ajax({
        type: "POST",
        url: "testing.php",
        dataType: "html",
        data: "gal=" + id,
        async: false,
    }).done(function (result) {
  $("#gallist").html("<h3>Ajax Done</h3>");
    }).fail(function (result) {
  $("#gallist").html("<h3>Ajax Failed</h3>");
    }).always(function (result) {
  $("gallist").html("<h3>Ajax Always</h3>");
    });
});
});
roybman
  • 25
  • 5

3 Answers3

0

You can just chain the "done" and "fail" functions instead of using them as arguments. (Based on the Documentation error/success are deprecated)

The following code works. 

$('#selectgallery').change(function () {
    var id = $(this).val();


$.ajax({
    type: "GET",
    url: "/",
    dataType: "html",
    data: "gal=" + id
}).done(function (result) {
    alert("AjaxSuccess: " + result);
    //$("#gallist").html(result);
}).fail(function (result) {
    alert("AjaxFailed: " + response);
});




});
Marios Hadjimichael
  • 86
  • 7
  • I tried what you have and still got no alert. I read the documentation, and added to what you have the ".always" function, and still got no alert at all. I don't get it. – roybman Mar 28 '15 at 02:58
  • Try adding an "alert(id)" after you define the id and see whether you get something. – Marios Hadjimichael Mar 28 '15 at 02:59
  • I get the alert in jsfiddle and not from the site. I copied the code directly from jsfiddle and ran that in the site in case I had some typo I was missing, but it still didn't work. I should make note that I'm using the jquery 1.11 library, and ran that in jsfiddle, not that it changes anything. I'm baffled. But I appreciate the input. – roybman Mar 28 '15 at 03:25
  • Do you actually upload your javascript file to a web server? Note that it the url you're requesting should be on the same server as the javascript file. – Marios Hadjimichael Mar 28 '15 at 03:36
  • This might help: http://stackoverflow.com/questions/2558977/ajax-cross-domain-call – Marios Hadjimichael Mar 28 '15 at 03:39
  • This is all running from the same server, and yes, the javascript file is on the server, along with the jquery files. I'm already using jquery for other parts of the site, and everything else works fine. I had a line in the function, immediately following the line "var id = $(this).val();" where I put up an alert "alert("GalleryID: " + id);" and this alert pops up with the correct value in id. I just don't get anything after that. – roybman Mar 28 '15 at 03:44
  • You could use the Developer Tools of your browser. Go to the console and see the errors that (should) show up there. – Marios Hadjimichael Mar 28 '15 at 03:47
  • I read the link, but as I mentioned, everything is coming from the same server. It's all internal to my site. – roybman Mar 28 '15 at 03:48
  • The only error I'm seeing is "TypeError: b.isT is undefined jquery-1.11.0.min.js:3:6571". I'm not sure what that's telling me, other than that it's in the jquery library. The debugger panel doesn't seem to indicate anything. The performance panel shows the page hitting the jquery library as well as my own js file. The network panel also shows my js file executing. That one error in the console is the only thing that stands out, but am not sure what it means. – roybman Mar 28 '15 at 04:10
  • Hmmmm..... Can you verify that jquery works before the ajax request, by doing something like $("#mydiv").html("

    It works

    ");     – Marios Hadjimichael Mar 28 '15 at 05:18
  • ok, I'm even more confused, if that's possible. To preface, I have an id in the page called "gallist", in which I ultimately want to place the returned html, if I ever get this working. I have 2 lines immediately before "$.ajax({". In order, I have "alert("GalleryID: " + id);" followed by "$("#gallist").html("

    It works

    ");" The alert pops up with the correct id in the message, but "It works" never appears on the page. Huh?     – roybman Mar 28 '15 at 15:25
  • I went back to jsfiddle to try out the code and got it working in there. Copied it back to my js file, removing the alert but leaving the line "$("#gallist").html("

    It works

    ");" Not sure what happened before, but now I get "It works" on my page. What I don't get are the alerts at the end of the ajax function. I tried this using url: "/", and I tried it using url: "http://testsite.com/testing.php", (with my actual url of course), and got no alerts at the end either way. So the jquery function is executing, but not completing. I'm still stuck.     – roybman Mar 28 '15 at 15:56
  • Just to add to my last comment, I replaced the alerts for done, fail, and always with $("#gallist").html("

    Comment

    "); so that for each, I would have some unique html message on any of the 3 return conditions. I get "It worked", but none of the 3 html messages for the returns. And it doesn't seem to matter whether the url parameter has "/" or anything else.     – roybman Mar 28 '15 at 16:10
  • Hmmmmm.... Try putting this in $(document).ready(function(){ ........ } after you load jQuery? – Marios Hadjimichael Mar 28 '15 at 22:49
  • Yup, tried that too. Also tried, based on some other posts I found, adding "async: false". Tried every possible combination of things, i.e. wrapped in document.ready with async-true and with it false, not wrapped in document.ready with both async options, and so on. I modified the initial html update prior to the ajax request to "$("#gallist").html("

    GalleryID: " + id + "

    ");" so that I could see the id received in the function. That text comes up, with the correct id, but I never get anything after that. I keep hoping I'm missing something simple, but if I am, I can't find it.     – roybman Mar 29 '15 at 18:01
  • Can you post the complete html/javascript so that we can find any other possible problems? – Marios Hadjimichael Mar 29 '15 at 20:50
  • I edited the original question so it includes the entire html and js code I'm currently running. I've also reached out to my hosting provider to see if there is something on their end that could cause this. – roybman Mar 29 '15 at 21:32
  • There's a few things I noticed in your html. First, you include jQuery twice (which doesn't seem to cause any problems to me) and you should keep only 1 of these 2. Second, after your Gallery 1,2,3, etc, you have "; on each line which should be removed as they are not valid HTML. Try checking your developer tools/console again for any other clues. https://developer.chrome.com/devtools/docs/javascript-debugging – Marios Hadjimichael Mar 30 '15 at 02:37
0

Try this.

$('#selectgallery').change(function () {

    var id = $(this).val();

    $.ajax({
        type: "GET",
        url: "http://www.testsite.com/testing.php",
        dataType: "json",
        data: "gal =" + id,
        success: function (result) {
            alert("AjaxSuccess: " + result);
          $("body").html(result);
        },
        error: function (result) {
            alert("AjaxFailed: " + result);
        }
    });
});

----
<?php
$result = "You connected";
echo json_encode($result);
?>
JeuryInc
  • 79
  • 5
  • Thanks, but same dead end. Note, I also updated what you have with the done and fail functions, but switching to json isn't changing the fact that I get no response on the return. – roybman Mar 28 '15 at 03:35
  • Delete data: "gal =" + id, and try again – JeuryInc Mar 28 '15 at 14:17
  • Tried that too. I'm not getting far enough for the data to be the issue. See the dialogue below with Marios. – roybman Mar 28 '15 at 15:29
0

I think the mystery is solved. There must be a bug in the jquery 1.11.0 library. I downloaded and ran with jquery 1.11.2, without changing anything else, and it worked. Marios, thanks for all the time you spent trying to help. I'm going to go try to grow my hair back now.

roybman
  • 25
  • 5