Loading XML with bootstrap and jQuery

Question

I am trying to load a xml page in one of my html page using bootstrap and jquery. in pure simple html I am able to load without any error. e.g.

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <link href="css/style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function(){
        $("#button1").click(function(){
            $('#text').load("./collection.html");
            alert( "Load was performed." );
        });
    });
</script>
</head>
<body>
    <button id="button1" type="submit">Click Me</button>
    <div>
        <pre id="text"></pre>
    </div>
</body>
</html>

The problem is when I am trying to do same thing in other html page that's using Bootstrap - I am not able to see any contents however I can see the alert message.

Here is my html code with Bootstrap

<script>
    $(document).ready(function(){
        $("#xmlResponseCollection").click(function(){
            $('#txtXmlResponseCollection').load("./collection.html");
            alert( "Load was performed." );
        });
    });
</script>

<tr>
    <td><strong>Response</strong></td>
    <td>
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" 
            data-target="#modalXml" id="xmlResponseCollection">Show xml response</button>
        <div id="modalXml" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            &times;
                        </button>
                        <h4 class="modal-title">XML Response</h4>
                    </div>
                    <div class="modal-body">
                        <pre id="txtXmlResponseCollection"></pre>
                    </div>
                </div>
            </div>
        </div>
    </td>
</tr>

Any idea how to fix this one?

score 0 · Answer 1 · answered Jul 26 '16 at 17:16

0

Have you tried included the bootstrap.js file? It is required for modals

http://getbootstrap.com/javascript/#modals

answered Jul 26 '16 at 17:16

djbielejeski

617
3
12

Yes I have included – Jangid Jul 26 '16 at 17:19
Does it change the class on
to be
when you click the button?
– djbielejeski Jul 26 '16 at 17:21

paddybasi · Answer 2 · 2016-07-27T10:19:51.853

In all of your methods, the alert is tied to the click event handler and not the .load() call, hence will always fire in both cases when the button is clicked. As mentioned in the docs load is an ajax shorthand method, so is asynchronous in nature. You should therefore use the callback argument to execute your alert:

$(document).ready(function(){
   $("#xmlResponseCollection").click(function(){
      $('#txtXmlResponseCollection').load("./collection.html", function(){
         alert( "Load was performed." );
      });
   });
});

Does collection.html contain any script tags in the header? As these will also be executed upon load. You can counter this by specifying to load only a part of the file:

// load an element with id="myXml" from collection.html
$('#txtXmlResponseCollection').load("./collection.html #myXml");

Also, as mentioned by the docs:

When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched element to the returned data

So perhaps the call is unsuccessful? I would monitor the request in the browser (in chrome bring up developer tools by F12, then go to network tab and click your button to see the request being fired).

Another point worth mentioning, is that .load() does an intelligent guess at the dataType of your ajax request. I would either ensure that collection.html is renamed into collection.xml and is a properly formatted xml document, or directly hint to jQuery that you are expecting xml using $.ajax instead (granted is a bit more code though):

function xmlToString(xmlData) { 

    var xmlString;
    //IE
   if (window.ActiveXObject){
       xmlString = xmlData.xml;
   }
   // code for Mozilla, Firefox, Opera, etc.
   else{
    xmlString = (new XMLSerializer()).serializeToString(xmlData);
   }
    return xmlString;
}

$.ajax('./collection.html', { dataType : 'xml' }).done(function(response){
    var xmlString = xmlToString(response);
    // log to console, see we're getting what we want
    console.log('xml', xmlString);

    $('#txtXmlResponseCollection').html(xmlString);
}).fail(function() {
   alert('failed');
});

Hope this helps.

collection.html contains raw xml I want to show as it is '
<?xml version='1.0' encoding='utf-8'?> <m:properties> <d:CustomerCode>66052</d:CustomerCode> <d:Title></d:Title> <d:GivenNames></d:GivenNames> <d:FamilyName></d:FamilyName> <d:Mnemonic>NOKIAUS</d:Mnemonic> <d:Gender></d:Gender> <d:MaritalStatus></d:MaritalStatus> <d:AccountOfficer>2002</d:AccountOfficer> </m:properties>
' — Jangid, Jul 27 '16 at 10:04
Try parsing the xml into a string variant before injecting into the dom. See [http://stackoverflow.com/questions/6507293/convert-xml-to-string-with-jquery](this answer) for more information. I've updated my answer to reflect this. — paddybasi, Jul 27 '16 at 10:16

Loading XML with bootstrap and jQuery

2 Answers2