CODEWITHSUNDEEP
javascriptjqueryajaxjsptwitter-bootstrap
user962206
user962206

Reputation: 16117

JQuery loading a page fragment returns an undefined

Here's a the page that was being returned by my response by ajax.

<!DOCTYPE HTML>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
</head>
<body>

    <div id = "div1">
        <h1>HI am a dashboard</h1>
        <h1>HI am a dashboard</h1>
        <h1>HI am a dashboard</h1>
    </div>
</body>
</html>

And on my ajax success code I am doing this

$('body').on('submit', '#sign-in', function(e) {
    e.preventDefault();

    var data = $(this).serialize();

    var url = $(this).attr('action');
    $.ajax({
        //this is the php file that processes the data and send mail
        url : url,
        type : "POST",
        data : data,
        dataType:"html",
        //Do not cache the page
        cache : false,
        //success
        success : function(data) {
            console.log(data);
            console.log($(data).find('#div1').html());
        }
    });
})

the console.log($(data).find('#div1').html()); is undefined. while the 

console.log(data);

returns the page that I have previously stated.

UPDATE Found the problem, I have two 'data' variables in my code. I've changed the one in success but it still returning undefined

$('#submit-login').on('click',function(e){
        $('#hidden-submit-login').click();
})

    $('body').on('submit', '#sign-in', function(e) {
        e.preventDefault();

        var data = $(this).serialize();

        var url = $(this).attr('action');
        $.ajax({
            //this is the php file that processes the data and send mail
            url : url,
            type : "POST",
            data : data,
            dataType:"html",
            //Do not cache the page
            cache : false,
            //success
            success : function(response) {
                console.log($(response).find('#div1').html());
                console.log(response);
                //console.log($((html).find('#div1').html();
            }
        });
    });

Upvotes: 0

Views: 1126

Answers (1)

Onur Yıldırım
Onur Yıldırım

Reputation: 33634

You are applying a jQuery selector on a string not a DOM element.
The response object is the result of the request; it does not exist in your DOM.

Just like; document.getElementById('div1') would return null.

You should create/append an HTML element to the DOM before using it.

If what you want to do is to parse the <div id="div1">...</div> block inside the page you make the request:

First I suggest you get rid of all the other tags (including <html>, <body>, <head> and everything inside <head>). So your file would only include:

<div id="div1">
    <h1>HI am a dashboard</h1>
    <h1>HI am a dashboard</h1>
    <h1>HI am a dashboard</h1>
</div>

Then within your AJAX success() callback; use jQuery DOM insertion methods (choose the appropriate one for you here: inside, outside):

$.ajax({
    url : url,
    type : "POST",
    data : data,
    dataType: "text",
    cache : false,
    success : function(data) {
        if (data) {
            $('body').append(data); //this will append the html inside the response; at the end bottom of your page's body
            console.log($('#div1').html());
        }
    }
});

Now you have your div1 appended at the bottom of the page's body, so it's accessible.

console.log($('#div1').html());

Note: Make sure you the id div1 is unique so you don't select other existing elements when you do further manipulation.

Upvotes: 1

Related Questions