Load query search results in modal instead of new page












0















Edit: Here is a screenshot: Modal Screenshot



Edit: I edited the code and I am no longer redirected to a new page when clicking the 'Search" button, but my output from index.php is still not showing in the modal. When I click 'Search', the modal pops up with an empty body. How do I get my output from index.php to show in the modal's body?



I have a search bar for users to enter a query. Upon clicking 'Search', a modal should appear with the query results.



My code isn't displaying anything in the modal window. When I click the 'Search' button, the modal window opens but immediately afterwards a new page is loaded with the query results.



How do change it so that the query results display in the modal window rather than a new page?



index.php






<head>

  <title>Search</title>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link rel="stylesheet" type="text/css" href="style.css"/>

 </head>

 <body>

  <form method="POST" action="#">

   <input type="text" name="q" placeholder="Enter query"/>

   <input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">

   </form>

 </body>



<script>

  $('form').submit(function(e){

  e.preventDefault() // do not submit form

      // do get request

     $.get( 'search.php', { q : },function(e){

         // then show the modal first

         $('#mymodal').modal('show');

         // then put the results there

         $('#mymodal:visible .modal-container .modal-body').html(e);

     });

  });

</script>



 <!-- The Modal -->

<div class="modal" id="mymodal">

  <div class="modal-dialog">

    <div class="modal-content">



      <!-- Modal Header -->

      <div class="modal-header">

        <h4 class="modal-title">Modal Heading</h4>

        <button type="button" class="close" data-dismiss="modal">&times;</button>

      </div>



      <!-- Modal body -->

      <div class="modal-body">



      </div>



      <!-- Modal footer -->

      <div class="modal-footer">

        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

      </div>



    </div>

  </div>

</div>





search.php






<?php

  error_reporting(E_ALL);

  ini_set('display_errors',1);



  include_once('db.php'); //Connect to database

  if(isset($_POST['q'])){

    $q = $_POST['q'];



    //get required columns

    $query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error

    $count = mysqli_num_rows($query);

    if($count == 0){

      $output = '<h2>No result found</h2>';

    }else{

      while($row = mysqli_fetch_assoc($query)){

        $output .= '<h2>'.$row['yupikWord'].'</h2><br>';

        $output .= '<h2>'.$row['englishWord'].'</h2><br>';

        $output .= '<h2>'.$row['audio'].'</h2><br>';

        $audio_name = $row['audio'];

        $output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';

      }

    }

    echo $output;

  }else{

    "Please add search parameter";

  }



  mysqli_close($conn);

?>








php jquery mysql ajax bootstrap-modal







share|improve this question

























  • are you redirected to search.php after clicking on submit button?

    – Dhiren
    Nov 26 '18 at 5:20











  • @Dhiren yes, redirected to search.php

    – user10704252
    Nov 26 '18 at 6:30











  • ok then please change type to "button" from "submit" and change action="#" instead of search.php in form tag and try...

    – Dhiren
    Nov 26 '18 at 6:32













  • @Dhiren okay I am no longer redirected. Now the modal pops up but there is nothing in the body. How can I get the output in search.php to show up in the modal?

    – user10704252
    Nov 26 '18 at 6:42











  • please put a debugger in $.get call and check where and how you are getting the values in that and then set that data in modal-body. For now you are returning value but you are not setting that values in any html tags thats why nothing shows up.

    – Dhiren
    Nov 26 '18 at 6:53


















0















Edit: Here is a screenshot: Modal Screenshot



Edit: I edited the code and I am no longer redirected to a new page when clicking the 'Search" button, but my output from index.php is still not showing in the modal. When I click 'Search', the modal pops up with an empty body. How do I get my output from index.php to show in the modal's body?



I have a search bar for users to enter a query. Upon clicking 'Search', a modal should appear with the query results.



My code isn't displaying anything in the modal window. When I click the 'Search' button, the modal window opens but immediately afterwards a new page is loaded with the query results.



How do change it so that the query results display in the modal window rather than a new page?



index.php






