From regular ajax to jquery ajax

Question

I want to change:

function showUser(str)
{
    if (str=="")
    {
        document.getElementById("txtHint").innerHTML="";
        return;
    } 
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","get_content.php?q="+str,true);
    xmlhttp.send();
}

into jQuery ajax. Right now i have the following to achieve that:

    $('#menurow').change(function () {
    $.ajax({
        type: "GET",
        url: "get_content.php?q="+str,true,
        data: $('#txtHint').innerHTML(),
        success: function(data) {
            alert('test');
        }
    })
});

When i try this code out, the browser keeps saying Uncaught SyntaxError: Unexpected identifier on data: $('#txtHint').innerHTML(). Does somebody knows how to fix this? This is the html/php code:

    <form>
<select name="menurow" id="#menurow">
<option value ="select">Selecteer een menu</option>
 <?php 
    $sql= mysql_query("SELECT * FROM Menu") or die(mysql_error());

    while ($row = mysql_fetch_array($sql))
    {
        ?><option data="menu" value="<?php echo $row['menu_id']; ?>"><?php echo $row['menu_name']; ?></option>
        <?php
        $subsql= mysql_query("SELECT * FROM SubMenu INNER JOIN Menu WHERE SubMenu.menu_id = Menu.menu_id AND Menu.Menu_id = ".$row['menu_id']."") or die(mysql_error());
        while ($subrow = mysql_fetch_array($subsql))
        {
        ?><option data="submenu" value="<?php echo $subrow['submenu_id']; ?>"><?php echo "--".$subrow['submenu_name']; ?></option>
        <?php
        }
    }
 ?>
</select>
</form>
<div id="txtHint"></div>

Thanks in advance

Thanks for your help guys. Right now i have it as follows:

$('.menurow').change(function(str) {
    $.ajax({
        type: "GET",
        url: "get_content.php?q="+str,
        success: function(data) {
            $('#txtHint').html(data);
                        tinyMCE.init({
            theme : "advanced",
            mode : "textareas"
        });
        }
    })
});

How can i get the data of the form in it? I have declared str in the function. Because of this it is showing empty fields. How can i fill them up with data?

you have a syntax error here: url: "get_content.php?q="+str,true, because of the true, it is not a valid object. — t.niese
– t.niese, Commented Apr 4, 2013 at 14:52
How does the markup look like? What does $('#txtHint').innerHTML() contain? — David
– David, Commented Apr 4, 2013 at 14:53

Naryl · Accepted Answer · 2013-04-04 14:55:06Z

1

url: "get_content.php?q="+str

The ,true, part is not needed.

Also you need a variable name for your data. By the way you can pass the q variable using the same format, without appending it to the URL (it will also work using your method)

You can use the short version:

$.get("get_content.php", {q: str, txtHint: $('#txtHint').innerHTML()}, 
    function(data) {
         alert('test');
    }
);

answered Apr 4, 2013 at 14:55

Naryl

1,8881 gold badge10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Greg Jennings · Accepted Answer · 2013-04-04 14:52:20Z

0

Your data should be an object with the key value pairs for each of the query parameters:

data: { var1: 'theValue1', var2: 'theValue2' }

answered Apr 4, 2013 at 14:52

Greg Jennings

1,65116 silver badges25 bronze badges

Comments

errieman · Accepted Answer · 2013-04-04 14:57:16Z

0

The data needs to be of object type:

data: { hint: $('#txtHint').innerHTML() }

But seeing as that is not your actual intention, the data property is the data you want to send TO the server. And it looks like you want to put the output in #txtHint. So you need to do this:

$('#menurow').change(function () {
    $.ajax({
        type: "GET",
        url: "get_content.php?q="+str,
        success: function(data) {
            $('#txtHint').html(data);
        }
    })
});

edited Apr 4, 2013 at 14:57

answered Apr 4, 2013 at 14:50

errieman

1,9691 gold badge12 silver badges9 bronze badges

1 Comment

t.niese Over a year ago

you still have the syntax error of the question. the true, causes a syntax error.

Collectives™ on Stack Overflow

From regular ajax to jquery ajax

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related