Develop Reference

Pass select value to masterpage when it changes

I am working with an ASP.NET application for my company. I have a MasterPage with a navbar with options. One of the options displays another page but now the company ask me to pass a parameter to the link. I already find out how to do that (with a property in the Main.Master class). But here is where I have the problem. Tha parameter must be the value from a select element in the main page and it must be saved in the property as soon as the user select one.
I can't call the onChange event because the element isn't an asp component and i mustn't change it because and API (Select2) need it to be a normal html element. But maybe there is a way; if you know please tell me how.
I also try to retrieve the value with JS and pass it from to the master page with ajax, but it didn't work because it only calls a static method and a static method can't use the MasterType reference to change the Main.Master.
So, does exist some way to achieve what I want? Also, sorry for not post code but this is a bit confidential.

yes, you can. Probably the most easy?
Well, in your main menu (likey based on the bootstrap default menu), you can in place of a href link, drop in a menu button (use a link button).
So, say we have this menu markup
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
<li>
<asp:LinkButton ID="LinkButton1" runat="server" Text="My Test Update" OnClick="LinkButton1_Click"></asp:LinkButton>
</li>
</ul>
</div>
So, you have your standard menus - hrefs - they jump without any code.
But, note the last one menu - the My Test Update.
That is a link button. so now you have a event stub in your master page code stub.
You get a menu like this:
And I just dropped in a text box on that page. Like this:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<h2><%: Title %>.</h2>
<p>Your app description page.</p>
<p>Use this area to provide additional information.</p>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Content>
so far, that's as plan jane as it can be.
So, now how can we pick up the text box? Well, you can do this, in master page - code behind:
Protected Sub LinkButton1_Click(sender As Object, e As EventArgs)
Dim MyContent As ContentPlaceHolder
MyContent = Me.FindControl("MainContent")
Dim MyTextBox As TextBox = MyContent.FindControl("TextBox1")
Debug.Print("text box value = " & MyTextBox.Text)
Response.Redirect("~/RadioFun.aspx")
End Sub
So notice how we simply grabbed the text box value. Now how to pass to the next page? Gee, you could use session, or use that value as a parameter in the url that you jump to, or whatever.
So, by replacing the menu navigation from a href to a link button? Well, it looks the same, but now you get a event code behind in your master page code. And as above shows, it quite easy to pull/pluck out the values - at that point, as noted, you can shove that value into session() and then jump to the page that the menu click button (link button) supposed to navigate too. You also cound consider using post-back URL. if you look close, note that Page.PreviousPage is a property of the page. The "previous" page ONLY works on first page load, and ONLY works if the button in question uses a postback URL. So, we could dump the linkbutton event (but still use the link button). Set the post-back url of the link button in the markup. That way, then on page load (only first load - postback = false, then you are free to use page.prevous - and you can use find control against that page like I did as per above - your free to grab "many" controls - not just pass one value.
PostBackURL is thus another way - and I often use PostBackURL in a button dropped on a page - it will navigate to the new page - does so without a event code behind stub, but MORE important using PostBackURL settings for that button/control ALSO enables you to use/get/grab the page.previousPage property - that previous page is in fact the WHOLE previous page that was passed to the server - and you can then grab say values from a WHOLE form or whatever. Just keep in mind that since you have a master page, then the two step process (get the content page, then then a find control on that page is still required).
So either above approaches will work.

Laravel 5.2 add variable to request using jQuery

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.

JS Accordion to stay open while clicking links

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

Resetting dropdowns(especially menus) when a link is clicked in a Single Page Application

On a normal website you can open all the submenus/dropdowns you want and when you go to a new page it loads and everything is nicely reset but in a single page application since only a sub section of the page changes a method for resetting the page needs to be used.
This is the basic HTML structure of my menu. It is pretty common except for maybe the dropdown-toggle directive and the data-group attribute.
dropdown-toggle value is the ID of the element who's visibility is to be toggled.
data-group value is just to group dropdowns together. This is used to prevent two dropdowns from the same group being visible at the same time. If a dropdown from group "navigation" is visible and you try to open another from the same group, the currently visible dropdown will first be closed.
<ul>
<li>
Dashboard
</li>
<li>
<a dropdown-toggle="submenu-repairs">Repairs</a>
<ul id="submenu-repairs" data-group="navigation">
<li>
Take In
</li>
<li>
Search
</li>
</ul>
</li>
<li>
<a dropdown-toggle="submenu-customers">Repairs</a>
<ul id="submenu-customers" data-group="navigation">
<li>
Register
</li>
<li>
Search
</li>
</ul>
</li>
</ul>
Problem
In a Single Page Application(especially on a mobile device) you may have submenus inside submenus which take up a lot of screen and when a user clicks one of the links the browser does not reload a whole new page so therefore by default the menus are still open.
On a small device with little screen space it may appear like nothing happened when the link was clicked.
The goal is to close the submenus once a link is clicked and here are some ways I have been thinking of doing it:
Attach an event listener to every <a> element in the DOM which has a href attribute that is not equal to an empty string. That event listener would somehow check if any submenus are open and close them.
If Angular dispatches an event whenever the route/url changes then I could create a listener for that event which could somehow check for any open submenus and close them.
If number 1 is the best way then what do you do when a new view loads, do I have to attach event listeners to all the <a> elements in it?
Is number 2 even possible?

You could listen to the <ul /> which contains the <a /> elements, as the clicks on the latter will propagate all the way up the DOM.
Once the click event reaches the <ul /> element, you can toggle an active class which would hide/show the submenu.
Here's an example Plunker
Edit: Code examples:
Toggle the $scope.active_submenus boolean within the controller
$scope.active_submenus = false;
$scope.toggle_nav = function()
{
console.log( 'toggling', $scope.active_submenus );
$scope.active_submenus = !$scope.active_submenus;
}
Update active class based on ng-class
<ul ng-click="toggle_nav()" ng-class="{ active: active_submenus }">

Make a link do 2 actions

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"