loading div before finishing all result data - javascript

I'm going sending data the Info page with ..$_get.. but I want when click ..a href=new.php?data=1.. to activate loading and Not all received data loading be enabled and after the completion information inside page new.php , loading deletion and .div id=result. is displayed or show information
new.php
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
$('#result').hide();
$('#main').html('<strong>loading...!</strong>;');
success:function(){
$('#main').html('');
$('#result').show();
}
});
});
</script>
<body>
<div id="main"></div>
test
<div id="result">
<?php
if(isset($_GET['data'])){
echo $_GET['data'];
}
?>
</div>
when click a href= Enable loading then when Information was received, remove loading and put the information in div result displayed

You made a mistake, click() isn't an ajax call so I don't understand why you put a success callback, try to remove it because it made a syntax JS error for sure.
There is the solution :
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(event){
$('#result').hide();
$('#main').html('<strong>loading...!</strong>;');
});
});
</script>
<body>
<div id="main"></div>
<div id="result">
<?php
if(isset($_GET['data'])){
echo $_GET['data'];
}
?>
</div>
</body>

Related

pop up message on success full submit

i am creating a blog posting page for practice.
1) i want a pop up window 'javascript' on success full data submitting to phpmyadmin.
2) same on failure a popup window.
3)where exactly we should close the mysqli connection mysqli_close(); in a isset codding.
i have tried all onclick, onsubmit, two function on one onclick but all in vain
reasons: two javascripts function were not working on one button.
while onsubmit code typed the popup window appears but data does not success fully submits to phpmyadmin.
<html>
<head>
<title>
</title>
</head>
<link href="blogsup-main.css" type="text/css" rel="stylesheet"/>
<link href="blogsup.css" type="text/css" rel="stylesheet"/>
<body onload="refresh();">
<center>
<form method="post">
Name
Category
<option>Education</option>
<option>Society</option>
<option>Politics</option>
<option>Business</option>
<option>IT</option>
<option>Book</option>
<option>Other</option>
Heading
Sub heading *optional
Blog
*Send Email
</form>
</center>
<div id="popupdiv" class="popup-area">
<div class="popup-content">
<span class="close">×</span>
<center>
Blog Created Success Fully!pending approval.
Proceed
</center>
</div>
</div>
</body>
</html>
<?php
$user='root';
$password='';
$db='blogsup';
$con=mysqli_connect('localhost',$user,$password,$db);
mysqli_select_db($con,$db);
if(isset($_POST['submit'])){
$bloggername=$_POST['bloggername'];
$category=$_POST['category'];
$heading=$_POST['heading'];
$subheading=$_POST['subheading'];
$textarea=$_POST['textarea'];
$que="insert into blogposting (bloggername,category,heading,subheading,blogdate,blog) values ('$bloggername','$category','$heading ','$subheading', now(),'$textarea')";
$run=mysqli_query($con,$que);
if($run){
echo '<script type="text/javascript">
var popupdiv = document.getElementById("popupdiv");
popupdiv.style.display = "block";
return false;
</script>';
} else{
echo"Failed";
}
}
mysqli_close($con);
?>
<script type="text/javascript">
var nametextbox = document.getElementById('nametextbox');
var heading= document.getElementById('heading');
var blog = document.getElementById('blog');
var span = document.getElementsByClassName('close')[0];
function refresh(){
nametextbox.value='';
heading.value='';
subheading.value='';
blog.value='';
}
span.onclick = function() {
popupdiv.style.display = "none";
nametextbox.value='';
heading.value='';
subheading.value='';
blog.value='';
message.innerHTML = '';
}
</script>
When you submit a form there is no success or failure.You shouldn't add php and html and js code in the same page.Add the php code to php file which will be your action
e.g
<form action="anyfile.php" method="post">
In the php file add your business logic, like connect to db, execute queries and close the db connection.when the insert query is executed without errors then send a redirect back (yourMainPage?message='ok') to show a successful message like
<?php if(isset($_GET('message') == 'ok'){ ?>
<p>Data successfully inserted</p>
<?php } ?>
Also, your code should be more tidy. Hope i helped.

Dynamically changing <DIV> using jquery fails

I have created two simple pages as a test.
The first, PIG_TEST.htm, outputs a simple page containing 3 <DIV> sections; Header, Menu and Main.
The Menu section contains a link which, when selected should load the second page, PIG_TEST_1-php, into the <DIV> with the id of 'mainx', on the main page via a jquery click function.
However, when selected it just replaces the original page.
Seems like it is not finding or seeing the "mainx" div.
<!DOCTYPE html>
<html lang='en'><head>
</head>
<body style='background-color:#eeeecc'>
<div style='background-color:#6495ed; height: 110px;'>
<div class='col-md-12 text-center'>Header TEST PAGE
</div>
</div>
<div style='background-color:#ffaaaa; height: 150px;'>
<div class='col-md-12 text-center'>Menu TEST PAGE
<ul>
<li><a href='PIG_TEST_1.php' id='but1'>Item 1</a></li>
</ul>
</div>
</div>
<div id='mainx' style='background-color:#cccccc; height: 300px;'>
Main TEST PAGE
</div>
<script type='text/javascript' charset='utf-8'>
(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
<script src='js/jquery-1.8.0.min.js'></script>
</body></html>
The PIG_TEST_1.php is:
<?php
echo "<body>";
echo " THIS IS A DUMMY PAGE <br></p>";
echo "</body>";
?>
I've tried putting the call to "jquery-1.8.0.min.js" just after the <body> but it stll fails.
Sorry, I'm new to jquery, any help would be appreciated.
You should move the jquery <script> tag outside of the other one (you have it nested), and you also need a $ symbol before (document).ready:
<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
There are lot of problems with your code!
<script> cannot be contained inside another <script> tag.
Load jQuery before calling the function.
Add $ before (document).
So your code should be:
<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>

automatically load as fadein popup

I would like the popup to automatically set on and not have to click to make the event. Can you help?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#open').click(function(){
// enter code here
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
return false;
});
$('#close').click(function(){
$('#popup').fadeOut('slow');
$('.popup-overlay').fadeOut('slow');
return false;
});
});
</script>
</head>
<body>
<div id="content">
<div id="column-right">click aqui</div>
</div>
<div id="popup" style="display: none;">
<div class="content-popup">
<div class="close"><img src="images/close.png"/></div>
<div> enter code here
<h2>Contenido POPUP</h2>
</div>
</div>
Means whenever the page is loaded the pop up automatically opens without any client side event.
Just take the code out of the click() event:
And remove the div with .popup-overlay class. It's useless
$(document).ready(function(){
$('#popup').fadeIn('slow');
$('#popup').height($(window).height());
});
You may need to fade the #popup also.
$(document).ready(function(){
$('#popup').fadeIn('slow');
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
});

