I have two jquery events on click of button.but i want to perform only one event.So how can i do that.
my code is as follow.
<!DOCTYPE html>
<html>
<head>
<title>Demo #1</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div align="center">
<button id="mybtn">Some Button</button>
</div>
<script>
$("#mybtn").click(function(){
$("#mybtn").fadeOut();
});
</script>
<?php include('demo2.php'); ?>
</body>
</html>
Here is code for demo2.php
<script>
$("#mybtn").click(function(){
alert("i am in included in demo2");
});
</script>
now When i click on button Both Event is performed.so is there any way to perform one event that is store in current page not perform jquery that is included.
Create a variable to connect the selector to the event in page one do this
<script>
var selectFunction1=True;
$("#mybtn").click(function(){
if(selectFunction1===True){
$("#mybtn").fadeOut();
}
else{return false;}
});
</script>
And in demo2.php do this
<script>
var selectFunction2=True;
$("#mybtn").click(function(){
if(selectFunction2===True){
alert("i am in included in demo2");
}
else{return false;}
});
</script>
Related
im confused how to add delete alert in this condition
else
if($g=='hapus')
{
// echo 'Hapus'
mysqli_query($config,"DELETE FROM tb_perangkat where id_perangkat='$_GET[id_perangkat]'");
echo '<script LANGUAGE="JavaScript">
alert("Anggota dengan Id '.$_GET[id_perangkat].' Telah Terhapus")
window.location.href="index.php?page=admin";
</script>';
}
Use jquery to hide your div
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
<html>
<head>
<script src="js/jquery-1_9_1_js.js"></script>
<script>
$(function() {
$("#mainDiv").load("two.php");
});
</script>
</head>
<body>
<div class="main" id="mainDiv"></div>
</body>
</html>
Hi, I have above code in one.php. It loads data from two.php into mainDiv.
The contents of two.php are overlapping out of the div instead of the scrolling inside the div in one.php. Please help me insert a script/code that will scroll the contents inside mainDiv instead of overlapping.
try this :
<div id="" style="overflow-y: scroll; height:'your height';">
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#mainDiv').load('home.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
it will refresh every 5 seconds
I want to send id to php script.I think my code is ok, but when i click on tag i get this error:
Notice: Undefined index: id in C:\xampp\htdocs\domaci\cao.php on line 4
here is my html + ajax code :
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('a').click(function(){
$.post($(this).attr('href'), { id : $(this).attr('id') } );
});
});
</script>
</head>
<body>
<a href="cao.php" id="Barselona" >Barselona</a>
</br>
<a href="cao.php" id="Beograd" >Beograd</a>
</body>
</html>
and this is cao.php:
<html>
<body>
<?php
$id = $_POST['id'];
echo $id;
?>
</body>
</html>
i really need this to get to work, please help me :)
Your $.post ajax is fine. The issue is when the anchor is clicked, you don't preventDefault or return false, to stop the browser redirecting to cao.php. When it redirects to cao.php, it is a GET request, and so triggers the undefined index notice because there is no post data.
Add return false or preventDefault:
$('a').click(function(e){
e.preventDefault();
$.post($(this).attr('href'), { id : $(this).attr('id') } );
});
Look at your browser's console (F12) on the Network tab, to see the response of the ajax.
Try it now.
$(document).ready(function(){
$('a').click(function(){
$.post($(this).attr('data-url'), { id : $(this).attr('id') } );
});
});
</script>
</head>
<body>
<a href="#" data-url="cao.php" id="Barselona" >Barselona</a>
</br>
<a href="#" data-url="cao.php" id="Beograd" >Beograd</a>
</body>
</html>
Your link redirects you, so simpe do this:
e.preventDefault();
Also its better to have variables (for future), here is EXAMPLE
Try this one will work for you:
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('a').click(function(){
$.post('cao.php', { id : $(this).attr('id') },function(data){
alert(data);
});
});
});
</script>
</head>
<body>
<a href="#" id="Barselona" >Barselona</a>
</br>
<a href="#" id="Beograd" >Beograd</a>
</body>
</html>
AT cao.php page
<?php
$id = $_POST['id'];
echo $id;die;
?>
just try print_r($_POST) in cao.php & check the values are posting
$id=$_POST["id"];
How can I link HTML href values to AJAX so that I get result on same page but in different conatainer. Below is my my code:
<html>
<head>
<title>DTC Search</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#a').click(function() {
e.preventDefault();
$('content').load($(this).attr('href'));
});
});
</script>
</head>
<body>
CT1<br>
CT2<br>
CT3<br>
CT4<br>
<div id="sidebar"> Body</div>
<div id="footer"> </div>
</body>
</html>
Since I am new to AJAX, I am not able to understand how to get information related to clicked value of href in AJAX function so that it will display result in same page but in other division. My filename is, say front_end.php
This is your code, just updated:
<html>
<head> <title>DTC Search</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('a').each(function(){
$(this).on("click",function(e) {
console.log(e);
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
});
</script>
CT1<br>
CT2<br>
CT3<br>
CT4<br>
<div id="sidebar"> Body
</div> <div id="content"></div>
<div id="footer"> </div>
</body>
</html>
1) A tag is not $("#a") in jquery
2) $('content') is nothing
3) element with id $('#content') or some element with class $('#content')
Tako a look at jsBin example
1: http://jsbin.com/IFaLoJE/1/ or jsfiddle example
Try something like this :
$('a').click(function (e) {
e.preventDefault();
$('#content').load(this.href);
});
i want that when we click on Ajax 1 then content of ajax1 is change but Ajax 2 will remain same and vice verse plz help i want to do that with jquery
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pas").click(function(){
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$("#pas").html(result);
}});
});});
</script>
</head>
<body>
<div id="pas"><h2>AJAX 1</h2></div>
<div id="pas"><h2> AJAX2 </h2></div>
</body>
</html>
Two elements cannot have the same id. You should change to using classes.
<div class="pas"><h2>AJAX 1</h2></div>
<div class="pas"><h2> AJAX2 </h2></div>
Once you've done that, you can use this to target the correct item.
$(document).ready(function(){
$(".pas").click(function(){
var $this = $(this); // "this" is the clicked element
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$this.html(result);
}});
});
});
you have to differentiate div's ids: give them two different id (i.e. pas1 and pas2 ) and same class 'pas', then fire actions on div.pas
Don't use duplicated id's, use class instead. Use a refference to the clicked object to update your content. Here is your modified code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
var _this = this;
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$(_this).html(result);
}});
});});
</script>
</head>
<body>
<div><h2>AJAX 1</h2></div>
<div><h2> AJAX2 </h2></div>
</body>
</html>