how to display div in jquery with ajax.

Question

0.00/5 (No votes)

See more:

i want to display hidden div using jquery with ajax.
code is:

XML

<style>
#hidden
{
    display:none;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
	
	$('#cal').datepicker();		
	$('#cal1').datepicker();
	
	$(".btn1").click(function(){
									
				var strtdt=$('#cal').val();
				var enddt=$('#cal1').val();
				var crg=$('#charge').val();
				alert(strtdt);
				alert(enddt);
				alert(crg);
				$.ajax({
					   
					   type:"GET",
					   url:"fun_action.php",
					   data:{strtdt:strtdt,enddt:enddt,crg:crg},
					   success:function(data){
						location.reload();
						document.getElementById('hidden').style.display = "block";
					$('#hidden').fadeIn(3000);
					   }
					   });
				
			});
	
  	});
</script>

SQL

<?
    $select="select * from tbl_client c, tbl_function f where
    c.res_id=f.res_id and
    f.fun_id='$_GET[id]'";
    $query=mysql_query($select);
    $result=mysql_fetch_array($query);
?>

XML

<form method="post" name="frm">
   <table class="detail_tbl">
           <tr>
               <td rowspan="3" class="admin_tr"><img src="<? echo $result['fun_img']; ?>" height="280px" width="250px"></td>
               <td class="admin_tr" style="text-transform:uppercase; text-decoration:underline;"><? echo $result['fun_name']; ?></td>
           </tr>
           <tr>
           <td class="admin_tr" width="100%"><? echo $result['fun_desc']; ?></td>
           </tr>
           <tr>
           <input type="hidden" id="charge" value="<? echo $result['fun_charge']; ?>">
           <td class="admin_tr" width="400px">Charge:<? echo $result['fun_charge']; ?><br /><br />
          <span class="admin_tr" style="margin-left:-20px;">Check In:&nbsp;&nbsp;&nbsp;<input type="text" class="textbox" name="txt_from" style="width:200px;" id="cal"/></span>
           <br /><br>
            <span class="admin_tr" style="margin-left:-20px;">Check Out:<input type="text" class="textbox" name="txt_from" style="width:200px;" id="cal1"/>
            </span>

           <br><br>
       <input type="submit" name="btn_submit" value="Save"  class="btn1"/>

           </td>
           </tr>


           </table>
              <div id="hidden">
           Total Charge:<input type="text" value="123">
       </div>



   </form>

Posted 2-Nov-14 3:30am

khyati24

Updated 2-Nov-14 21:57pm

Abhishek Pant

v2

Add a Solution

Comments

Manas Bhardwaj 2-Nov-14 12:58pm

And your problem is?

khyati24 8-Nov-14 3:26am

problem is that, i cant show/display hidden div after complition of reload process..
during the reload process hidden div is displayed..

[no name] 2-Nov-14 22:56pm

try this : $('#hidden').prop("display", block);

Prava-MFS 3-Nov-14 4:45am

Please mention what issue you are facing? It might be you are not able to see the div after the AJAX call or it might be the div is coming and going away in a few. If that is the case, then check with setting some timeout, while showing the div.

setTimeout(function() {
document.getElementById('hidden').style.display = "block";
$('#hidden').fadeIn(3000);
}, 500);

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Suraj Sahoo | Coding Passion · Answer 1 · 2014-11-02T22:49:00

Solution 1

Try out with this:

JavaScript

$.ajax({
	   type:"GET",
           url:"fun_action.php",
	   data:{strtdt:strtdt,enddt:enddt,crg:crg},
	   success:function(data){
	   location.reload();
           document.getElementById('hidden').show();//or $("#hidden").show();
	   }
 });

If you want that to be animated then you can try with jquery animate.

JavaScript

$("#hidden").animate({
//.....
});

Chere here Jquery Animate[^]

Hope this helps.
Post back your queries if any.
Thanks

Posted 2-Nov-14 22:49pm

Suraj Sahoo | Coding Passion

Comments

khyati24 8-Nov-14 3:32am

sorry sir, i have already tried this code
document.getElementById('hidden').show();//or $("#hidden").show();

my problem is that, i cant show/display hidden div after complition of reload process..
during the reload process hidden div is displayed..

[no name] 8-Nov-14 3:42am

Have you checked the references!! Is it loading for that page after reload!!!