Before anything, I don't know if I'm taking the right approach to this so bear with me on this.
My problem is as follows: I'm trying to use an accordion where each tab is a category and when expanded, the accordion shows the artists in that category. So far, so good.
Now, the other part of what I'm trying to achieve is this: Once I click on the tab (which has a "#" link) I need to display the artists list in a div, which I was planning to do with AJAX. I can do this without problems if the link was INSIDE the accordion contents (for example, if I wanted to click on an artist) but can't figure out how to make it work when clicking a tab.
My code is as follows:
<li class="artistlist">
Photo
<ul>
<li>Artist</li>
<li>Artist</li>
<li>Artist</li>
</ul>
</li>
</ul>
<div id="contentbox">
<div id="artistcat">
</div>
</div><!-- /contentbox -->
and what I'm trying to do is the following: replace href=# with something like this:
Abstrakt
thus, when clicking on a category (for example "photo") it expands the accordion (which it does) AND shows the content in the ajax box, which is exactly the same content of the accordion only with thumbnails.
So basically, I need to make that tab link do 2 actions: 1) expand the accordion and 2) show the ajax content.
I'm thinking that perhaps the AJAX solution is the wrong way, either way, any help will be greatly appreciated.
Try to use jQuery, and make a little piece of code that does what you need to.
Like
$('#contentbox').click( function() {
$('#content').ajax( /* do ajax stuff */ );
// animate accordion
});
If you can, use jQuery or some other library.
Use observers to trap click events. This way you seperate your html from your javascript.
use to do the ajax requests => you can do multiple things "on succeed" and
throw clean errors when the ajax requests fail.
your library will also give you the tools to trigger multiple observers "onClick"
Related
EDIT: Can this be done by adding a variable to the Laravel cookie in the client using jQuery? I understand the Cookie is attached to the request during GET?
Is it possible to add a variable to the $request container in Laravel 5.2 using jQuery prior to executing a GET route request?
Essentially I am trying to pass a value to a GET request and keeping it off the URL as a parameter (and hidden from the user).
My HTML is essentially a menu:
<ul class="sidebar-nav nav-pills nav-stacked " id="menu">
<li id="menu-1">
Menu 1
</li>
<li id="menu-2">
Menu 2
</li>
<li>.....</li>
</ul>
When the a link is clicked, I want to intercept this and add
menuState = 'state';
To the $request container, then allow the click event to route to the href destination.
Now at Laravel end I shoule be able to access its value as:
$request->input('menuState');
Is this possible on what is essentially a GET request so there is no form being posted?
This is an example of adding a URL variable
<a onclick="addURL(this)" href="app.url/1">Menu 1</a>
function addURL(element)
{
$(element).attr('href', function() {
return this.href + '&menuState=10';
});
}
Can this be done?
<a onclick="addURL(this)" href="app.url/1">Menu 1</a>
function addURL(element)
{
---> ADD menuState = value to $request container, then continue with GET request
}
Ok so I'll try to present a more complete solution to your question.
As you pointed it out, your menu url should probably look better; they should have words in it rather than numbers (this is good for SEO too). The <a> href attr can just be set to the relative url like href='home' or href = 'about'.
Now the question is how do you pass the menu state for all the pages. You probably don't want to use the $request variable in this case as menu state I think should be pre-determined for different pages. The controllers should set some menu-state variable array that contains the on/off for each menu. (or simply a string set to which menu is on but then you need to loop through the menus and do conditional check, your choice).
You can probably utilize a view composer for the menu in this case or simply use view()->share in the serviceProvider if you are lazy. Check the necessary conditions and pass along the result. In this case I think the menu-state should be clear from the url alone accessed in the script with Route::url().
Edit:
Ok. So finally I understand what's going on after that discussion. Here's what I suggest. I wouldn't bother try to persist the menu state. Most sites have the hover effect where the menu just expands on mouseover, then you click on the menu to go to another page on which you want to see the content more so the menu should just be collapsed. If the user really want the choice to have the option of having the menu expanded as default, make that a preference setting in their profile. Leave the toggle JavaScript however as they may still want to collapse the menu sometimes :)
IMO the simplest way is to prevent link redirection after the click on a and add click event to capture this click then use jquery $.get() method to add parameters you want and send your request :
$('#menu').on('click', 'a', funtion(e){
e.pereventDefault(); //prevent link redirection after click
$.get($(this).attr('href'), {menuState: 'state'}, function(response){
//response variable contain response from laravel controler
})
});
Hope this helps.
I am using php to get items from a database and generate a html-table to list each item.
To the left of the html-table I have a side-menu with a accordion-function made in javascript.
Inside of each accordion there are links for various search-parameters for sorting the table. For example a link to each Genre.
If I click on one of the accordions, for example "All Genres A-Z", it expands and lists all the genres. But if I then click on one of the links WITHIN the accordion, the page resets naturally and the accordion closes because the page reloads (with the new search parameters).
My accordion is based out of the following question: How to make accordion stay open, But since all my links are search parameters that leads to the same page (browse.php) I cannot use the same solution that was presented in that question.
- Is there a way to keep the selected accordion open even after clicking on one of the links within it?
Here is a good example of how I want it to behave (The menu on the left) 47Admin bootstrap theme
The js:
$('.trigger-button').click(function() {
$(".trigger-button").removeClass("active")
$('.accordion').slideUp('normal');
if($(this).next().is(':hidden') == true) {
$(this).next().slideDown('normal');
$(this).addClass("active");
}
});
$('.accordion').hide();
The html on browse.php:
<div class='trigger-button'>Favorite Genres</div>
<div class='accordion'>
<ul>
<li><a href='browse.php&genre=drama'>Drama</a></li>
</ul>
</div>
<div class='trigger-button'>All Genres A-Z</div>
<div class='accordion'>
<ul>
<li><a href='browse.php&genre=drama'>Drama</a></li>
<li><a href='browse.php&genre=thriller'>Thriller</a></li>
</ul>
</div>
Link to the fiddle used in the other question
I assumed that you meant link for List One and List Two. Then here is your fiddle
EDIT:
In General page reload reset all state in javascript. Basically you have to do reverse operation in page load
Pick url in address bar.
Match with href attribute in anchor tag.
Then expand respective accordion.
And you can do it in PHP code as well by setting classes in element which you want to open. However, I feel handling this in PHP bit noisy.
Hope following fiddle give some idea to you
Situation
As you can see in the screenshot below, I have an area of my site which makes use of tabs to split up the user dashboard. The tab indexes along the top are declared as URLs and as a result jQuery creates the references at runtime. I would like the user to be able to click the "here for free content" link and the system calls the Free content tab. Let's call that URL "testserver/user/free-content" for the moment
Issue
Now, I know how to programmatically deal with this situation when the tabs are declared on page as divs and have static IDs I may assign but, in this case, am not ashamed to say it has me a little stuck before I've even started.
If I set an ID on the link, jQuery will overwrite it so, I can't use that approach.
Start of solution
What I'm thinking of is the following, sorry that for the moment, I don't have a fiddle, as/if I progress, I'll update the question.
User clicks the link and jQuery picks up the event by checking if it hasClass('tab-url-call')
Temporarily save the URL attribute
Loop through the tab index
Check if URL attribute matches the temp stored
If matching call this tab
This bit has me at an end of what to do
Next
Update - Extra information
As requested, here is some HTML to demonstrate the current structure
<div id="user-tabs" class="tabs">
<ul>
<li>
Welcome
</li>
<li>
Free content
</li>
<li>
Learning
</li>
</ul>
<div id="tab-user-home">
<h3>You current have freen content "showing"</h3>
<p>
This is just an information box to highlight that the user has an
option set to show free content and inform them that they can
reach it via the tab controls or click
<a
class="tab-url-call"
href="testserver/user/free-content"
>
here for free content
</a>
</p>
</div>
</div>
Thank you for taking the time to read my question.
In abstract what you are looking for is
//register a click event handler for elements with class tab-url-call
$(document).on('click', '.tab-url-call', function(e){
e.preventDefault();
//you need to place the selector for the tab header element here
//find the anchor element with the same href as the clicked element which is inside the tab header element
$('tabheader').find('a[href="' + $(this).attr('href') + '"]').click();
})
I don't know if this is the right place to ask this , but please correct me if it ain't.
Now what i am having with me is a
1)pair of navigational accordian with list items in them styled properly.
2)clicking on each list item will load an external page by ajax request.
Now what i actually want is when someone clicks on the list item, i want to call a handler function that makes some changes on some other page i have. Now i could do that by assigning id's to every list item and then setting up onclick listener, but that would be too time consuming and wont be neat.
Thats why i want to know if there is some approach i can try so that i can set up an onclick listener for all of them and which could identify which list item was clicked(as i have to make changes according to click on list item).
<div data-dojo-type="dojox.mobile.Accordion">
<div data-dojo-type="dojox.mobile.RoundRectList" label="Intermediate">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Span and Div'" moveTo="spanView"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Text'" moveTo="textView"></div>
</div>
</div>
Now This is something what i created for the menu, now using dojo i am making the ajax requests and now what i want to do is change contents of another third view based on the clicks of each of such list items.
Is there a neat javascript approach for this....
Please help.....
You could call the getChildren() method on your dojox/mobile/RoundRectList according to the API documentation. Then it will return each direct descendants (widgets), or in your case, the dojox/mobile/ListItem's.
An example:
var items = registry.byId("list").getChildren();
array.forEach(items, function(item, idx) {
item.onClick = function(evt) {
console.log(this.label);
};
});
I also made a JSFiddle to demonstrate this.
I'm trying to make an jQuery toggle menu for a mobile website.
Since it is a wordpress site I would like to make this as dynamic as possible. I want to create a custom WordPress menu.
Now the tricky part comes.
I want it to check if the menu item has children (or child ul) and then toggle between:
<div class="plus">+</div> and <div class="min">-</div>.
When a item has no childeren nothing should happen at all.
So far I've managed to do this, please see my experiment at http://jsfiddle.net/jfvandekamp/9Dvrr/2/
You can use the jQuery function $.contains() to Check to see if a DOM element is within another DOM element.
http://api.jquery.com/jQuery.contains/
So in your example, you'd check to see if the menu item that was clicked contains another UL element
$jQuery.contains($(this), '<ul>');
I would use $.has() to filter out the collapsible items.
I've updated your jsFiddle: http://jsfiddle.net/9Dvrr/5/