<head>

  <title>Search</title>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link rel="stylesheet" type="text/css" href="style.css"/>

 </head>

 <body>

  <form method="POST" action="#">

   <input type="text" name="q" placeholder="Enter query"/>

   <input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">

   </form>

 </body>



<script>

  $('form').submit(function(e){

  e.preventDefault() // do not submit form

      // do get request

     $.get( 'search.php', { q : },function(e){

         // then show the modal first

         $('#mymodal').modal('show');

         // then put the results there

         $('#mymodal:visible .modal-container .modal-body').html(e);

     });

  });

</script>



 <!-- The Modal -->

<div class="modal" id="mymodal">

  <div class="modal-dialog">

    <div class="modal-content">



      <!-- Modal Header -->

      <div class="modal-header">

        <h4 class="modal-title">Modal Heading</h4>

        <button type="button" class="close" data-dismiss="modal">&times;</button>

      </div>



      <!-- Modal body -->

      <div class="modal-body">



      </div>



      <!-- Modal footer -->

      <div class="modal-footer">

        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

      </div>



    </div>

  </div>

</div>





search.php






<?php

  error_reporting(E_ALL);

  ini_set('display_errors',1);



  include_once('db.php'); //Connect to database

  if(isset($_POST['q'])){

    $q = $_POST['q'];



    //get required columns

    $query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error

    $count = mysqli_num_rows($query);

    if($count == 0){

      $output = '<h2>No result found</h2>';

    }else{

      while($row = mysqli_fetch_assoc($query)){

        $output .= '<h2>'.$row['yupikWord'].'</h2><br>';

        $output .= '<h2>'.$row['englishWord'].'</h2><br>';

        $output .= '<h2>'.$row['audio'].'</h2><br>';

        $audio_name = $row['audio'];

        $output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';

      }

    }

    echo $output;

  }else{

    "Please add search parameter";

  }



  mysqli_close($conn);

?>








php jquery mysql ajax bootstrap-modal







share|improve this question

























  • are you redirected to search.php after clicking on submit button?

    – Dhiren
    Nov 26 '18 at 5:20











  • @Dhiren yes, redirected to search.php

    – user10704252
    Nov 26 '18 at 6:30











  • ok then please change type to "button" from "submit" and change action="#" instead of search.php in form tag and try...

    – Dhiren
    Nov 26 '18 at 6:32













  • @Dhiren okay I am no longer redirected. Now the modal pops up but there is nothing in the body. How can I get the output in search.php to show up in the modal?

    – user10704252
    Nov 26 '18 at 6:42











  • please put a debugger in $.get call and check where and how you are getting the values in that and then set that data in modal-body. For now you are returning value but you are not setting that values in any html tags thats why nothing shows up.

    – Dhiren
    Nov 26 '18 at 6:53
















0












0








0








Edit: Here is a screenshot: Modal Screenshot



Edit: I edited the code and I am no longer redirected to a new page when clicking the 'Search" button, but my output from index.php is still not showing in the modal. When I click 'Search', the modal pops up with an empty body. How do I get my output from index.php to show in the modal's body?



I have a search bar for users to enter a query. Upon clicking 'Search', a modal should appear with the query results.



My code isn't displaying anything in the modal window. When I click the 'Search' button, the modal window opens but immediately afterwards a new page is loaded with the query results.



How do change it so that the query results display in the modal window rather than a new page?



index.php






<head>

  <title>Search</title>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link rel="stylesheet" type="text/css" href="style.css"/>

 </head>

 <body>

  <form method="POST" action="#">

   <input type="text" name="q" placeholder="Enter query"/>

   <input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">

   </form>

 </body>



<script>

  $('form').submit(function(e){

  e.preventDefault() // do not submit form

      // do get request

     $.get( 'search.php', { q : },function(e){

         // then show the modal first

         $('#mymodal').modal('show');

         // then put the results there

         $('#mymodal:visible .modal-container .modal-body').html(e);

     });

  });

</script>



 <!-- The Modal -->

