I am having a problem, my website www.projectbuilder.tk is 100% ajax powered, how I have ran into a problem that seems to stump me, I can set the urlbar/history to each visited page, and have php loading the pages on the user's first visit based on ?page= from there all pages and data is loaded via ajax.
The problem is that no one can actually right click the links (as I cannot give them the href attribute without causing the page to reload, and skipping the onclick event)
So my question is how do I make the ajax links look like normal links for right-click and open in new window, or tab, or copy url? thanks.
Put the normal link in the 'href' tag, but adjust your onclick jquery handler method to this:
function handleLinkClick(event){
if (event) event.preventDefault();
... Continue as normal ...
}
The 'preventDefault' stops the normla event propogation so left clicking the link will use your onclick method without sacrificing the valuable info stored in the HREF. Also. Take caution of using jqueries 'live' binding. It used to capture right-clicks as well, may not be the case any more though.
Sorry just realized i assumed you were using jquery. Just returning false, as the other poster mentioned should work fine. I'm so used to jQuery these days.
Why can't you give them href without skipping the onclick?
Just return false from the onclick handler and it won't use the href.
Am I missing something? Because this is very basic.
Related
I have a small problem with a jquery function and I can't figure out where I'm going wrong with it, I'm using .load to pull another page into a div for the second time using a button with a .click() function. The problem here is when I click the button the data I want flashes up and is then replaced with the data that is loaded when I first navigate to the page, however if I bind the .click to:
<p>peter paragraph</p>
The page will load fine without incident.
The jquery function is this:
$(document).ready(function() {
$("p").click(function(){
alert("buttonthe1st");
$('#jam').load('register.php');
alert("buttonthe2nd");
});
});
I was using the alerts to test to see if it was working originally, the function appears to be working a long with the actual load event when I tested them with the paragraph and when I tried them in googles developer console.
As I typed the above out I just realised when I was testing it, the URL and the page refreshed even if there was no function or onclick even tied to the button in question. Which explains why I'm having this problem now, is there a way to resolve this?
P.S. I appologise for making this so vague.
I am a little confused as to why clicking on a paragraph element would cause a page to reload but if you are in fact talking about a button element you might find the preventDefault function helpful. Try using that within the function you are binding to "onclick" and see if it makes any difference
In my main page, I have to call a colorbox upon clicking a button. Within that colorbox there is also a button that must trigger another colorbox. Knowing the fact that a colorbox within a colorbox is not tidy enough to see, I am looking for a solution to call another colorbox even if one is being rendered. Is this possible? if yes, how can It be?
You could consider using the iframe option on the first call. Doing so gives you a whole new Window environment to work with. From there, just call colorbox as normal.
This may be right for you because the iframe option allows the called content to be plain old HTML, which of course may contain a colorbox call.
Obviously, the resulting UI might not work for you but you haven't provided much about that in your questions.
Think it over.. :)
Ok, javascript/jquery is not my strong point, but I'll try to help with this. Please let me know if I make syntax errors by commenting and I'll edit.
Yes, this is doable. The button within the colorbox just needs to call a function from the parent page. I tend to use colorbox in iframe mode, which requires something like this:
parent.yourFunction()
If you're not using colorbox as an iframe then I think you can just call yourFunction() directly.
Then yourFunction() would need to close the colorbox using $.colorbox.close() and open a new one using $.colorbox(params...)
That should effectively replace the current colorbox with the new one.
example:
function replaceColorbox(){
$.colorbox.close();
$.colorbox(html:"<h1>Success</h1><p>This should replace the existing colorbox</p>");
return;
}
I am having difficulties in the following problem:
I have a screen in PHP which displays a list of some records when I choose any of these
records (by clicking) it gives me a web site to share the data with this record. So far, it works.
I need to click on some of these records, instead of him
open another page, scroll down the screen and the record data to appear in the same screen, ie without opening another window.
Do you have any idea how to do this?
Thanks
You'll need to have a DIV at the bottom of the page, which will be completed by using an Ajax call and some javascript or jquery.
Without going into too much detail, heres what needs to happen:
User clicks a link which fires off an ajax request.
The backend PHP script takes the ajax call and generates either XML or pure HTML and returns the data.
JQuery or JavaScript on the original page takes the return and populates the empty DIV at the bottom of the page.
Regards
It sounds like you'll need to use ajax to pull this off.
I would personally suggest starting with reading up on the jQuery javascript library if you are not familiar with it already. It provides a very good set of ajax tools to work with.
Create a DIV layer on the bottom of the page. Use a simple AJAX library like this
Create a new php page that will only load a new record based on the recordID and call this page on the onclick method of your link that is now opening in the new window
I would try adding some jQuery to your page to handle this effect.
If you do add jQuery here is a function written to do just that:
http://pastebin.com/SeMHwSgg
Call the script like so:
Where a is the record you are having them click on and href="[some anchor]" located at the spot on the screen where you want the scrolling to stop:
<a id="gotop" href="#" onclick="goTop();return false;">click here</a>
So
Indeed, there is no error, it just does not have the effect that (scroll down the screen and show the record data). For now, it only shows the record open in another window.
I hope someone can help!
My website: http://www.richardmilne.net
I have a wordpress site set up to use the iinclude plugin to display individual pages all on the front page. This works great but I don't want users to access individual pages, ie "site.com/page". If a user visits "site.com/page" (eg from a search result), I want them to be redirected to "site.com/#location", have the window scroll to the correct location, and trigger the jquery slider. (see link above)
I was planning on using .htaccess to redirect the page. After that from what I've gathered I need to use a bit of javascript trickery to trigger the desired div to slide open. In my case this is simply a case of changing it's class to "toggle_initial", which the jquery script animates after an 800ms delay on page load. (again, see the link above, which already uses this to load the "recent posts" section when you first visit. Just so you know this is a jquery-UI plugin).
It's the bit in the middle I can't get my head round. What I've read so far tells me I can't do this with php which was my first approach, as "PHP_SELF" ignores the "#location" bit of the URL. This leaves javascript up to the task of changing the div's class, I've found these links which I'm sure contain some hints for me, but as a javascript novice I can't make head nor tail of how to apply them to my site:
Adding a class to an a element with a particular href using hash
doing substring in window.location.hash
Any tips would be greatly appreciated, cheers!
You'll probably want to use JQuery window.location.hash to get any values after the hash tag.
See a few tutorials below:
http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
http://www.using-jquery.com/2011/01/ajax-navigation-window-location-hash/
Step 1. Get the anchor element from the url using javascript. window.location.href
Step 2. Change the class of your target h2 using jQuery. Code assumes that div id and anchor are identical.
$(document).ready( function() {
var anchor = yourCodeToFindAnchor;
$('#' + anchor).addClass('active');
});
I recommend http://benalman.com/projects/jquery-bbq-plugin/
It easily allows you to hook up all kind of jQuery actions to the hash object.
This should get you started: http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/
Im using ajax to call php which gets results from a mysql db.
Reason im using ajax is so that the page wont reload. (RETURN FALSE)
All works fine, but since the browser doesnt reload, there is no "back".
Example: Users enter something to search for, and hits "search button" and ajax returns the search without reloading page, BUT if the user wants to click the back button to get to the previous search, they cant...
If you think it would be better to actually reload the page then tell me because this is fully possible for me, only reason I dont reload page is because it looks better this way...
Or what do you guys think of iframes?
Thanks!
Take a look at this tutorial entitled "Fixing the Back Button and Enabling Bookmarking for AJAX Apps".
In conjunction with the answer to your question here, you could store their searches in an array. In the unload event, you could just do the previous search.
You can use jquery history plugin for this:
Try this simple & lightweight PathJS lib. It allows to bind listeners directly to anchors.
Usage example:
Path.map("#/page1").to(function(){
...
});
Path.map("#/page2").to(function(){
...
});
Path.root("#/mainpage");
Path.listen();