i have this code:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
$.get("supcont.php");
return false;
}
</script>
an i want to call this function when clicking on an img so i used this
<a href="#" onclick="doSomething();">
<img src="photo/suppc.png" width="295" height="36" href="" target="fenetreA"/>
</a>
but this doesn't work, is ther any one that can help me
$(function () {
$('img').live('click', function () {
$.ajax({
url:"supcont.php",
success:function (res) {
alert(res);
}
});
});
});
Put this anywhere:
<img id="img1" src="photo/suppc.png" width="295" height="36" href="" target="fenetreA"/>
Place this after you include JQuery.js
<script type="text/javascript">
$(document).ready(function () {
$("#img1").click(function(){
$.get("supcont.php");
});
});
</script>
More info here : http://api.jquery.com/click/
Check w3schools website. Much helpful to you regarding this.
Related
I am trying to change the color of "well" on mouseover but unable to do it. I have been trying with the following codes:
<script type="text/javascript">
function ChangeColor(well, highLight)
{
if (highLight)
{
well.style.backgroundColor = '#dcfac9';
}
}
</script>
PHP:
echo " <div class=\"well\" onmouseover=\"ChangeColor(this, true);\"\n";
echo " onmouseout=\"ChangeColor(this, false);\"> \n";
echo "something";
echo " </div>\n";
The above code is changing color nicely on mouseover but it is crossing the area of the "well". Please help to fix it.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="well">
<p>
This is a well content
</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(".well").mouseenter(
function(){
$(this).css('background-color','red');
});
$(".well").mouseleave(
function(){
$(this).css('background-color','#f5f5f5');
});
</script>
Doing this through JavaScript seems like overkill. This can easily be done simply through the use of CSS:
.well:default
{
background-color: #ccc;
}
.well:hover
{
background-color: #000;
}
var getDefaultBg = $(".well").css("background");
$(".well").mouseover(function() {
$(this).css("background", "#000");
}). mouseout(function() {
$(this).css("background", getDefaultBg);
});
simply use this for your requirement.
That was the script I wanted:
<script>
$(document).ready(function(){
$(".well").mouseenter(function(){
$(this).css("background-color", "#efefef");
});
$(".well").mouseleave(function(){
$(this).css("background-color", "#f5f5f5");
});
});
</script>
<script src="<?php echo base_url();?>js/jquery.btechco.excelexport.js"></script>
<script src="<?php echo base_url();?>js/jquery.base64.js"></script>
<script>
$(document).ready(function () {
$("#btnExport").click(function () {
$("#tblExport").btechco_excelexport({
containerid: "tblExport"
, datatype: $datatype.Table
});
});
});
</script>
<Table id="tblExport">
<tr><td><button id="btnExport" >Export</button></tr>
<tr><Td>Name</td></tr>
</table>
The same script is working perfect for one website and is not working in another. the only difference between these is bootstrap and codeigniter. Will this plugin does not work with bootstrap css. Is there a way to resolve this conflict or anything else is the error?
I have this javascript :
<script type="text/javascript">
$(document).ready(function($) {
$('#target-share ul li').click(function() {
$('input#shareto').val($(this).data('val'));
});
});
</script>
and it really works as I expected. but when I add this another javascript to do drop-down animation, that javascript not working anymore :
<script type="text/javascript">
$(document).ready(function() {
$("#select-shareto a").click(function () {
var newClass = $(this).find("span").attr('class');
var newText = $(this).find("span").text();
$("#select-shareto a").removeClass("selected");
$(this).addClass("selected");
$("a#to-chosen span").removeClass().addClass(newClass).text(newText);
$("a#to-chosen").toggleClass("opened");
$('#select-shareto').slideToggle('fast');
return false;
});
$('a#to-chosen').click(function() {
$(this).toggleClass("opened");
$('#select-shareto').slideToggle('fast', function() {
// Animation complete.
});
});
});
</script>
those javascript actually affected on this HTML code :
<div id="target-share">
<span class="to-admin">Admin</span>
<ul id="select-shareto">
<li data-val="0-1">
<span class="to-Finance">Finance</span>
</li>
<li data-val="1-1">
<span class="to-admin-private">Admin Private</span>
</li>
<li data-val="1-0">
<span class="to-ceo">CEO</span>
</li>
<li data-val="0-0">
<span class="to-ceo-private">CEO Private</span>
</li>
</ul>
<input id="shareto" type="text" value="0-1" name="shareto">
</div><!-- #target-share -->
any idea how to make those 2 javascript works side-by-side? thanks.
$("#select-shareto a").click(function () {
...
return false;
});
Hereby, you stop the further propagation of this event - other handlers for this click event won't be called any more. Instead, use this:
$("#select-shareto a").click(function (e) {
e.preventDefault();
...
});
(Demo at jsfiddle.net)
I'm assuming you tried to insert the code where the comment animation complete is and if so you just need to put the code:$('#target-share ul li').click(function() { $('input#shareto').val($(this).data('val'));});
Your code is already wrapped in a $(document).ready so you don't need another one.
I have not been able to use JQuery/Ajax to load the content of my PHP file into a div tag.
Here is my page that is loading the file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function init() {
reloadChat();
setInterval (reloadChat, 5000);
}
function reloadChat() {
$.ajax({
url: "chat.php",
cache: false,
success: function(){
$("#chatmenu").load("chat.php");
},
});
}
</script>
<body onLoad='init()'></body>
<div id='chatmenu'></div>
The PHP file I am loading (chat.php) is in the same folder, and is just an echo statement:
<?php echo "test"; ?>
To make sure it was not a problem with my Javascript functions, I added an alert under the success function, and it did alert me every 5 seconds, so I think it is something with the load statement.
Use .load() straight away, no need to make an Ajax request first:
function reloadChat() {
$("#chatmenu").load("chat.php");
}
Update:
I notice that in your example code, you close your body-tag before your div element.
<body onLoad='init()'></body> <!-- This ain't right -->
<div id='chatmenu'></div>
Try this instead:
<body onLoad='init()'>
<div id='chatmenu'></div>
</body>
Try this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function init() {
reloadChat();
setInterval (reloadChat, 5000);
}
function reloadChat() {
$.ajax({
url: "chat.php",
cache: false,
success: function(response){
$("#chatmenu").text(response);
},
});
}
</script>
<body onLoad='init()'></body>
<div id='chatmenu'>
</div>
Also, for the love of god, please use an up-to-date version of jQuery
It looks your first request from $.ajax will return 'test', and then you're using that as the URL for $("#chatmenu").load.
Try this:
function reloadChat() {
$.ajax({
url: "chat.php",
cache: false,
success: function(data){
$("#chatmenu").append(data);
},
});
}
Or, if you want to replace the contents of #chatmenu the method posted by Christofer Eliasson where you just call $("#chatmenu").load("chat.php") in reloadChat will work.
Putting it all together:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="chatmenu"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
setInterval (function() {
$("#chatmenu").load("chat.php");
}, 5000);
});
</script>
</body>
</html>
i have a link that needs to be triggered from a success post:
<?php
if ($_POST["action"] == "1") {
?>
<script type='text/javascript'>
$(window).load(function() {
$(".likepic").click();
});
</script>
<?php } ?>
<script type='text/javascript'>
$(window).load(function() {
$(".likepic").click(function(){
$(".likepic").colorbox({width:"620px", height:"570px", inline:true, href:"#likepic_lightbox"});
});
});
</script>
<div class="blackk" style="display:none;">
<div id="likepic_lightbox">test
</div>
</div>
so if that post action is 1 then run the jquery script and click on the link for something else to happen :)
this is what i tried but without success.
any ideas?
Thanks
Try using $(document).ready() instead of $(window).load()
Also, you'll need to switch the order of your JavaScript blocks. The click handler needs to be defined first.
Play with a test version here: http://jsfiddle.net/irama/bcMp7/
Or see updated code below:
<script type='text/javascript'>
$(document).ready(function() {
$(".likepic").click(function(){
$(".likepic").colorbox({width:"620px", height:"570px", inline:true, href:"#likepic_lightbox"});
});
});
</script>
<?php if ($_POST["action"] == "1") { ?>
<script type='text/javascript'>
$(document).ready(function() {
$(".likepic").click();
});
</script>
<?php } ?>
<div class="blackk" style="display:none;">
<div id="likepic_lightbox">test</div>
</div>
Let us know how you go!