CODEWITHSUNDEEP
javascriptjquerycss
user6060368
user6060368

Reputation:

onClick Div Appears for seconds and then it disappears

I am trying to hide a div when the page loads. So I added a class hidden to my html row as mentioned below.

<div class="row hidden" id="printdiv">
    //Row data goes here
</div>

It is working perfectly and hides the row when I load my application in browser.

Now I want to show the div when user click the order button

<input type="submit" class="btn btn-primary save" name="save" value="Order">

My jQuery Code for showing the div is

$(".save").click(function() {
    $('#printdiv').removeClass('hidden');
    $('#printdiv').addClass('show');
});

Now when I load my application in the browser and I click on the order button it shows the div just for 1 or 2 seconds and then the div disappears. I want the div to be there when the order button is clicked. How can I make that div appears to be there for permanent use ?

Upvotes: 0

Views: 4131

Answers (7)

Failwyn
Failwyn

Reputation: 817

If you are expecting the result to be loaded in that div, you should change the input to button, submit the data with an AJAX post, then load the response in that div and show it in the success callback. Otherwise, you need to handle the visibility of the div server side before you return the response.

Upvotes: 1

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

Check below code, it may help you.

    $(".save").click(function(e) {
    e.preventDefault();
    $('#printdiv').toggleClass("hidden");
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <form action="#">
  <div class="row hidden" id="printdiv">
    //Row data goes here
  </div>
  <input type="submit" class="btn btn-primary save" name="save" value="Order">
</form>

Upvotes: -1

Rohit Agre
Rohit Agre

Reputation: 1528

If you are submitting data to the server then you must add show class from your server side.

something like this in php

echo "<script>$('#printdiv').removeClass('hidden');$('#printdiv').addClass('show');</script>"

Upvotes: 4

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

if you want to show the data returned from the server in the div you'll have to wait for the server response and then show your div. You can use ajax for that, getting rid of the annoying page reload. a jquery function for that is 

$.post('yourPHPfile.php, {data:data}, function(data){
     $("#printdiv").html(data).show();
})

where {data:data}, - the first data is the name of the post variable, the second data is it's value http://api.jquery.com/jquery.post/

Upvotes: 0

Hitesh
Hitesh

Reputation: 4298

It seems to be working for me, please edit my code to explain the problem. 

$(".save").click(function() {
    $('#printdiv').removeClass('hidden');
    $('#printdiv').addClass('show');
});
.hidden{
  display : none;  
}

.show{
  display : block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row hidden" id="printdiv">
//it shows
</div>


<form action="">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" class="btn btn-primary save" name="save" value="Order">
</form>

Upvotes: 2

Deepesh kumar Gupta
Deepesh kumar Gupta

Reputation: 896

Just change your button type from 'submit' to 'button' and use below code.

 $('#printdiv').attr("class","row show");

No need to write below mentioned two lines.

 $('#printdiv').removeClass('hidden');
 $('#printdiv').addClass('show');

Upvotes: 0

Ahmad Sharif
Ahmad Sharif

Reputation: 4435

Remove the hide class from the row class div. And apply the jquery

<div class="row" id="printdiv">
    //Row data goes here
</div>

// Jquery Code

$('#printdiv').hide(0);

$(".save").click(function() {
    $('#printdiv').show(500);
});

Upvotes: 0

Related Questions