window.print image in a link

So I have this:
<script>
window.print();
</script>
I want to print this url's image:
http://www.somefancyurl.com/labels/postage/45029dd.png
The page displays nothing but the image I am wanting to print.
I tried:
<script>
window.print('http://www.somefancyurl.com/labels/postage/45029dd.png');
</script>
But that didn't seem to change anything.
Thanks to some searching, I came up with this:
function printLabel(){
popup = window.open();
popup.document.write('<?php echo $order->shipmentLabel; ?>');
popup.print();
return false;
}
But that tries to print out <?php echo $order->shipmentLabel; ?> not the actual image.
In page, write html code like
<html>
<body>
<img src='http://www.somefancyurl.com/labels/postage/45029dd.png' />
</body>
</html>
and write script as
<script>
window.print();
</script>
You can't print an image directly.
You should do it this way:
<script>
window.print();
</script>
<img src="http://www.somefancyurl.com/labels/postage/45029dd.png" />
You can also do it in a new window.(popup)

Fade in jquery div show

I am trying to get the below script to fade in and fade out with a delay in between. It shows the div correctly and fades out as it should, but it doesn't fade in?
<?php
if(isset($_GET['updated'])) { ?>
<div id='updated'><p>The product was successfully added to your Shopping Cart</p></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('#updated').fadeIn(800).delay(3000).fadeOut(800)
</script>
<?php } ?>
Many thanks!
$('#updated').hide().fadeIn(800).delay(3000).fadeOut(800);
You could also set it in the css:
#updated{
display: none;
}
The problem is - it's already visible (by default).
its because its already showing
<div id='updated' style="display:none">
fixes it
You have to hide div before fadeIn(), you can use hide() method to hide the div.
<?php
if(isset($_GET['updated'])) { ?>
<div id='updated'><p>The product was successfully added to your Shopping Cart</p></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('#updated').hide().fadeIn(800).delay(3000).fadeOut(800)
</script>
<?php } ?>

Categories