<div class="modal" id="mymodal">

  <div class="modal-dialog">

    <div class="modal-content">



      <!-- Modal Header -->

      <div class="modal-header">

        <h4 class="modal-title">Modal Heading</h4>

        <button type="button" class="close" data-dismiss="modal">&times;</button>

      </div>



      <!-- Modal body -->

      <div class="modal-body">



      </div>



      <!-- Modal footer -->

      <div class="modal-footer">

        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

      </div>



    </div>

  </div>

</div>





search.php






<?php

  error_reporting(E_ALL);

  ini_set('display_errors',1);



  include_once('db.php'); //Connect to database

  if(isset($_POST['q'])){

    $q = $_POST['q'];



    //get required columns

    $query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error

    $count = mysqli_num_rows($query);

    if($count == 0){

      $output = '<h2>No result found</h2>';

    }else{

      while($row = mysqli_fetch_assoc($query)){

        $output .= '<h2>'.$row['yupikWord'].'</h2><br>';

        $output .= '<h2>'.$row['englishWord'].'</h2><br>';

        $output .= '<h2>'.$row['audio'].'</h2><br>';

        $audio_name = $row['audio'];

        $output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';

      }

    }

    echo $output;

  }else{

    "Please add search parameter";

  }



  mysqli_close($conn);

?>








php jquery mysql ajax bootstrap-modal







share|improve this question
















Edit: Here is a screenshot: Modal Screenshot



Edit: I edited the code and I am no longer redirected to a new page when clicking the 'Search" button, but my output from index.php is still not showing in the modal. When I click 'Search', the modal pops up with an empty body. How do I get my output from index.php to show in the modal's body?



I have a search bar for users to enter a query. Upon clicking 'Search', a modal should appear with the query results.



My code isn't displaying anything in the modal window. When I click the 'Search' button, the modal window opens but immediately afterwards a new page is loaded with the query results.



How do change it so that the query results display in the modal window rather than a new page?



index.php






<head>

  <title>Search</title>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link rel="stylesheet" type="text/css" href="style.css"/>

 </head>

 <body>

  <form method="POST" action="#">

   <input type="text" name="q" placeholder="Enter query"/>

   <input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">

   </form>

 </body>



<script>

  $('form').submit(function(e){

  e.preventDefault() // do not submit form

      // do get request

     $.get( 'search.php', { q : },function(e){

         // then show the modal first

         $('#mymodal').modal('show');

         // then put the results there

         $('#mymodal:visible .modal-container .modal-body').html(e);

     });

  });

</script>



 <!-- The Modal -->

<div class="modal" id="mymodal">

  <div class="modal-dialog">

    <div class="modal-content">



      <!-- Modal Header -->

      <div class="modal-header">

        <h4 class="modal-title">Modal Heading</h4>

        <button type="button" class="close" data-dismiss="modal">&times;</button>

      </div>



      <!-- Modal body -->

      <div class="modal-body">



      </div>



      <!-- Modal footer -->

      <div class="modal-footer">

        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

      </div>



    </div>

  </div>

</div>





search.php






<?php

  error_reporting(E_ALL);

  ini_set('display_errors',1);



  include_once('db.php'); //Connect to database

  if(isset($_POST['q'])){

    $q = $_POST['q'];



    //get required columns

    $query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error

    $count = mysqli_num_rows($query);

    if($count == 0){

      $output = '<h2>No result found</h2>';

    }else{

      while($row = mysqli_fetch_assoc($query)){

        $output .= '<h2>'.$row['yupikWord'].'</h2><br>';

        $output .= '<h2>'.$row['englishWord'].'</h2><br>';

        $output .= '<h2>'.$row['audio'].'</h2><br>';

        $audio_name = $row['audio'];

        $output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';

      }

    }

    echo $output;

  }else{

    "Please add search parameter";

  }



  mysqli_close($conn);

?>








<head>

  <title>Search</title>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link rel="stylesheet" type="text/css" href="style.css"/>

 </head>

 <body>

  <form method="POST" action="#">

   <input type="text" name="q" placeholder="Enter query"/>

   <input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">

   </form>

 </body>



