0

So I have this little function that takes the value or text input and gives it to an iframe's src attribute. It seems to work great on my codepen, but when I export it (with all of the files etc(codepen style) (jquery and everything is loaded properly) and put it on a server, it doesn't work. Does anyone have any ideas why this might be? or how I could be going about this in a better way? --

this is what shows in the url bar on submit with the live version in chrome if that means anything to you. http://site.com/?url-input=http%3A%2F%2Fmy-site.com

A working codepen

HTML

<form class="visitor-input-form">
  <label for="url-input" >
    Type in your current URL and see what your website looks like to almost everyone else.
  </label>
  <input type="text" name="url-input" 
         class="currentUrl" 
         placeholder="http://nouveau.io" id="txtSRC" />

  <input type="submit" class="submit-button" value="View site" />
</form>

jQuery

$(".submit-button").click( function() {
  $(".i-frame").attr("src", $("#txtSRC").val());
});

Thanks for your time.

Update:

So to further test I'm using this. Page loads, tells me the dom is ready. So everything is loading in order. Then I input the url, it tells me the button was pushed, THEN - it tells me the dom is ready AGAIN. So, when I'm pressing enter, it is reloading the page. I do not want the page to reload. I just want the iframe to get switched out. So that is at least a little window to what might be the problem.

jQuery( document ).ready(function($) {

    alert("dom is ready");

    $(".submit-button").click( function() {

    alert("button was pushed");

        $(".i-frame").attr("src", $("#txtSRC").val());

    });
}); // end dom ready
nouveau
  • 1,162
  • 1
  • 8
  • 14

3 Answers3

1

Make sure you either execute your jQuery at the end of the document, after the elements already exist in the page, or in the head within a document ready call:

$(document).ready(function () {
    $(".submit-button").click(function () {
        $(".i-frame").attr("src", $("#txtSRC").val());
    });
});

Codepen does the former.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • Thanks for the reminder. I wrapped it in a `$(document).ready()` and tested head and end of body etc, and you lead my in some directions that got me closer to the answer. – nouveau Nov 04 '13 at 21:52
0

We found this:

Prevent reloading page after submiting form. ( no ajax )

<form onsubmit="return false">

Does the trick, but I have the feeling there is a better answer. I feel like on submit, it should run the scrip maybe instead of on click. I'm going to look into that. <form onsubmit="script"> etc... I'll wait a while before I mark this as answered in the hopes I get something more appropriate, but it is currently working as intended.

Community
  • 1
  • 1
nouveau
  • 1,162
  • 1
  • 8
  • 14
0

The page is reloading, try updating your jQuery to this:

jQuery( document ).ready(function($) {

    $(".submit-button").click( function(e) {
        e.preventDefault();

        $(".i-frame").attr("src", $("#txtSRC").val());

    });
});
bmcculley
  • 2,048
  • 1
  • 14
  • 17
  • I would really like to do this without preventing a default, or returning false. I could use .submit() ... preventDefault and return false both seem unnecessary. I'm not saying they don't work, but there has to be a cleaner way. – nouveau Nov 04 '13 at 23:31
  • I'm not sure I follow what you mean by "a cleaner way". The default is to post the form, which means reloading the page. If you want to do that using ajax you're going to have to stop the default from happening. There's farther explanation on the differences of "return false" and "preventDefault" [over here](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false). – bmcculley Nov 04 '13 at 23:38