jQuery variable as iframe URL

Question

Why isn't this script working?

$(function() {
    var isbn = $('input').val();
    $('button').click(function() {
        $("#data").html('<iframe height="500" width="1000" src="http://books.google.com/books?vid=ISBN' + isbn + '" />');
    });
});

As you can see, I'm trying to do an extremely simple ISBN lookup field for a demo web site. The script is supposed to take the value of the input and insert it into the URL. Why isn't it working?

Also, is there a better way to accomplish this end?

I realize, of course, that iframes are rubbish, but I just want to keep it simple right now.

Answer 1

Why not load the page you wanted to view through the ajax load technique, so fetching the html and displaying it within the element:

$(function() {
    var isbn = $('input').val();
    $('button').click(function() {
        $("#data").load('http://books.google.com/books?vid=ISBN' + isbn);
    });
});

Answer 2

It's not clear when your code gets called, but is this line:

var isbn = $('input').val();

only called once at page-load time, whereas it should be within the click handler:

$('button').click(function() {
    var isbn = $('input').val();
    $("#data").html('<iframe height="500" width="1000" src="http://books.google.com/books?vid=ISBN' + isbn + '" />');
});

Answer 3

Hi, the problem is not your code but its the query string you have.

please amend as follows and it should work:

var isbn = "1603038159";

        $("#data").html('<iframe height="500" width="600" src="http://books.google.com/books?as_isbn=' + isbn);