Question

Greetings from some noob trying to learn JQuery,

I am attempting to make it when you type something in a box below a div layer it reloads that layer upon submission of the form with a php get of the text box in the form. Expected behavior is it would reload that box, actual behavior is it don’t do anything. Can someone help me out here…. Below is the code.

<div id="currentwxdiv">This is where the new stuff happens
</div>
<form name="changewx" action="/">
<input type="text" id="city">
 <input type="submit" name="submit" class="button" id="submit_btn" value="New City" /> 
</form>
<script>
  /* attach a submit handler to the form */
  $('form[name="changewx"]').submit(function(event) {


    /* get some values from elements on the page: */
    var $form = $( this ),
        city = $('#city').val()

    /* Send the data using post and put the results in a div */
    $('#currentwxdiv').load('http://api.mesodiscussion.com/?location=' + city);
    return false;

  });
</script>

Its giving the Javascript Console Error Error….

“XMLHttpRequest cannot load http://api.mesodiscussion.com/?location=goodjob. Origin http://weatherofoss.com is not allowed by Access-Control-Allow-Origin.”

Answer 1

You are using POST method? is impossible to post to an external url because with ajax, the url fails the “Same Origin POlice“.

If you use GET method, is possible to do that.

Another solution is to make a proxy. A little script that recive the params and then… using CURL or another thing you have to post to the external URL… finally, you jquery have to do the post thing to the proxy:

For example:

$.ajax({
  url: '/proxy.php?location=' + city,
  success: function(data) {
     $('#currentwxdiv').html(data);

  }
});

---