I have to disable website links all. if i place any overlay on website but it is not the right solution because we can remove that overlay using firebug or any browser tools...so is there any possible to freeze the site with out any actions...
Thanks,
Murali
if you using jquery you can disable link action as follow
$(document).ready(function(e) {
$('a').click(function(e){
e.preventDefault();
});
});
Basically e.preventDefault will intercept the default action
The problem is this:
I have a simple, two fields form which I submit with Ajax.
Upon completion I reload two div's to reflect the changes.
Everything is working perfect except a jQuery plugin. It's a simple plugin that can be called with simple
function(){
$('.myDiv').scrollbars();
}
It's simple and easy to use, but it doesn't work on Ajax loaded content. Here is the code I use to post form and reload div's:
$(function() {
$('#fotocoment').on('submit', function(e) {
$.post('submitfotocoment.php', $(this).serialize(), function (data) {
$(".coment").load("fotocomajax.php");
}).error(function() {
});
e.preventDefault();
});
});
I've tried creating a function and calling it in Ajax succes:, but no luck. Can anyone show me how to make it work ? How can that simple plugin can be reloaded or reinitialized or, maybe, refreshed. I've studied a lot of jQuery's functions, including ajaxStop, ajaxComplete ... nothing seems to be working or I'm doing something wrong here.
If you're loading elements dynamically after DOM Document is already loaded (like through AJAX in your case) simple binding .scrollbars() to element won't work, even in $(document).ready() - you need to use "live" event(s) - that way jQuery will "catch" dynamically added content:
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
Source: jQuery Site
Even if I am totally against using such plugins, which tries to replicate your browser's components, I'll try to give some hints.
I suppose you are using this scrollbars plugin. In this case you may want to reinitialize the scrollbars element, and there are many ways to do this. You could create the element again like in the following example
<div class="holder">
<div class="scrollme">
<img src="http://placekitten.com/g/400/300" />
</div>
</div>
.....
$('.scrollme').scrollbars();
...
fakedata = "<div class='scrollme'>Fake response from your server<br /><img src='http://placekitten.com/g/500/300' /></div>";
$.post('/echo/html/', function(response){
$('.holder').html(fakedata);
$('.scrollme').scrollbars();
});
If you want to update the contents of an already initialized widget instead, then things gets more complicated. Once your plugin initialize, it moves the content in some custom wrappers in order to do its 'magic', so make sure you update the correct element, then trigger the resize event on window, pray and hopefully your widget gets re-evaluated.
If it doesn't help, then try to come up with some more details about your HTML structure.
I want to thank everyone of you who took their time to answer me with this problem I have. However, the answer came to me after 4 days of struggle and "inventions" :), and it's not a JS or Jquery solution, but a simple logic in the file.
Originally, I call my functions and plugins at the beginning of the document in "head" tag, like any other programmer out here (there are exceptions also ).
Then my visitors open my blog read it and they want to post comments. But there are a lot of comments, and I don't want to scroll the entire page, or use the default scroll bars, simply because they're ugly and we don't have cross browser support to style that, just yet.
So I .post() the form with the comment, and simply reload the containing all of them. Naturally .scrollbars() plugin doesn't work. Here come the solution.
If I put this :
<script>$('.showcoment').scrollbars();</script>
in the beginning of my loaded document (with load() ), will not work, because is not HTML and it's getting removed automatically. BUT !!! If i do this:
<div><script>$('.showcoment').scrollbars();</script></div>
at the same beginning of loaded document, MAGIC .... it works. The logic that got me there I found it in the basics of javascript. If your script is inside an HTML element, it will be parsed without any problem.
Thank you all again, and I hope my experience will help others.
If I understand you correctly, try this:
var scrollelement = $('.myDiv').scrollbars();
var api = scrollelement.data('jsp');
$(function () {
$('#fotocoment').on('submit', function (e) {
$.post('submitfotocoment.php', $(this).serialize(), function (data) {
$(".coment").load("fotocomajax.php");
api.reinitialise();
}).error(function () {
});
e.preventDefault();
});
});
reinitialise - standart api function, updates scrolbars.
I'm having issues getting jQuery tooltips (using Tipsy) to work. The tooltips work fine on regular pages, but I actually need the tooltips on a page that I am including through PHP. The reason why I'm including that page, is because I'm also using jQuery to auto-refresh that included page every x milliseconds.
It appears that this auto-refresh mechanism is keeping the tooltips from functioning properly. When I remove that mechanism, the tooltips appear but that part of the page obviously does not reload itself anymore at an interval. I'm looking for a way to get Tipsy to work while making sure my included page refreshes itself.
I include my page as follows:
<div id="vardisplay">
<?php include("vardisplay.php"); ?>
</div>
I then use the following script to refresh the "vardisplay" DIV, resulting in my included page to be reloaded:
<script>
$(document).ready(function() {
$('#vardisplay').load('editarticle.php?bid=<?php echo $bnummer ?> #vardisplay');
var refreshId = setInterval(function() {
$('#vardisplay').load('editarticle.php?bid=<?php echo $bnummer ?> #vardisplay')}, 750);
$.ajaxSetup({ cache: false });
});
</script>
The object I would want a Tipsy tooltip on (within my included page) could be something like:
<div id="TipsyMe" title="I got tipsied">
<p>Testpiece</p>
</div>
I'm currently trying to achieve that particular tooltip by putting this script on that page, which is supposed to show "I got tipsied" in a Tipsy tooltip:
<script>
$(function() {
$("#TipsyMe").tipsy({gravity: 's'});
});
</script>
What ends up showing is a regular browser tooltip where jQuery is fully ignored. Again, it works fine when I remove the auto-refresh mechanism on the main page.
I'm dumbfounded at this point. I've been Googling for the past few hours without any result what-so-ever. Any help would be greatly appreciated!
in the tipsy doc, you can stumble upon an option called "live"
$(function() {
$("#TipsyMe").tipsy({
gravity: 's',
live: true
});
});
shall do it. (as you seem new, accepting answer will attract people for your future answer hint hint hint :P)
be careful thou: "live tooltips do not support manual triggering." (from the doc)
EDIT: didn't see properly your code:
$(function() {
$("div.someTotal").tipsy({
gravity: 's',
live: true,
title: "I got tipsied"
});
});
"someTotal" is the class for all you "boxes" where you have the edit and delete icon. If you don't have such class yet, you can create one (you can name it tipsy by example) and use it ($("div.tipsy").tipsy({...
Trying to load an external php file into another onClick. Iframes will not work as the size of the content changes with collapsible panels. That leaves AJAX. I was given a piece of code
HTML
Get data
<div id="myContainer"></div>
JS
$('#getData').click(function(){
$.get('data.php', { section: 'mySection' }, function(data){
$('#myContainer').html(data);
});
});
PHP:
<?php
if($_GET['section'] === 'mySection') echo '<span style="font-weigth:bold;">Hello World</span>';
?>
I have tested it here http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/programme-pages/dahab-divemaster/divemaster-trainingA.php and get the most unexpected results. It certainly loads the right amount of items as it says in the lower bar on safari but I see three small calendars and that is it. Can anyone see where I have made a mistake?
First things first, you want to have the jQuery bit inside the ready function $(document).ready(function(){..}. In your test page, there is already a ready function at the top which contains the line $('a[rel*=facebox]').facebox(), so you might want to put the code there.
Secondly, you want to prevent the link from going to the default action, which is to load the url '#'. You do that with the preventDefault() method.
I tested and confirmed that the following code should work for you:
<script type="text/javascript">
$(document).ready(function(){
$('#getData').click(function(event){
event.preventDefault();
$.get('test.php', { cat: 16 }, function(data){
$('#myContainer p').html(data);
});
});
});</script>
You can find more details and examples of jQuery's get function here.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ this tutorial may helps you
I'm using jQuery to dynamically load php pages into my page using the .load() function, so far this has been successful but if you click on various links to update the div with the .load() it starts to flicker between the new clicked page and the old one, this is pretty annoying and has anyone got a fix?
Current code:
$(document).ready(function(){
$('a').click(function() {
$('#content').load($(this).attr("href"));
return false;
});
});
The flickering is possibly caused because the dimensions of the #content div vary between loads, try to slideTogle it before loading or use another transition between loads
example :
$(document).ready(function(){
$('a').click(function() {
$('#content').slideUp('slow',function(){
$('#content').load($(this).attr("href"),function(data){
$('#content').slideDown('slow');
});
})
return false;
});
});
I hope it is ok to question the premise. You're making all links use ajax to replace #content's contents? Doesn't that break the browser's forward/back button behavior? If so, I personally would not like to use such a site.