<script>

  $('form').submit(function(e){

  e.preventDefault() // do not submit form

      // do get request

     $.get( 'search.php', { q : },function(e){

         // then show the modal first

         $('#mymodal').modal('show');

         // then put the results there

         $('#mymodal:visible .modal-container .modal-body').html(e);

     });

  });

</script>



 <!-- The Modal -->

<div class="modal" id="mymodal">

  <div class="modal-dialog">

    <div class="modal-content">



      <!-- Modal Header -->

      <div class="modal-header">

        <h4 class="modal-title">Modal Heading</h4>

        <button type="button" class="close" data-dismiss="modal">&times;</button>

      </div>



      <!-- Modal body -->

      <div class="modal-body">



      </div>



      <!-- Modal footer -->

      <div class="modal-footer">

        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

      </div>



    </div>

  </div>

</div>





<head>

  <title>Search</title>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link rel="stylesheet" type="text/css" href="style.css"/>

 </head>

 <body>

  <form method="POST" action="#">

   <input type="text" name="q" placeholder="Enter query"/>

   <input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">

   </form>

 </body>



<script>

  $('form').submit(function(e){

  e.preventDefault() // do not submit form

      // do get request

     $.get( 'search.php', { q : },function(e){

         // then show the modal first

         $('#mymodal').modal('show');

         // then put the results there

         $('#mymodal:visible .modal-container .modal-body').html(e);

     });

  });

</script>



 <!-- The Modal -->

<div class="modal" id="mymodal">

  <div class="modal-dialog">

    <div class="modal-content">



      <!-- Modal Header -->

      <div class="modal-header">

        <h4 class="modal-title">Modal Heading</h4>

        <button type="button" class="close" data-dismiss="modal">&times;</button>

      </div>



      <!-- Modal body -->

      <div class="modal-body">



      </div>



      <!-- Modal footer -->

      <div class="modal-footer">

        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

      </div>



    </div>

  </div>

</div>





<?php

  error_reporting(E_ALL);

  ini_set('display_errors',1);



  include_once('db.php'); //Connect to database

  if(isset($_POST['q'])){

    $q = $_POST['q'];



    //get required columns

    $query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error

    $count = mysqli_num_rows($query);

    if($count == 0){

      $output = '<h2>No result found</h2>';

    }else{

      while($row = mysqli_fetch_assoc($query)){

        $output .= '<h2>'.$row['yupikWord'].'</h2><br>';

        $output .= '<h2>'.$row['englishWord'].'</h2><br>';

        $output .= '<h2>'.$row['audio'].'</h2><br>';

        $audio_name = $row['audio'];

        $output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';

      }

    }

    echo $output;

  }else{

    "Please add search parameter";

  }



  mysqli_close($conn);

?>





<?php

  error_reporting(E_ALL);

  ini_set('display_errors',1);



  include_once('db.php'); //Connect to database

  if(isset($_POST['q'])){

    $q = $_POST['q'];



    //get required columns

    $query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error

    $count = mysqli_num_rows($query);

    if($count == 0){

      $output = '<h2>No result found</h2>';

    }else{

      while($row = mysqli_fetch_assoc($query)){

        $output .= '<h2>'.$row['yupikWord'].'</h2><br>';

        $output .= '<h2>'.$row['englishWord'].'</h2><br>';

        $output .= '<h2>'.$row['audio'].'</h2><br>';

        $audio_name = $row['audio'];

        $output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';

      }

    }

    echo $output;

  }else{

    "Please add search parameter";

  }



  mysqli_close($conn);

?>





php jquery mysql ajax bootstrap-modal




php jquery mysql ajax bootstrap-modal






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 27 '18 at 23:17







user10704252

















asked Nov 26 '18 at 3:24









user10704252user10704252

112




