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
Related
My question may sound confusing but actually it's not. Let me clear you the things. The scenario is I've following HTML code:
/*This is the hyperlink I've given for example here. Many such hyperlinks may present on a webpage representing different question ids' */
<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21679" title="Fixed" href="#fixedPopContent" class="fixed" data-q_id="21679" id="fix_21679">Fixed</a>
/*Following is the HTML code for jQuery Colorbox pop-up. This code has kept hidden initially.*/
<div class="hidden">
<div id="fixedPopContent" class="c-popup">
<h2 class="c-popup-header">Question Issue Fix</h2>
<div class="c-content">
<h3>Is question reported issue fixed?</h3>
Yes
No
</div>
</div>
</div>
Now upon clicking on this hyperlink I'm showing a pop-up(I've used jQUery Colorbox pop-up here. It's ok even if you are not familiar with this library.) On this pop-up there are two buttons Yes and No. Actually these are not buttons, these are hyperlinks but showing as a buttons using CSS. Now my issue is when user clicks on hyperlink 'Yes' the page is redirecting to the href attribute value and the page reloads.
Actually I want to get to the page mentioned in href attribute but the page should not get reload or refresh. How to achieve this? Following is the jQuery code for colorbox pop-up as well as for Yes and No buttons present on this pop-up. I've tried this much but it didn't work for me. The page is getting redirected and reloaded.
My code is as follows:
$(document).ready(function() {
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$('#fixedPop_url').attr('href', action_url1);
$(".fixed").colorbox({inline:true, width:666});
$("#fixedPop_url").click(function(event) {
event.preventDefault();
$("#fix_"+qid).hide();
$("#notfix_"+qid).show();
});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
});
So you need to load the page at the url but not navigate to it.
You can use .load() .
So in your case, lets say that your pop container div class is .popup, and the div where you want to load the urls content has an id say #container.
$(".popup a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('delhref');
$("#container").load(url);
});
Few things to keep in mind,
This will mostly not work for urls pointing to any other domain. (Same Origin Policy)
Any content loaded with this function (.load()) shall be inserted within the container and all the incomming scripts if any shall be executed.
You can do that with history.js. Here is an example;
HTML:
Delete
Update
<div id="content"></div>
JS:
var History = window.History;
if (!History.enabled) {
return false;
}
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
$('#content').load(State.url);
});
$('body').on('click', 'a', function(e) {
var urlPath = $(this).attr('href');
var Title = $(this).text();
History.pushState(null, Title, urlPath);
return false;
});
You can see code here: jsfiddle code
You can see demo here: jsfiddle demo
Note: Urls in example cannot be found. You need to update it according to your needs. This simply, loads content in href without refreshing your page.
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 :)
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 link on my page, and when I click on this it opens a login popup. This works after click on the link.
I want that on page load. I have wasted lots of time on this but nothing works.
<a id="onestepcheckout-login-link" href="javascript:void(0);"><?php echo $this->__('Already registered? Click here to login.'); ?></a>
This code I am using. Right now is working onclick but I want this on page load.
Please help.
I just did a simple one.This will help you.Just check it http://jsfiddle.net/ArLKy/8/
There's the onload event of the <body> tag:
<body onload="document.getElementById('onestepcheckout-login-link').onclick()">
Here's a cleaner method:
window.addEventListener("load", function()
{
OpenLoginBox();
});
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.