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

            Contact image not getting when fetch all contact list from iPhone by CNContact

            Image
            up vote 0 down vote favorite I know this question already asked but not getting solution. From this code I will get all the information from the contact but image not found when open vcf files on mac os, also not getting when share this file. I use this stackoverflow link here but It's not help full. var contacts = [CNContact]() let keys = [CNContactVCardSerialization.descriptorForRequiredKeys() ] as [Any] let request = CNContactFetchRequest(keysToFetch: keys as! [CNKeyDescriptor]) do { try self.contactStore.enumerateContacts(with: request) { (contact, stop) in // Array containing all unified contacts from everywhere contacts.append(contact) } } catch { print("unable to fetch contacts") } do { let data = try
            Read more

            count number of partitions of a set with n elements into k subsets

            Image
            up vote 6 down vote favorite 1 This program is for count number of partitions of a set with n elements into k subsets I am confusing here return k*countP(n-1, k) + countP(n-1, k-1); can some one explain what is happening here? why we are multiplying with k? NOTE->I know this is not the best way to calculate number of partitions that would be DP // A C++ program to count number of partitions // of a set with n elements into k subsets #include<iostream> using namespace std; // Returns count of different partitions of n // elements in k subsets int countP(int n, int k) { // Base cases if (n == 0 || k == 0 || k > n) return 0; if (k == 1 || k == n) return 1; // S(n+1, k) = k*S(n, k) + S(n, k-1) return k*countP(n-1, k) + countP(n-1, k-1); } // Driver program int ma
            Read more

            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