112













  • are you redirected to search.php after clicking on submit button?

    – Dhiren
    Nov 26 '18 at 5:20











  • @Dhiren yes, redirected to search.php

    – user10704252
    Nov 26 '18 at 6:30











  • ok then please change type to "button" from "submit" and change action="#" instead of search.php in form tag and try...

    – Dhiren
    Nov 26 '18 at 6:32













  • @Dhiren okay I am no longer redirected. Now the modal pops up but there is nothing in the body. How can I get the output in search.php to show up in the modal?

    – user10704252
    Nov 26 '18 at 6:42











  • please put a debugger in $.get call and check where and how you are getting the values in that and then set that data in modal-body. For now you are returning value but you are not setting that values in any html tags thats why nothing shows up.

    – Dhiren
    Nov 26 '18 at 6:53





















  • are you redirected to search.php after clicking on submit button?

    – Dhiren
    Nov 26 '18 at 5:20











  • @Dhiren yes, redirected to search.php

    – user10704252
    Nov 26 '18 at 6:30











  • ok then please change type to "button" from "submit" and change action="#" instead of search.php in form tag and try...

    – Dhiren
    Nov 26 '18 at 6:32













  • @Dhiren okay I am no longer redirected. Now the modal pops up but there is nothing in the body. How can I get the output in search.php to show up in the modal?

    – user10704252
    Nov 26 '18 at 6:42











  • please put a debugger in $.get call and check where and how you are getting the values in that and then set that data in modal-body. For now you are returning value but you are not setting that values in any html tags thats why nothing shows up.

    – Dhiren
    Nov 26 '18 at 6:53



















are you redirected to search.php after clicking on submit button?

– Dhiren
Nov 26 '18 at 5:20





are you redirected to search.php after clicking on submit button?

– Dhiren
Nov 26 '18 at 5:20













@Dhiren yes, redirected to search.php

– user10704252
Nov 26 '18 at 6:30





@Dhiren yes, redirected to search.php

– user10704252
Nov 26 '18 at 6:30













ok then please change type to "button" from "submit" and change action="#" instead of search.php in form tag and try...

– Dhiren
Nov 26 '18 at 6:32







ok then please change type to "button" from "submit" and change action="#" instead of search.php in form tag and try...

– Dhiren
Nov 26 '18 at 6:32















@Dhiren okay I am no longer redirected. Now the modal pops up but there is nothing in the body. How can I get the output in search.php to show up in the modal?

– user10704252
Nov 26 '18 at 6:42





@Dhiren okay I am no longer redirected. Now the modal pops up but there is nothing in the body. How can I get the output in search.php to show up in the modal?

– user10704252
Nov 26 '18 at 6:42













please put a debugger in $.get call and check where and how you are getting the values in that and then set that data in modal-body. For now you are returning value but you are not setting that values in any html tags thats why nothing shows up.

– Dhiren
Nov 26 '18 at 6:53







please put a debugger in $.get call and check where and how you are getting the values in that and then set that data in modal-body. For now you are returning value but you are not setting that values in any html tags thats why nothing shows up.

– Dhiren
Nov 26 '18 at 6:53














1 Answer
1






active

oldest

votes


















0














You can try this possible solution by following this changes
- Remove Form tag
- Add Onclick Listner on Search Button
- First put content in Modal and then show Modal



index.php






$(document).ready(function () {



$('.search').click(function () {

    var q= $('#q').val();



    // AJAX request

    $.ajax({

        url: 'search.php',

        type: 'post',

        data: {

            q: q

        },

        success: function (response) {

            // Add response in Modal body

            $('.modal-body').html(response);





            $('#mymodal').modal('show');

        }

    });

});

});

<head>

   <title>Search</title>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>

   <!-- Script -->

   <script src='jquery-3.1.1.min.js' type='text/javascript'></script>

   <script src='bootstrap/js/bootstrap.min.js' type='text/javascript'></script>

</head>

<body>

   <input type="text" id="q" name="q" placeholder="Enter query"/>

   <input type="button" class="search" name="search" value="Search">

</body>

<!-- The Modal -->

