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.
Related
Do you know a way to display a php result inside a div dynamically, without refreshing the page?
For example, we have 2 divs: one on the top half of the page and one on the bottom of the page. The top one contains a form with 3 input fields. You type some values inside, then press a button. When you press the button, the bottom div displays the values without refreshing the page.
You can't do it with pure PHP because PHP is a static language. You have to use Javascript and AJAX. I recommend using a library like Zepto or jQuery to make it easy to implement like this:
<form>
<input name="search" />
<input type="submit" />
</form>
<div id="div2"></div>
<script>
// When the form is submitted run this JS code
$('form').submit(function(e) {
// Post the form data to page.php
$.post('page.php', $(this).serialize(), function(resp) {
// Set the response data into the #div2
$('#div2').html(resp);
});
// Cancel the actual form post so the page doesn't refresh
e.preventDefault();
return false;
});
</script>
You can accomplish it using AJAX. With Ajax you can exchange data with a server, make asynchronous request without refreshing the page.
Check this out to see how it can be implemented using Jquery:- http://api.jquery.com/jQuery.ajax/
This may sound weird, but I want to have a button with a link that does not open when the users clicks it:
click
I want to do this because this link has PHP values to recreate the page. The button is on with a new background colour.
I can't just use
document.body.style.backgroundColor='Snow'
because the page auto reloads and I want the colour to stay 'snow' even when the page reloads.
Can this be done? Are there better ways to permanently change the style by the click of a button?
You can use php SESSION for this
$_SESSION['color']='snow';
and take the value from from session by each reload.
And use preventDefault() for prevent the link redirection by using javascript
I suggest using hidden fields and have the background as the value, Then with javascript you grab the value of the hidden field
If you want it to be permanent for a user, you should store it in your database. You should do that by making a call to your server. You can use ajax for that. Using jquery's ajax's function makes it really easy.
http://api.jquery.com/jQuery.ajax/
You should post to your sever using ajax and change the background color in the database. If you do not want to have to refresh the page, you should then use javascript to change the background color.
Again, jQuery makes this really easy... $('element').css('background-color','color');
Do you try create a simple < button onclick='javascript:myfunction(); return false;'>test < /button> ?
and you implement what you want inside 'myFunction()'
You can use localStorage.
Assign the value in hidden field color. Just pass the color in url http://mysite.nl/test.php?value=red.
HTML
<form>
<a id="change-bg" href="#"> click</a>
<input type="hidden" name="color" value="<?=(!empty($_GET['value']) ? $_GET['value'] : '')?>"/>
</form>
JQUERY
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
if (typeof(Storage)!=="undefined" && typeof localStorage.bgColour !== 'undefined' ) {
$('body').css({'background' : localStorage.bgColour});
}
$('#change-bg').click(function(){
$('body').css({'background' : $('[name="color"]').val()})
localStorage.bgColour = $('[name="color"]').val();
return false;
});
});
</script>
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>
I am currently working on a php e-mail system. I created a javascript pop-up page where I can add users (mail addresses). Now I want to post the selected user('s) from the javascript pop-up window to open the website of course I get the page where you want to post in the pop up to see.
Now I want to now, if there is click on the submit than close the popup and allows the data to the open web page whit post?
How can i do this??
you might want to look to the overlay plugin at jquery tools. Pop-ups are blocked by the browser most of the times. And imo an overlay is a more elegant solution. Furthermore, you can just post your form as you would normal do on a webpage, nu extra js needed there!
--- edit; when reading your question more closely; you don't even need to post the page! Just assign a click event to the submit button (which doesn't necessarily needs to be a submit button). In your event function you can read out the filled in addresses (or other information), paste it into the desired fields (whether it be a form field or just a regular div) and close the overlay again. Now you don't even need a page refresh!
You'll want to use AJAX to post the form asynchronously so the user doesn't have to wait for it to process or view the processing page. jQuery makes it very easy to use AJAX as shown here.
Also, after the work is done in the popup window you can access and refresh the parent window using the window.opener function:
<script language="JavaScript">
function refreshParent() {
window.opener.location.href = window.opener.location.href;
window.close();
}
</script>
<script>
$("a[href=#myModal]").click(function() {
var str = $(this).attr("data-phpvar");
var substr = str.split('||');
$("[name=textinput1]").val(substr[0]);
$("[name=textinput2]").val(substr[1]);
});
</script>
<form>
<table>
<tr>
<td>
</td>
</tr>
</table>
</form>
OnClick of the href link or button you will send the data-php-var to the jQuery function. This function will send the values into the popup. In the popup is a text-field with the same name the jQuery function will put your values into de field.
I am designing webpage using jquery and php. My page has side menu, and clicking one of the option it send a request to server to read some information from file and it will create a form out of it, with submit and other button edit(in case anybody wants to change the information in that form) and send this html back to client. I am able to do this successfully. But when I click on the edit button it actually not calling the click handler I registered for the all the buttons.
$('button').click(function(){
alert("click event");
});
I included this in the
jQuery(document).ready(function() {
But because all the jquery/js code in ready() and it gets executed at the page load time, its not able to find these buttons in form because its something which i get from server after loading and replacing it to existing 'div' and hence its not able to invoke the event handler. If I define click handler for the parent div of this form, it receives the click event if I click 'edit' button because that 'div' was present when initial page got loaded. I might not be doing it correctly, may be getting the whole form from server is not a good idea, if you have to do some operation on the form at client side. But is it doable? if yes then whats the possible way out?. Thanks!
Your event isn't firing because you define it prior to the element existing on the page. Using the .on() method should fix this. Something along the lines of:
$('body').on('click','button', function(){
alert("click event");
});
should work.
If I understand you correctly you adding the buttons dynamic to the form. You should try to use jQuery.on() insteed, see http://api.jquery.com/on/
And in your example this might work for you
$("body").on("button","click", function(event){
alert("Hello world");
});
Use on (jQuery 1.7 and up). Previously was delegate (1.4.2+), before that live...
$('*your_form*').on('click', 'button', function(){
alert("click event");
});
You may simply need to use this instead:
$(document).on('click','button',function(){
alert("click event");
});
(jQuery 1.7 or higher)
you have to call using button id
$('#buttonid').click(function(){
alert("click event");
});
or button class
$('.buttonclassname').click(function(){
alert("click event");
});