Reputation: 1130

this.value in IE issue

I have a problem with this.value in IE(7-9). I use this code:

<script language="javascript" type="text/javascript">
  $(document).ready(function(){
    $(".inputbox").keyup(function(){
      value = this.value;
      $("#searchRe").load("suggestionSearch.php?value=" + value);
    });
});    
</script>

This works in Firefox and Chrome, but don't pass "value" to "suggestionSearch.php" in IE. I think value = this.value is problem. Please help me :)

NOTE: .inputbox is a textbox.

Upvotes: 1

Answers (8)

Fernando Cordeiro

Reputation: 403

Did you try this?

<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $(".inputbox").keyup('', function(){
            var value = $(this).val();
            $("#searchRe").load("suggestionSearch.php?value=" + value);
        });
    });    
</script>

I just added the Event Data (Probably didn't need, who knows), declared the var value and changed the way to get the value to $(this).val().

Upvotes: 1

erikkallen

Reputation: 34401

Do you have an element with id = "value" on your page? In that case, IE will create a global variable named value for it and refuse to assign the global variable value to something else.

If this is what's happening, the solution is as simple as

<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $(".inputbox").keyup(function(){
            var value = this.value;
            $("#searchRe").load("suggestionSearch.php?value=" + value);
        });
    });    
</script>

(note the var in front of value). This is what you should do anyway.

Upvotes: 2

Manuel Serrano

Reputation: 100

I've tried your code and seems to be working well;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >  
    <head>
        <title></title>
    </head>
    <body>
        <input type="text" class="inputbox" />
        <div id="searchRe"></div>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js" ></script>
        <script language="javascript" type="text/javascript">
          $(document).ready(function(){
            $(".inputbox").keyup(function(){
              value = this.value;
              $("#searchRe").load("s.php?value=" + value);
            });
        });    
        </script>
    </body>
</html>

And this is my php temporary code (since you haven't specified yours)

<?php

    echo $_GET['value'];

?>

Could you please give us more information? (what kind of data is returned from php file, for example)

Edit:

Replace this

$("#searchRe").load("s.php?value=" + value);

with this one

$("#searchRe").load("s.php?value=" + encodeURIComponent(value));

please note the function encodeURIComponent, follow this link for more info.

Upvotes: 2

Selvakumar Arumugam

Reputation: 79830

Try passing the request parameter as an arguement instead of modifying the URL.

//                        arguement ----------v
$("#searchRe").load("suggestionSearch.php", {value: this.value});

Full Code:

$(document).ready(function(){
   $(".inputbox").keyup(function(){
       $("#searchRe").load("suggestionSearch.php", {value: this.value});
   });
});

Also make sure ajax cache is set to false,

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

Upvotes: 1

dgm

Reputation: 194

You can ride the event and use it to obtain needed data. Here is a sample code:

<input class="inputbox" type="text" value="-default-" />


<script>

function changeHandler(event) {
    console.log("changeHandler: ",event.target.value);
}
function keyPressHandler(event) {
    console.log("keyPressHandler: ",event.target.value);
}
function keyDownHandler(event) {
    console.log("keyDownHandler: ",event.target.value);
}
function keyUpHandler(event) {
    console.log("keyUpHandler: ",event.target.value);
}
$(function(){
    $(".inputbox")
        .on("change",{},changeHandler)
        .on("keypress",{},keyPressHandler)
        .on("keydown",{},keyDownHandler)
        .on("keyup",{},keyUpHandler);
})
</script>

console result after focusing the input field and single press of key "s":

    LOG: keyDownHandler: -default- 
    LOG: keyPressHandler: -default- 
    LOG: keyUpHandler: -default-s 
    LOG: changeHandler: -default-s

So desired data can be obtained via the event itself (plus any additional if needed as the second {} param when binding the events.

note: "change" event is fired after input field actually is blurred (focus is lost).

p.s. your "onkyeup" handler might be like this:

    function(event){
            $("#searchRe")
                  .load("suggestionSearch.php?value=" + event.target.value);
    }

Upvotes: 1

Saeed

Reputation: 3775

For this issue you want append instead of load

 StrTemp  = "<ul>"
 $.each(function(value){
  StrTemp += "<li><a id='" + value + "'>" + value + "</a></li>";
 })
 StrTemp += "</ul>"
 $("#searchRe").append(StrTemp);

this code work in IE and other

Best Regards

Upvotes: 0