I have a navigation with 2 buttons, when clicking a button it loads a new page (new page load), when clicking the button, a class with classname selected should be added...
It does that partially - It add's the class, but when it loads the new page, the class is removed again? How do I make the class stick to what the user has clicked?
$(document).on("click", ".list-mode button", function () {
$(".list-mode button").removeClass("selected");
$(this).addClass("selected");
});
If you're navigating to a new page, changes you've made using JavaScript to the current page aren't going to appear in the new one. You really have three options:
Add the correct class to the correct element in the HTML of the new page using server-side code.
Add the correct class to the correct element using JavaScript in the new page; you'll need a way to determine which element the class should be added to (possibly part of the URL of the new page).
Use AJAX navigation, and rather than loading a completely new page simply load the new content and replace part of the already loaded page.
You need cookies or DOM storage for this.
Whenever the page is going to be abandoned, you need to store somewhere what the user did last time and initialize the whole buttons with the stored settings.
As you're using jQuery, handle the document.ready event and initialize there the buttons whenever the page is loaded:
$(document).ready(function() {
// Initialize the whole buttons
});
Related
I am working with this Template from templatemo.
I wanted to include some references to other parts of the website in the body text (e.g. Please "contact me" for further information). If you click "contact me" the page should navigate to "Contact" in the same manner as if the user clicked on the navigation bar to navigate to the page (with the same animation).
In order to so, i added the following code to trigger a click event:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:loadPage(5);">contact form</a></p>
And the function to trigger the click:
function loadPage(pageNo) {
$(document).ready(function() {
$('.nav-item').get(pageNo).click();});
}
So this code is working, if I click on the reference the page changes as if I clicked the navigation bar. BUT:
If I reload the page and click on the reference, the page navigates to the contact page, which then however is not diplayed properly (the contact form and the google maps view are missing).
If I reload the page, first open the contact page via the menu, then switch to the page with the reference and click on it, the contact page is loaded properly.
This behaviour is also shown if I reference another page (e.g. the Gallery). The gallery elements are displayed (the page is not completely empty), but the spacing between the elements is not correct.
It seems like every page has to be loaded at least once via the navigation bar. If this has happened, all pages are displayed properly when opened via a reference in the text.
Thanks for your support.
Your template use Hero slider + some customs JavaScript functions to move between "pages", so you need to use the same functions to get the same behaviour.
Doing that will work:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:goToPage('Contact');">contact form</a></p>
You need to add this JS function:
function goToPage(page_name) {
// Retrieve the <a> tag with the page_name
// page_name is the string of the page in the navbar
page_link_a = $('.navbar-nav .nav-link').filter(function(index) { return $(this).text() === page_name; });
page_link_li = page_link_a.parent();
// Trigger js code from hero slider
page_link_li.click();
// Trigger js code from templatemo
page_link_a.click();
}
The function goToPage() take one parameter, the string name of the section so if you have a section named My Gallery you need to put that, not my-gallery nor an index.
Goals
control when this Button element fades back into the webpage
open a URL of choice in a new window.
Current Results:
Element fades away after the on-click event hide function runs but does NOT come back without having to refresh the page.
Test:
I've tried to use letShow to allow a timer (not much success, I'm very new to Javascript.) It also did not work for my needs.
Code:
export function ElementName_click(event) {
$w("#ElementName").hide("fade");
}
My problem is that the bootstrap toggle plugin only works every other time.
I'm using bootstrap-toggle to provide better styling to my checkboxes.
<link href="~/Content/bootstrap-toggle.min.css" rel="stylesheet">
<script src="~/Scripts/bootstrap-toggle.min.js"></script>
I'm using these in a partial view that is returned when an ajax call is made.
This is an example of my implementation:
#Html.EditorFor(model => model.Active, "", new { htmlAttributes = new { #id = "Active", data_toggle = "toggle", data_width = "100%", data_on = "Active", data_off = "Disabled" }})
On the first load of the view when I click on the toggle it switches to the other value. If I close the window that the view has loaded in without refreshing the page, reopen the window and click on the toggle, nothing happens.
Edit: I should also mention that if I close the window that the view has loaded in Again without refreshing the page, reopen the window and click on the toggle it works. The issue isn't that it only works on the initial load but that it is working 50% of the time.
This happens because the script setups itself on the elements of your web page only once, which happens right after the page is loaded. After that, whenever you load new DOM elements (such as what happens when you reload a partial view through AJAX), the script doesn't execute its setup routine in the newly loaded elements.
After you load new elements via AJAX, you should perform a JavaScript call to bootstrapToggle() (checkout Bootstrap Toggle's API) on the newly loaded elements, so that the Bootstrap Toggle plugin could be activated for the newly loaded elements.
You should call something like this right after the new AJAX elements get loaded on the page:
// Replace by a selector which selects the elements which have been created
$('#myNewLoadedCheckboxElement').bootstrapToggle();
Here's what I have:
A web application that runs in a single HTML page (call it myapp.req), with content coming and going via AJAX
The application can be entered externally with a link such as myapp.req?id=123, and the application opens a tab with the item at id 123
The content on the page is mostly user's content, and many times has inner-application links to myapp.req?id=123
The problem is that clicking a link to myapp.req?id=123 reloads the browser, and removes any content or state that the user had loaded
What I want is to be able to catch link clicks whose destination is myapp.req?id=123, and instead of reloading the page, just open the tab for item 123, leaving anything else currently loaded alone. If the link is for an external website, though, obviously just let the browser leave.
So my question really: Can I have a global link handler that checks if I want to handle the link click, and if so, run some Javascript and don't leave?
I understand I could find all <a>s and add listeners, but my hope is that the solution would only require setting up the listener once, and not adding link handlers every time new content is loaded on the page. Since content can be loaded many different ways, it would be cumbersome to add code to all those places.
Does that make sense?
jQuery's live is what you need:
$('a').live("click", function () {
var myID = $(this).attr('href').match(/id=([a-zA-Z0-9_-]*)\&?/)[1];
if (myID) {
//run code here
alert(myID);
return false;
}
});
Any link will now have this click handler whether it's been added after this is called or not.
Sure you can. Add a clickhandler on the body. So you catch all clicks. Then you have to check if the target of the event or one of its parent is a link with your specific href. In this case stop the event and open the tab.
updated to use .live instead of .click
If you use jQuery, you can add a "live" click event handler to every a href at once:
<body>
click here
<br/>
whatever
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('a').live('click',function() {
var myID = $(this).attr('href').match(/id=([a-zA-Z0-9_-]*)\&?/)[1];
if (myID) {
//run code here
alert(myID);
return false;
}
});
</script>
This should extract the id from the href's query string and let you do whatever you want with it.
I have a link in my app that when clicked, leads to another page. I want to execute some JQuery on this new page after it loads, but only if that specific link is clicked to get to the page.
I have this JQuery:
$('#new_to_topics').click(function(){
$(document).ready(function() {
$('#topic_guidelines').slideDown('normal');
$('#topic_guidelines').addClass('on');
});
});
where #new_to_topics is the id of the link that leads to the new page and
$('#topic_guidelines').slideDown('normal');
$('#topic_guidelines').addClass('on');
is the JQuery code I want to execute on that new page. However, this does not work. How should I do this?
You could pass a location hash to the new page, and then conditionally run some javascript based on that hash.
If my link was to mynewpage.html#fromXlink (this would show in the address bar)
My javascript on mynewpage.html could be:
$(document).ready(function() {
if (location.hash == '#fromXlink') {
$('#topic_guidelines').slideDown('normal');
$('#topic_guidelines').addClass('on');
}
});
You could add a variable to the query string i.e. somepage.aspx?fromthislink=true
and then pick that up in jquery.
This shows how
If it cam from that link then fire off your jquery.
You can use window.name to pass data to the target page (although I would prefer passing data in the hash, if possible).