I'm using $(window).bind('beforeunload', function(){ on my page and it seems to be working fine.
BUT.. I'd like to disable it if one link is clicked :
<a id="delete" href="<?php echo $script?>?delete=all" onClick="return confirm('Delete All ?')">DELETE</a>
Otherwise I get the prompt from the link then I'm asked if I want to navigate away from the page. Ideally I only want the prompt then the page is reloaded.
Thanks :)
You need to unbind the event like this:
$('#delete').on('click', function(e){
$(window).unbind('beforeunload');
});
Got this working, thought I should share how !
$('#delete').click(function(event) {
event.preventDefault();
var r=confirm("Delete All ?");
if (r==true) {
$.ajax({ url : 'script.php?delete=all'
});
}
});
and added id="delete" to the a href.
Thanks :)
Related
I have created a button in a view in Php codeignter.
View
<div id=div_signup>
<input id="btnRegisterID" name="btnRegister" style="margin-right: 5px;" value="Register" type="button" class="btn btn-success"/>
</div
Controller
public function register()
{
$this->load->view('MAIN\view_Register');
}
On click of this button I am making an ajax call and On success I am re-binding same view within a signup div again.
Which means after first event now button is reloaded by view.
Ajax call:
$(document).ready(function()
{
$("#btnRegisterID").on("click", function()
{
$.ajax({
type:'POST',
url:'http://localhost/Voyager/Main/register',
data:{},
success:function(){
$("#div_signup").load('http://localhost/Voyager/Main/register');
},
failure:function(){
alert("nooo");
}
});
});
});
On first click it works fine, ajax call is successful.
But on second click nothing is happening.
There is no error in browser console.
Can someone help with this.
Am I missing here something?
Update:
On success on ajax call I changed above code to location.reload(). Still issue isn't resolved.
success:function(){
location.reload();
},
Change you button click event to like this
$(document).on('click', '#btnRegisterID', function () {
// You ajax Code
})
TRY THIS
IN SUCCESS REMOVE
$("#div_signup").load('http://localhost/Voyager/Main/register');
REPLACE
location.reload();
Try window.location.reload() instead of location.reload();
Taking button outside that Panel worked for me partially.
However there was issue with my architecture in view. It is not possible to partially load a view in jquery without complete page refresh keeping data uptodate.
Thank you for all your help.
I have a serious problem about Fancybox. I have a website with an image gallery. Users can report images if there is any abusing data on the image.
At the moment I am using Fancybox to display the report form. I am validating the input fields with jQuery and submit data with AJAX and the scripts are on the parent page.
report
This works perfectly. But if the user opens the link in new tab or new window, a problem arises because the validation scripts are not on the report form. Those are on the parent page.
So is there any way to stop right clicking or clicking mouse scroll or how will I overcome this problem?
Thanks
Another option is to catch all mouse buttons (left, right and wheel) when clicking over the selector .report and trigger fancybox if any like :
$(document).ready(function () {
$(".report").on('mousedown', function (e) {
if (e.which == 1 || e.which == 3 || e.which == 2) {
e.preventDefault();
$(this).fancybox({
// API options
}).click();
}
return false;
});
$(document).on('contextmenu', function (e) {
e.preventDefault();
});
});
See JSFIDDLE and try any mouse button over the thumbnails.
NOTE: .on() requires jQuery 1.7+
You could invoke fancybox via the function call on a div or input.button element
<input type="button" value="click here" class="fake-fancy" data-href="linktothereportform?id=5">
<span class="fake-fancy" data-href="linktothereportform?id=5">Report</span>
<script type="text/javascript">
jQuery('.fake-fancy').click(function(){
jQuery.fancybox.open({
href: jQuery(this).attr('data-href'),
type: 'ajax'
});
});
</script>
You can void the right click and middle click options by replacing all such links with buttons.
i.e.
$('a.report').replaceWith('<button onclick="window.location.href=\'linktothereportform?id=5\'">report</button>');
You may need to tweak the above a bit, plus style the buttons to look like links etc. but the general idea is to get the 'open-in-same-window' functionality while voiding all 'open-in-new-window' possibilities.
All the credit should got to the people who gave their correct valuable answers for my question.
I decided to make a good answer for people who will seek answers for this question in future.
I would basically divide my answer into two section.
As for my original question I needed a solution with hyperlinks.
So the first method is hyperlinks
As #Jeemusu’s comment.
Fancybox use AJAX to load content. There's an HTTP variable set called HTTP_X_REQUESTED_WITH, which will be set and set to 'xmlhttprequest' if it's an AJAX request.
So even someone opens the links in new tab we can check whether it is AJAX or non-AJAX and display content according to that. So no worries about right clicking.
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//this is an ajax request. do what you need to
}
else {
//this is non ajax. do what you need
}
?>
Second option is to change the hyperlinks as a button or any div.
General idea is to get the 'open-in-same-window' functionality while voiding all 'open-in-new-window' possibilities.
As #Scuzzy’s and #techfoobar’s answers
<input type="button" value="click here" class="fake-fancy" data-href="linktothereportform?id=5">
<span class="fake-fancy" data-href="linktothereportform?id=5">Report</span>
<script type="text/javascript">
jQuery('.fake-fancy').click(function(){
jQuery.fancybox.open({
href: jQuery(this).attr('data-href'),
type: 'ajax'
});
});
</script>
OR
jQuery('a.report').each(function(){jQuery(this).replaceWith('<button onclick="window.location.href=\'' + jQuery(this).attr('href') + '\'">report</button>');});
You can replace that link by a button which will not let the user to open that in new tab. You can do it like this :
<button onclick="window.location='linktothereportform?id=5';" class="report fancybox.ajax" style="color:#CC0033;">report</button>
How to open javascript or jquery popup to display target url in same page
either using jquery or javascript
can anyone please provide me with a link i have searched on google but was unable to found a valuable thing
Here's some markup..
Some Site Link
<div id="popup"> This is the popup text pre $.load() </div>
Here's some code...
$('#popup').dialog({
autoOpen: false,
modal: true
});
$('a').on('click', function(e){
e.preventDefault();
$('#popup').load($(this).prop('href'), function(){
$('#popup').dialog('open');
});
});
Just use following things
<script>
$("#target").load("your link");
</script>
lets say you already make the popup appear on click of a link or a button so call a function on onClick event and pass the target url as a parameter. the in that function you can use alert like
alert(url);
and then use
window.location = url;
to redirect the page.
I have implemented highslide js and it is working fine...
Thanks fellows
I have a modal that pops up with some information when clicked, here is how it looks:
<a rel="moodalbox 850 300 nofollow" href="<?php echo $infolink;?>"
where $infolink is given a LINK to some page.
So what I want to ask, is it possible somehow to open this NOT in a modalbox like now, but just the information to appear in the site somewhere(no page re-loading)...?
Please can somebody just give me a HINT please?
Thanks
You can use preventDefault() method:
$('a[rel*="moodalbox"]').click(function(event){
event.preventDefault()
var href = $(this).attr('href');
$('#info').text(href)
})
DEMO
i have header, main_content, footer, right, and left content
my right content has a random link
i don't want my right content to be refresh when I click a random link
and the main_content would be the output
is it possible that a web page without refreshing the page when you click a link or click submit button and still you can see the url on your browser what you have clicked? how do to that?
thanks!
There are two ways to do this:
1) Target your form to a hidden iframe
2) use AJAX
Here, try these
Your Link
<input type="submit" onClick"return false;" />
Ajax helps you do exactly that. So the skeleton will work like this
- When you submit a link, that posts to the server side using Ajax and the page does not get refreshed. Ajax is essentially a xmlhttprequest submitted to the backend. You may decide to hand code your own xmlhttprequest or take the jquery route(def, the easiest of the 2. You pick your battles, right?)
Here's some help with using jquery http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
bind an event handler to your element like this:
$('#yourBtn').live('click', function(e){
//do the AJAX thingy
e.preventDefault();
}
Read more about jQuery's AJAX solution
The page does not refresh when you try to call a javascript function
like this:
Your Link
<form action="javascript:func()" method="post">
This answer is based on the title.
click a link (pure javascript):
Your Link
<script type=text/javascript">
function functionName(){
// Do the job...
return false;
}
</script>
click a link (using jQuery):
<a id="myId" href="#"> Your Link </a>
<script type=text/javascript">
$(document).ready(function(){
$("#myId").on("click", function(){
// DO the job...
return false;
});
});
</script>
In other words set a click listener for your link and inside the listener's function return false.
You can avoid the refresh page functionality for the submit button on the same way.
On another stackoverflow discussion.