Home/ Questions/Q 6583751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T16:27:00+00:00

First let me say I’m new to Ajax. I’ve been reading articles from jquery.com

  • 0

First let me say I’m new to Ajax. I’ve been reading articles from jquery.com and some tutorials but I didn’t figured it out yet how this works on what I’m trying to achieve.

I am trying to get the weather for a searched city using Google’s Weather API XML, without page refresh.

I managed to retrieve the Weather XML and parse the data but everytime I search for a different place, the page reloads since my weather widget is under a tab.

This is what I have in my HTML:

<script type="text/javascript">
$(document).ready(function(){
    // FOR THE TAB
    $('.tab_btn').live('click', function (e) {
        $('.tab_content').fadeIn();
    });


    $(".submit").click(function(){
    $.ajax({
        type : 'post',
        url:"weather.php", 
        datatype: "text",
        aysnc:false,
        success:function(result){
        $(".wedata").html(result);
        }});
    });

});
</script>
<style>.tab_content{display:none;}</style>
</head><body>
<input type="button" value="Show Content" class="tab_btn">
<div class="tab_content">
        <h2>Weather</h2>
    <form id="searchform" onKeyPress="return submitenter(this,event)" method="get"/>
    <input type="search" placeholder="City" name="city">
    <input  type="hidden" placeholder="Language" name="lang">
    <input type="submit" value="search" class="submit" style="width:100px">
    </form>
    <div id="weather" class="wedata">




    </div>
</div>

And here is the actual demo I’m working on: http://downloadlive.org.

Now, if I add action="weather.php" on the search form I get the results, but I get redirected to weather.php which is logical. Without the action="weather.php", everytime I search my index which I’m on, adds up /?city=CITY+NAME which shouldn’t. This should be added to weather.php, get the results and then retrieve them back into my index, if that makes sense?

This is my php code for weather.php: http://pastebin.com/aidXCeQg

which can be viewed here: http://downloadlive.org/weather.php

Can someone please help me out with this please?

Thanks alot

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You just need to return false; from the click event handler. This will prevent the default action from occuring – in this case, submitting the form. Also, remove the async: false setting. You almost never want synchronous ajax requests.

    $(".submit").click(function(){
    $.ajax({
        type : 'post',
        url:"weather.php", 
        datatype: "text",
        success: function(result){
            $(".wedata").html(result);
        }
    });

    return false;
});

    Alternately you can pass a parameter name to the callback and then use event.preventDefault() to accomplish the same result as above:

    $(".submit").click(function(e){
    $.ajax({
        type : 'post',
        url:"weather.php", 
        datatype: "text",
        success: function(result){
            $(".wedata").html(result);
        }
    });

    e.preventDefault();
});

    You need to send the form data with the POST. It’s super-easy to do this using .serialize().

    $(".submit").click(function(){
    $.ajax({
        type : 'post',
        url:"weather.php",
        data: $(this.form).serialize(),
        datatype: "text",
        success: function(result){
            $(".wedata").html(result);
        }
    });

    return false;
});
    • 0