Load page contents to href for modal

Question

ola personal I started programming in js and jquery currently I am very beginner and I am with a small problem I am trying to show the content of an outside page in a modal but it shows only link of the search and not the content

<div class="modal fade" id="myModal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
            </button>
             <h4 class="modal-title">Paginas</h4>

        </div>
        <div class="modal-body" id="conteudoModal"></div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

$("a").click(function (e) {
    var id = $(this).attr('id');
    $('#myModal').modal('show');
    $("#conteudoModal").html(this.href);
});

i have another search on this page that works, when I try to use the same code it gives several errors so I tried to do different this is the search

$('#chama').submit(function(e){
  e.preventDefault();
  $.ajax({
    url:'teste_b.php',
    method: 'POST',
    data: { nome_cliente: $('#nome_cliente').val()}, // sua data chegará como $_POST['busca_data'] no PHP.
    success: function(data){                      
        $('#resultado_busca').html(data); // data é o valor printado do lado php
        $('#exampleModalLong').modal('show') ; // abre o modal via jquery
     }
    });                     
  return false; // nao ira para lugar algum 
});

I’m still a beginner and I don’t know exactly why it’s not working

Answer 1

The method .html(htmlString) Jquery expects to receive an html string that will render.

In your first example, you are passing this.href to him, he will take the content of href, in case the link, and render this text in html.

In your second example, the search, which is already working, you are doing a post with Ajax and the content returning from the POST within date, which is probably an html string, is what you pass to the render method.

To have the same behavior by clicking on a <a> load the contents of this page to a modal, you will need to use the method .load jquery.

Example:

$("a").click(function (e) {
    var id = $(this).attr('id');    
    $("#conteudoModal").load(this.href,
        function(response, status, xhr) {
            if (status === "error") {
                alert('erro');
                console.log(response);
            } else {
                $('#myModal').modal('show'); 
            }           
        });
    return false;
});