Currently trying to wrap my head around something in OpenCart. It's been years since I have done anything with PHP so having a little trouble. I'm redirecting clicks of href links in to the same div the page is in but some href links need to be ignored because they add elements to the page. I'm ignoring them with a not() selector via my own class I am adding to links I want to ignore, though having trouble adding a class to some links.
For example on the products form for adding products there's an option tab which lets you add different options such as check boxes and date/time. The drop down menu for adding these options has some href links that I can't seem to figure out how to add a class to.
Here's a pastebin to the product_form.php: http://pastebin.com/Fchxw8XG
Here's a look at the actual pages html through chrome dev tools:
I just need to figure out how to add a class called navtab to these dropdown links so I can ignore them.
So I figured it out, I didn't even need to do anything directly to the URL. Instead I am just detecting when a link is clicked in that div (the option dropdown is the only links in there) and I am adding a class on click and then processing the rest of my script.
Here's what I originally had;
$("#products").on("click", "a:not(.navtab, #)", function (e) {
$("#products").load($(this).attr("href"));
e.preventDefault();
});
So it will ignore any link with the class navtab, but I needed to add the class so before this runs I run this:
$(function(){
var option = $('#tab-option');
option.delegate('a','click',function(){
option.addClass('navtab');
$(this).addClass('navtab');
});
});
Related
I'm at my very first steps with jquery.I've got an index.php file which includes:
header.html
indexview.html
footer.html.
Into the indexview.html file there are two divs. One on the left (a menu) and one on the right(div id="content"). Whenever I click an item on the left menu, jquery is responsible to load other html pages(and eventually fetch data from the DB thanks to ajax) INTO the right div (div id="content"). I'm really liking this kind of approach, but the problem is that if, for example, I load:
Photo.html
Contacts.html
Info.html
Into the main div (the right one: div id="content") and then I press the back arrow, it just brings me to index.php with the indexview.html page loaded (instead of showing me contacts->photo->indexview).
I've already did some searches on the web and find out that I should build something that fetches the url thanks to the event handler "popstate". I've already dig a bit into that or into a little framework that can let me handle all of that, but, still I'm not fully understanding what I am supposed to do. The items on the left are NOT "<a> links" and don't have href attributes of course. Do I have to substitute every item (now a li item) with an <a> element? If so, how do I proceed to make the history work as I wish?
P.s. Of course, every time I load something into my right div (being photo.html,contacts,html etc) my url does NOT change.
Here is a little jsfiddle (not sure if it can help: doubt that). Clicking on whatever item in the menu makes jquery load() an html page in the right div ("overriding" the div where you "find Welcome, this is the integrated information management system web interface of the ...etc!").
http://jsfiddle.net/5by64tsn/
$("#listContact").click(function(){
$("#content").load('view/contacts.html');
document.title = 'Contacts';
});
When I click listContact, the contacts.html is loaded into the content div.
What you're hoping to accomplish isn't how Ajax/browser history stuff works. Ajax calls are independent of the browser's history and do not affect the back/forward buttons without adding code to do so. You've mentioned popState, which is close to what you want. You actually want pushState.
// Add the url to history
window.history.pushState(null, null, [url that you load via Ajax goes here]);
Using your example:
$("#listContact").click(function(){
$("#content").load('view/contacts.html');
document.title = 'Contacts';
window.history.pushState(null, null, '/view/contacts.html'); // You'll need to add a leading '/' otherwise the url will just keep appending the relative path
});
Welcome!
I have a problem with displaying error page when category contacts is clicked. I will briefly describe the situation and circumstances:
I wanted to achieve a fully functional contact form with selection of the person you want to write (description of page + dropdown list to chose contact + contact form on a single page). This is achieved by:
Each contact (e.g. ContactA, ContactB) is assigned to contact categories (e.g. ContactC);
Creating a menu item (e.g. ContactUs) with the type: single contact;
Selecting a "default" contact (Select Contact:) ContactA;
The site looks and functions as it should at this stage of development - after selecting a specific contact - sends a letter where it should be sent (still requires overwriting layout, but not the point).
When you select (other than default) contact from the dropdown list (ContactB) the page is reloaded - it is necessary to change the recipient.
Breadcrumbs changes after reloading by adding extra levels - contact and contact categories (e.g. "HOME->ContactUs" to "HOME->ContactUs->ContactC->ContactB"). Which itself doesn't look bad, but I would avoid this levels.
When a curious visitor clicks on ContactC in breadcrumbs - this page reloads and has an address mypage.com/index.php/contactus/10-contactc/3-contactb where numbers are equivalent to ID of the elements;
And displays the error message "jos-Error: Contact not found" where error information is in the translation under the label COM_CONTACT_ERROR_CONTACT_NOT_FOUND.
My question is: how to avoid displaying this error? I see three solutions:
Writing a php function (e.g. in error.php), which detects occurrence of this specific error and (for example) redirects to the start page - I don't know nor references to use or if "I can".
Turning off in breadcrumbs displaying contact categories (checked in global configuration and contact options, but nothing changes on page).
Setting in the css specifically for this one link visibility: hidden (or if "I can" php give css class by search for the value of href?).
I've got Joomla 3.4.x and mysql database.
I have achieved this third solution using jQuery. (I know this is not the best, general solution, but it works for me, so it's not THAT stupid in the end.)
It looks like this:
jQuery(document).ready(function(){
//get link by end//
var contactC = $('a[href$="contactus/10-contactc"]');
//get parent of link*//
var contactCParent = contactC.parent();
//add parent of link class//
contactCParent.attr( "class", "hiddenCat" );
});
and in CSS I have extra lines:
.hiddenCat {
display: none;
}
Helpful links:
How to get element by href in jquery
jQuery find all elements by part of the id attribute
jQuery attr add id to existing element
jQuery Api - parent()
jQuery Api - attr()
/*/ I had to find a parent, otherwise Joomla displays two span-dividers ("HOME->ContactUs->->ContactB").
Need a script for my html page that helps me do the following: When i click on a text_head1 a list of lines scroll down, when i click on other text_head2 the last list scroll up and the new list scroll down!
Basically what you need is pure javascript/jQuery.
If you're using jQuery, you can catch the click on your "text_head" element.
Then you add it a class "active" for example and use a function to display the list under the element (like show() or slideDown()).
Then on your next click, you'll search for the class "active" on your "text_head" elements.
If there is one, you can hide the list (hide() or slideUp()), and display the list under the clicked element.
Perhaps what you want is called "accordion". It exists in many UI packages, like jQuery UI: http://jqueryui.com/accordion/
What you are looking for is an accordion effect. A simple google query like Javascript accordion will get you started
I am playing with things here above my head but am desperately trying to learn.
I have an administration page, using jquery I display a hidden div that displays a another page inside.
I do this using:
$(document).ready(function(){
$("a#fadeoutblog").click(function(){
$("#page").fadeTo("slow",0.25)
$("#terms4").fadeIn("slow")
$("#back2").fadeIn("slow")
$("#terms4").load("blogpageload.php")
}); });
So terms4 is the div on the admin page and it diplays the page blogpageload.php!
On this page is a table that displays all the posts of a really simple blog, 'a' delete post a tag and an approve post 'a' tag (which just sets the approved column to 'Y' in the database). What i want is for the page inside this div to refresh when a post in the table is deleted(or the delete 'a' tag is clicked). The problem is that when you click on the delete 'a' tag we are sent to the ammendblogdatabase.php page first so that the post can be deleted!.
I have tried multiple methods but they all have problems!
The main part that is causing problems is that to view this div that contains a page the user must first click on another a tag that uses a jquery to stop the 'display: none;'.
Im not sure what code you may need to see but please ask....
This is the information in the table cell with the delete button:
echo "<a id='refreshblog' href='deleteblogentry.php?username=".$usn."&timeleft=".$tml."'>Delete</a>";
Thank you!
The problem you're most likely having is binding to "future" elements (e.g. elements that will be on the page, but aren't yet). To overcome this, you can use .on() to avoid this.
$('#terms4').on('click','a',function(){
// will bind to anchor elements in #terms4 at the time of execution
// (most likely page ready) and look for future anchors added (in
// the case of .load() completing)
});
From there, you can bind your own show/hide event, maybe call an ajax method that deletes the entry behind the scenes, and make a re-call to .load again and refresh the page.
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/