<div class="modal" id="mymodal">

   <div class="modal-dialog">

      <div class="modal-content">

         <!-- Modal Header -->

         <div class="modal-header">

            <h4 class="modal-title">Modal Heading</h4>

            <button type="button" class="close" data-dismiss="modal">&times;</button>

         </div>

         <!-- Modal body -->

         <div class="modal-body">

         </div>

         <!-- Modal footer -->

         <div class="modal-footer">

            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

         </div>

      </div>

   </div>

</div>








share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474405%2fload-query-search-results-in-modal-instead-of-new-page%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    You can try this possible solution by following this changes
    - Remove Form tag
    - Add Onclick Listner on Search Button
    - First put content in Modal and then show Modal



    index.php






    $(document).ready(function () {
    

    
$('.search').click(function () {
    
    var q= $('#q').val();
    

    
    // AJAX request
    
    $.ajax({
    
        url: 'search.php',
    
        type: 'post',
    
        data: {
    
            q: q
    
        },
    
        success: function (response) {
    
            // Add response in Modal body
    
            $('.modal-body').html(response);
    

    

    
            $('#mymodal').modal('show');
    
        }
    
    });
    
});
    
});

    <head>
    
   <title>Search</title>
    
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
   <link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
    
   <!-- Script -->
    
   <script src='jquery-3.1.1.min.js' type='text/javascript'></script>
    
   <script src='bootstrap/js/bootstrap.min.js' type='text/javascript'></script>
    
</head>
    
<body>
    
   <input type="text" id="q" name="q" placeholder="Enter query"/>
    
   <input type="button" class="search" name="search" value="Search">
    
</body>
    
<!-- The Modal -->
    
<div class="modal" id="mymodal">
    
   <div class="modal-dialog">
    
      <div class="modal-content">
    
         <!-- Modal Header -->
    
         <div class="modal-header">
    
            <h4 class="modal-title">Modal Heading</h4>
    
            <button type="button" class="close" data-dismiss="modal">&times;</button>
    
         </div>
    
         <!-- Modal body -->
    
         <div class="modal-body">
    
         </div>
    
         <!-- Modal footer -->
    
         <div class="modal-footer">
    
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
    
         </div>
    
      </div>
    
   </div>
    
</div>








    share|improve this answer




























      0














      You can try this possible solution by following this changes
      - Remove Form tag
      - Add Onclick Listner on Search Button
      - First put content in Modal and then show Modal



      index.php






      $(document).ready(function () {
      

      
$('.search').click(function () {
      
    var q= $('#q').val();
      

      
    // AJAX request
      
    $.ajax({
      
        url: 'search.php',
      
        type: 'post',
      
        data: {
      
            q: q
      
        },
      
        success: function (response) {
      
            // Add response in Modal body
      
            $('.modal-body').html(response);
      

      

      
            $('#mymodal').modal('show');
      
        }
      
    });
      
});
      
});

      <head>
      
   <title>Search</title>
      
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      
   <link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
      
   <!-- Script -->
      
   <script src='jquery-3.1.1.min.js' type='text/javascript'></script>
      
   <script src='bootstrap/js/bootstrap.min.js' type='text/javascript'></script>
      
</head>
      
<body>
      
   <input type="text" id="q" name="q" placeholder="Enter query"/>
      
   <input type="button" class="search" name="search" value="Search">
      
</body>
      
<!-- The Modal -->
      
<div class="modal" id="mymodal">
      
   <div class="modal-dialog">
      
      <div class="modal-content">
      
         <!-- Modal Header -->
      
         <div class="modal-header">
      
            <h4 class="modal-title">Modal Heading</h4>
      
            <button type="button" class="close" data-dismiss="modal">&times;</button>
      
         </div>
      
         <!-- Modal body -->
      
         <div class="modal-body">
      
         </div>
      
         <!-- Modal footer -->
      
         <div class="modal-footer">
      
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      
         </div>
      
      </div>
      
   </div>
      
