jquery $.Post response not loading into div

StackOverflow https://stackoverflow.com/questions/16591580

  •  29-05-2022
  •  | 
  •  

Question

I'm trying to write a form that when a user submits clicks submit, ajax adds data to a div below the form. I've made the html form and without any jquery you can submit the form using POST and the corresponding php on the server spits out a small XML document with the answer.

What I dont know what to do is to get jquery to place the data from the XML document into html tags inside the div.

The returned XML looks like this:

    <?xml version="1.0"?>
    <url_shortener>
    <shortlink>http://newshorterlink.com/2</shortlink> 
    <longlink>Apple.com</longlink> 
    </url_shortener>

The html form looks like this:

        <script type="text/javascript">
        $(document).ready(function(){
            $("#url_shorten_form").submit( function () {    
              $.post(
               'post_linkme.php',
                $(this).serialize(),
                function(data){
                  $("#result").html(data)
                },
                "xml"
              );
              return false;   
            });   
        });
</script>

</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
    <div id="header" data-theme="a" data-role="header" class="header">
        <h3>
            Header
        </h3>
    </div>
    <div data-role="content">
        <!-- Form to shorten URL -->
        <form id="url_shorten_form" action="" method="POST" class="url_shorten_form">
            <div data-role="fieldcontain" class="long_url">
                <label for="long_url">URL To Shorten</label>
                <input name="long_url" id="long_url" placeholder="http://www.reallylongurl.com" value="" type="text">
            </div>
            <div data-role="fieldcontain" class="qr_generate">
                <label for="qr_generate">Generate QR Code?</label>
                <select name="qr_generate" id="qr_generate" data-theme="" data-role="slider" data-mini="true">
                    <option value="0">No</option>
                    <option value="1">Yes</option>
                </select>
            </div>
    <input form="url_shorten_form" id="submit" type="submit" value="Submit" class="submit">
        </form>
        <!-- Response displaying new short url and QR Code if required -->
        <div id="result" data-theme="a" class="result">
        This Text to be replaced
        </div>

I dont understand what I need to do to get the XML parsed and then presented into the div 'result'

Many thanks,

Was it helpful?

Solution

You can extract elements from the XML by creating a JQuery object with it. E.g. to create a link:

<script type="text/javascript">
        $(document).ready(function(){
            $("#url_shorten_form").submit( function () {    
              $.post(
               'post_linkme.php',
                $(this).serialize(),
                function(data){
                  var shortLink = $(data).find("shortlink").text();
                  var longLink = $(data).find("longlink").text();
                  var link=$("<a></a>").attr("href",shortLink).text(longLink);
                  $("#result").html(link);
                },
                "xml"
              );
              return false;   
            });   
        });
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top