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.
Related
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.
Greetings I have the following javascript controlling some DOM elements on my page to toggle on/off to hide the elements and save real estate on the page ...
I have a gridview at the bottom of the page, and when I perform operations on the gridView, my page reloads and the toggle is reset.
// Toggle Dealer Information on/off
$("#mlldlr").click(function () {
$("#DealerContainer").toggle();
$("#ShowHideDI").toggle();
if ($("#morelessDi").text() === ("...show less"))
$("#morelessDi").text("...show more");
else
$("#morelessDi").text("...show less");
The problem is ... if I toggle off and I reload the page for whatever reason, the toggle is reset to on, meaning the items show. I want them to remain closed until I initiate their reopening. Is there any way to do this?
JavaScript doesn't store state between page reloads by default. If you want to persist the state, you'll need to store that information some where. localStorage might be the right solution. Here's a simple example of how localStorage can keep a css state after reloading: http://jsfiddle.net/kweqaofv/2/
Other than using the COOKIE or The hide();
Follow the simple 1 line code:
$("element").toggle(100);
#element is the element of which you want to turn off the toggle on page loads
Just insert this line at first and then,
Toggle your element, like a sliding dailog or
Navigation panel!
Hope it helps!
Put this below the tag.
<script type="text/javascript">
$(document).ready(function ()
{
$("#DealerContainer").hide();
$("#ShowHideDI").hide();
});
</script>
The fact that the page is reloaded is making the DOM to reset to its initial state, thus resetting the toggle.
The only way I think this can be done is to have a parameter that would not be changed on page reload.
I have three suggestions:
1- You can set a cookie in your browser with the value of the toggle (on/off) and when the page loads, ask for this value and set the toggle. This can be done with jquery (follow this link for more info How do I set/unset cookie with jQuery?):
To set a cookie:
$.cookie("test", 1);
To delete it:
$.removeCookie("test");
2- The other option is to save this parameter on the server side. I'm guessing that if the page is reloading is because you are making a request to the server?
If this is the case, you could send the state of the toggle to the server, do your query, and on the response get the state of the toggle back. In the callback function you would then set the proper toggle state.
3- Another way could be using a JFrame for the grid, making the grid the only item of the page to reload.
Hope this helps
I had a similar problem with one that is as simple as
Jquery
$(document).ready(function() {
$('nav a').click(function() {
$('p').toggle('slow');
});
});
with regards to toggle being switched "on" upon page load.
All I did on this on was inline text the html with style="display :none;".This switches off the 'p' tag upon load and thus the user can switch it "on" any time after that.
So that is
HTML
<nav style="padding-top: 1cm; padding-bottom:1cm;">
<ul>
<li style="padding-bottom: .2cm;">
<a class="popup" style="padding-bottom: .2cm;cursor : pointer;"><b>Send</b></a>
</li>
<p style ="display: none;">your cat a litter box.
</p>
</ul>
</nav>
Bear in mind that the 'p' takes no space upon page load.
Hope I shed some light.
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.
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"