</div>








      share|improve this answer


























        0












        0








        0







        You can try this possible solution by following this changes
        - Remove Form tag
        - Add Onclick Listner on Search Button
        - First put content in Modal and then show Modal



        index.php






        $(document).ready(function () {
        

        
$('.search').click(function () {
        
    var q= $('#q').val();
        

        
    // AJAX request
        
    $.ajax({
        
        url: 'search.php',
        
        type: 'post',
        
        data: {
        
            q: q
        
        },
        
        success: function (response) {
        
            // Add response in Modal body
        
            $('.modal-body').html(response);
        

        

        
            $('#mymodal').modal('show');
        
        }
        
    });
        
});
        
});

        <head>
        
   <title>Search</title>
        
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
   <link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
        
   <!-- Script -->
        
   <script src='jquery-3.1.1.min.js' type='text/javascript'></script>
        
   <script src='bootstrap/js/bootstrap.min.js' type='text/javascript'></script>
        
</head>
        
<body>
        
   <input type="text" id="q" name="q" placeholder="Enter query"/>
        
   <input type="button" class="search" name="search" value="Search">
        
</body>
        
<!-- The Modal -->
        
<div class="modal" id="mymodal">
        
   <div class="modal-dialog">
        
      <div class="modal-content">
        
         <!-- Modal Header -->
        
         <div class="modal-header">
        
            <h4 class="modal-title">Modal Heading</h4>
        
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        
         </div>
        
         <!-- Modal body -->
        
         <div class="modal-body">
        
         </div>
        
         <!-- Modal footer -->
        
         <div class="modal-footer">
        
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        
         </div>
        
      </div>
        
   </div>
        
</div>








        share|improve this answer













        You can try this possible solution by following this changes
        - Remove Form tag
        - Add Onclick Listner on Search Button
        - First put content in Modal and then show Modal



        index.php






        $(document).ready(function () {
        

        
$('.search').click(function () {
        
    var q= $('#q').val();
        

        
    // AJAX request
        
    $.ajax({
        
        url: 'search.php',
        
        type: 'post',
        
        data: {
        
            q: q
        
        },
        
        success: function (response) {
        
            // Add response in Modal body
        
            $('.modal-body').html(response);
        

        

        
            $('#mymodal').modal('show');
        
        }
        
    });
        
});
        
});

        <head>
        
   <title>Search</title>
        
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
   <link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
        
   <!-- Script -->
        
   <script src='jquery-3.1.1.min.js' type='text/javascript'></script>
        
   <script src='bootstrap/js/bootstrap.min.js' type='text/javascript'></script>
        
</head>
        
<body>
        
   <input type="text" id="q" name="q" placeholder="Enter query"/>
        
   <input type="button" class="search" name="search" value="Search">
        
</body>
        
<!-- The Modal -->
        
<div class="modal" id="mymodal">
        
   <div class="modal-dialog">
        
      <div class="modal-content">
        
         <!-- Modal Header -->
        
         <div class="modal-header">
        
            <h4 class="modal-title">Modal Heading</h4>
        
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        
         </div>
        
         <!-- Modal body -->
        
         <div class="modal-body">
        
         </div>
        
         <!-- Modal footer -->
        
         <div class="modal-footer">
        
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        
         </div>
        
      </div>
        
   </div>
        
</div>








        $(document).ready(function () {
        

        
$('.search').click(function () {
        
    var q= $('#q').val();
        

        
    // AJAX request
        
    $.ajax({
        
        url: 'search.php',
        
        type: 'post',
        
        data: {
        
            q: q
        
        },
        
        success: function (response) {
        
            // Add response in Modal body
        
            $('.modal-body').html(response);
        

        

        
            $('#mymodal').modal('show');
        
        }
        
    });
        
});
        
});

        <head>
        
   <title>Search</title>
        
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
   <link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
        
   <!-- Script -->
        
   <script src='jquery-3.1.1.min.js' type='text/javascript'></script>
        
   <script src='bootstrap/js/bootstrap.min.js' type='text/javascript'></script>
        
</head>
        
<body>
        
   <input type="text" id="q" name="q" placeholder="Enter query"/>
        
   <input type="button" class="search" name="search" value="Search">
        
</body>
        
<!-- The Modal -->
        
