GET response not working with jQuery

Question

I am using jQuery Mobile page structure within my code. I am trying to send a parameter to a php file on the server using HTTP GET upon page onload and want to show my response. However, i see no response. Here is my code:

HTML

<div data-role="page" id="humanities">
    <div data-role="header" style="background-color: #eaffcd;">
        <image src="http://i.cs.hku.hk/~hsbashir/Project_Work/bayview/hku_logo.png" style="height:40px; width:35px; postion:relative; float:left;">
        <h1 style="color:black;"> Departments </h1>
    </div>
    <ul data-role="listview" data-theme="a" data-split-theme="b" data-split-icon="plus" data-inset="true">
        <li class="departments"><a href="#department">Department of Fine Arts</a></li>
        <li class="departments"><a href="#department">Department of Law </a></li>

    </ul>
</div>
<div data-role="page" id="department" onload="loadCourse()">
    <div data-role="header" style="background-color: #eaffcd;">
        <image src="http://i.cs.hku.hk/~hsbashir/Project_Work/bayview/hku_logo.png" style="height:40px; width:35px; postion:relative; float:left;">
        <h1 style="color:black;"> Courses </h1>
    </div>

    <ul data-role="listview" data-theme="a" data-split-theme="b" data-split-icon="plus" data-inset="true" id="courselist">

    </ul>
    <script>

        function loadCourse(){

        var course = $('.departments').text();

            $.get(
            "getCourses.php?course="+course,
            function( data ){
                $('#courselist').html( data )
                .listview( 'refresh' );
            }
            );      
        }
    </script>
</div>

PHP

mysql_connect($host,$username,$password);
mysql_select_db($database) or die( "Unable to select database");

$course = $_GET['course'];

$query ='SELECT * FROM Course_info WHERE Department="'.$course.'"';
$result = mysql_query($query) or die(mysql_error());

    while($row = mysql_fetch_array($result)) {

        print '<li><a href="#">';
        print '<h2 style="text-wrap : normal" >'.$row['Course_code'].' '.$row['Title'];
        print '</a></li>';
        print '<p>'.$row['Term'].'</p>';

    }

**Danger**: You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Jul 22 '14 at 10:20

Jai · Accepted Answer · 2014-07-23T08:05:19.783

3

This :

var course = $('.departments').text;

should be:

var course = $('.departments').text(); // missed the braces

As you are using jquery mobile in it so you can use pagecontainershow to check for the page show in here i think this has to be something like this:

$(function(){
  $( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
    if(window.location.href.indexOf('#department') !== -1){
        loadCourse();
    }
  });
});

ON JSBIN HERE

As per your latest comment:

This is getting me everything. All of the text of what is inside the html

You need to get the text and pass that in the function:

$(function(){
  var txt; // declare var outside
  $('a').on('click', function(){ // bind a click event on clicked anchors
    txt = this.textContent; // get the text content
  });
  $( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
    if(window.location.href.indexOf('#department') !== -1){
        loadCourse(txt); // pass it here
    }
  });
});

Updated JSBIN

edited Jul 23 '14 at 08:05

answered Jul 22 '14 at 10:17

Jai

74,255
12
74
103

Still no response. I see a blank page – user3760741 Jul 22 '14 at 10:21
nope..still the same. Here is my page: http://i.cs.hku.hk/~hsbashir/Project_Work/Timetable/timetable_landing.html#humanities – user3760741 Jul 22 '14 at 10:25
@USER3760741 just updated the answer with a jsbin link you can check these. – Jai Jul 22 '14 at 11:06
Cheers mate. It is working now. For some reason `onshow` was not working so i replaced it with `onload`. Now its ok – user3760741 Jul 22 '14 at 11:16
Can you help me how to get the text of the list that i click in this function. I am getting all list data with `$('.departments').text()` and not the specific department that i clicked – user3760741 Jul 22 '14 at 19:17
try with `$(this).text();` or you can pass the clicked elem like `loadCourse(this);` and in the function pass a param `loadCourse(el){ var course = $(el).text();}` or may be you need to see `event` as posted in the function above. – Jai Jul 22 '14 at 19:22
This is getting me everything. All of the text of what is inside the html – user3760741 Jul 22 '14 at 19:32
1

@user3760741 checkout the latest updated answer and updated fiddle there. – Jai Jul 23 '14 at 08:05

score 1 · Answer 2 · answered Jul 22 '14 at 11:07

1

Are you sure you are handling your course variable right? I think first of all you have to log your course variable to console. After that check if you can handle response right from the server. Like so:

function loadCourse(){

        var course = $('.departments').text();
        console.log(course)

            $.get(
            "getCourses.php?course="+course,
            function( data ){
                console.log(data);
                $('#courselist').html( data )
                .listview( 'refresh' );
            }
            );      
        }

answered Jul 22 '14 at 11:07

user2854865

65
1
3

you are right `course` variable is showing me all of the text for the class `.department` but i want to show the particular department class on the particular page i am on – user3760741 Jul 22 '14 at 11:26
can you suggest how to get the particular department that i clicked on – user3760741 Jul 22 '14 at 19:21
you can split your value for showing "particular department" of value :) you can split it by Jquery's split function. – user2854865 Jul 22 '14 at 19:25
but how can i know which department i clicked in order to split the value. Please see Jai's answer and help me to suggest how to get the value in that function – user3760741 Jul 22 '14 at 19:46

score 0 · Answer 3 · answered Jul 22 '14 at 10:19

0

Its better to change you JavaScript to something like bellow. Remove the onload="loadCourse()" from the div. Late bounding is better as for my knowledge.

<script>

    $(document).ready(function() {

    var course = $('.departments').text();

    $('#sample').html( 'hello' );
        $.get(
        "getCourses.php?course="+course,
        function( data ){
            $('#courselist').html( data )
            .listview( 'refresh' );
        }
        );      
    });
</script>

answered Jul 22 '14 at 10:19

Kasun Rajapaksha

536
1
5
22

Where is the div with id sample – Kasun Rajapaksha Jul 22 '14 at 10:33
there isn't any. I have removed it – user3760741 Jul 22 '14 at 10:36
but you JS has a line refers that div $('#sample').html( 'hello' ); – Kasun Rajapaksha Jul 22 '14 at 10:45
I have removed it now – user3760741 Jul 22 '14 at 10:59

score 0 · Answer 4 · answered Jul 22 '14 at 10:20

0

You just made a little typo.

Please add the brackets on line 1 of your function

var course = $('.departments').text();

answered Jul 22 '14 at 10:20

Valentin Mercier

5,256
3
26
50

yes this was a typo. But still no repsonse after correction – user3760741 Jul 22 '14 at 10:32

GET response not working with jQuery

4 Answers4

Updated JSBIN