<div class="modal" id="mymodal">
        
   <div class="modal-dialog">
        
      <div class="modal-content">
        
         <!-- Modal Header -->
        
         <div class="modal-header">
        
            <h4 class="modal-title">Modal Heading</h4>
        
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        
         </div>
        
         <!-- Modal body -->
        
         <div class="modal-body">
        
         </div>
        
         <!-- Modal footer -->
        
         <div class="modal-footer">
        
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        
         </div>
        
      </div>
        
   </div>
        
</div>





        $(document).ready(function () {
        

        
$('.search').click(function () {
        
    var q= $('#q').val();
        

        
    // AJAX request
        
    $.ajax({
        
        url: 'search.php',
        
        type: 'post',
        
        data: {
        
            q: q
        
        },
        
        success: function (response) {
        
            // Add response in Modal body
        
            $('.modal-body').html(response);
        

        

        
            $('#mymodal').modal('show');
        
        }
        
    });
        
});
        
});

        <head>
        
   <title>Search</title>
        
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
   <link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
        
   <!-- Script -->
        
   <script src='jquery-3.1.1.min.js' type='text/javascript'></script>
        
   <script src='bootstrap/js/bootstrap.min.js' type='text/javascript'></script>
        
</head>
        
<body>
        
   <input type="text" id="q" name="q" placeholder="Enter query"/>
        
   <input type="button" class="search" name="search" value="Search">
        
</body>
        
<!-- The Modal -->
        
<div class="modal" id="mymodal">
        
   <div class="modal-dialog">
        
      <div class="modal-content">
        
         <!-- Modal Header -->
        
         <div class="modal-header">
        
            <h4 class="modal-title">Modal Heading</h4>
        
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        
         </div>
        
         <!-- Modal body -->
        
         <div class="modal-body">
        
         </div>
        
         <!-- Modal footer -->
        
         <div class="modal-footer">
        
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        
         </div>
        
      </div>
        
   </div>
        
</div>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 28 '18 at 7:12









        montu48montu48

        2615




        2615
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474405%2fload-query-search-results-in-modal-instead-of-new-page%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

            Image
            0 I found a lot of questions abount appendices and ToC. Many users want appendices to be grouped in an Appendix part, however some problems arise with ToC, hyperref, PDF viewer bookmarks, and so on. There are different solutions which require extra packages, command patching and other extra code, however none of them satisfies me. I almost found an easy way to accomplish a good result, where appendices are added to bookmarks in the right way and hyperref links point to the right page. However, the number of the "Appendix" part page is wrong (it's the number of appendix A). Is there any EASY way to fix that? This is a MWE: documentclass{book} usepackage[nottoc,notlot,notlof]{tocbibind} usepackage{hyperref} begin{document} frontmatter tableofcontents mainmatter part{First} chapter{...
            Read more

            Calculate evaluation metrics using cross_val_predict sklearn

            Image
            1 In the sklearn.model_selection.cross_val_predict page it is stated: Generate cross-validated estimates for each input data point. It is not appropriate to pass these predictions into an evaluation metric. Can someone explain what does it mean? If this gives estimate of Y (y prediction) for every Y (true Y), why can't I calculate metrics such as RMSE or coefficient of determination using these results? python scikit-learn cross-validation share | improve this question edited Nov 28 '18 at 17:52 desertnaut 20.3k 7 43 79 ...
            Read more

            Insert data from modal to MySQL (multiple modal on website)

            Image
            0 I have problem with inserting data to MySQL from modal. My modal: <a href="#" class="badge badge-pill badge-success">6 komentarzy</a> <a href="#" class="badge badge-pill badge-danger">brak komentarzy</a> <a data-toggle="modal" href="#add_desk_comm_{$desk_['desk_id']}" data-target="#add_desk_comm_{$desk_['desk_id']}" class="ediiit">(dodaj)</a> <div class="modal fade" id="add_desk_comm_{$desk_['desk_id']}" tabindex="-1" role="dialog" aria-labelledby="edit_printer" aria-hidden="true"> <div class="modal-dialog" role="document"> ...
            Read more