I have a header in my project that can sometimes changes based on a specific url.
I want the header to be reloaded if the path/url has changed. Currently, I do this:
Template.Header.onRendered(function(){
if(window.location.href.indexOf("project") > -1) {
// do something with the header (add for example a <option> element)
}
});
The "do something"-code works, if the url contains project than the code gets executed and I get (for example) an extra option element, however when I change to an url without project than the extra option element should be removed. How do I need to change the code?
Related
I'm trying to tweak the WordPress plugin https://github.com/algolia/algoliasearch-wordpress to suit our needs. What we want to be able to do is have a search result that will load the data up in the same page.
I have my WordPress posts and its data being indexed successfully. I have added a search box to the page, and autocomplete is being fired.
Out of the box, the WordPress plugin template wraps the result in an anchor tag and assigns it the URL of the found result. When clicked, this navigates you to that post. However, what I want to do is intercept that click and load the result in the same page without navigating away.
I have removed the href from the anchor. I have also edited the supplied autocomplete.php template where the call to autocomplete:selected occurs. In there I have removed the call to navigate away by removing window.location.href.
Now I have two main issues.
1 - When the user clicks the search result I would like the input to be populate with the title of the item they clicked on. I added this in the autocomplete:selected callback by adding $searchInput[0].value = suggestion.post_title. Which seems to change the value of the input correctly, but as soon as I click away from the input, it is re-set back to the original typed value. So if I type 'may' and click the result 'mayonnaise', the result data can be accessed but the input returns back to 'may'. My function looks this:
/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
.on('autocomplete:selected', function (e, suggestion) {
console.log(suggestion);
autocomplete.autocomplete.close();
});
2 - It seems that the autocomplete dropdown does not hide when the user clicks away. To resolve this i've had to use what I think is a bit of a nasty hack with jQuery. I was wondering if this is really required? My code just below the autocomplete:selected call looks like this:
jQuery('body').on("click", function(event){
if (!jQuery(event.target).closest($searchInput[0]).length) {
autocomplete.autocomplete.close();
}
});
Found some answers to my questions.
1 - In order to populate the input with the title of the selected search result I added a call to the setVal method of the autocomplete object. I'[m still not sure why this is required.
/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
.on('autocomplete:selected', function (e, suggestion) {
autocomplete.autocomplete.setVal(suggestion.post_title);
});
2 - It looks like the config of the autocomplete object uses the value of WP_DEBUG in order to set the debug value. The options available for the autocomplete component can be found here https://github.com/algolia/autocomplete.js#options. This lead me to find that when debug is set to true, the autocomplete box does not hide on selection. This is to allow for easier debugging and styling of the component.
I need to make an ActionLink that redirects to the previous page, but the previous page is divided in 5 tabs. So for the URL say
host/Admin/AdminMain
which has the tabs, when I hover over tabs the link appears to be
host/Admin/AdminMain#tabs-1
host/Admin/AdminMain#tabs-2
and so on.
In tabs-2 I have a link to another View, like host/Admin/SomeController, and there I need to create the ActionLink in the View that redirects me back to tabs-2, instead of tabs-1 as it does. The ActionLink right now looks like this:
#Html.ActionLink("Back to Main", "Index", "AdminMain")
How can I specify to redirect me to #tabs-2?
The #tabs-2 portion is called the "fragment" of the URL. It's not actually part of the URI for the resource, and is only used client-side to "jump" the user to portion of the document with that id.
However, something like tabs require JavaScript to function, and the browser cannot automatically switch to a tab based on the fragment, because it doesn't know how to do that. You'd need to write some JavaScript read the fragment and then attempt to activate the appropriate tab, using whatever library you're using for that.
(function () {
var fragment = location.hash;
if (fragment !== '') {
// activate tab with that id
}
})();
I am following this example https://kadira.io/academy/meteor-routing-guide/content/rendering-blaze-templates
When I click on my links the whole page is being reloaded. Is there any way to load only the template part that is needed and not the whole page?
Edit: Also I noted another problem. Everything that is outside {{> Template.dynamic}} is being rendered twice.
Here is my project sample. https://github.com/hayk94/UbMvp/tree/routing
EDIT: Putting the contents in the mainLayout template and starting the rendering from there fixed the double render problems. However the reload problems happen because of this code
Template.mainLayout.events({
"click *": function(event, template){
event.stopPropagation();
console.log('body all click log');
// console.log(c0nnIp);
var clickedOne = $(event.target).html().toString();
console.log('This click ' + clickedOne);
//getting the connID
var clientIp = null // headers.getClientIP(); // no need for this anymore
var clientConnId = Meteor.connection._lastSessionId;
console.log(clientIp);
console.log(clientConnId);
Meteor.call("updateDB", {clientIp,clientConnId,clickedOne}, function(error, result){
if(error){
console.log("error", error);
}
if(result){
}
});
}, // click *
});//events
Without this event attached to the template the routing works without any reloads, however as soon as I attach it the problem persists.
Do you have any ideas why this code causes such problems?
EDIT 2 following question Rev 3:
event.stopPropagation() on "click *" event probably prevents the router from intercepting the click on link.
Then your browser performs the default behaviour, i.e. navigates to that link, reloading the whole page.
EDIT following question Rev 2:
Not sure you can directly use your body as BlazeLayout target layout.
Notice in the first code sample of BlazeLayout Usage that they use an actual template as layout (<template name="layout1">), targeted in JS as BlazeLayout.render('layout1', {});.
In the tutorial you mention, they similarly use <template name="mainLayout">.
That layout template is then appended to your page's body and filled accordingly. You can also change the placeholder for that layout with BlazeLayout.setRoot() by the way.
But strange things may happen if you try to directly target the body? In particular, that may explain why you have content rendered twice.
Original answer:
If your page is actually reloaded, then your router might not be configured properly, as your link is not being intercepted and your browser makes you actually navigate to that page. In that case, we would need to see your actual code if you need further help.
In case your page does not actually reload, but only your whole content is changed (whereas you wanted to change just a part of it), then you should make sure you properly point your dynamic templates.
You can refer to kadira:blaze-layout package doc to see how you set up different dynamic template targets in your layout, and how you can change each of them separately (or several of them simultaneously).
You should have something similar in case you use kadira:react-layout package.
I am trying to implement SiteCatalyst's inbuilt variable 's.pageType' using DTM (which we use to capture the 404 error pages).
I can definitely write this piece of code in DTM's s.code:
s.pageType="errorPage"
But the problem is the condition which would identify if the page is 404 error page or not, can be identified only at page code level (as per developers, there are exceptions which is thrown if error page comes up, which can be used to identify this condition on the page), but this logic we cannot be used in DTM. Along with this, on the 404 error page, the pageName variable should not be populated.
How this can be done, since I am fetching pageName from a data element in DTM (inside "Pageviews & Content" section) which would always fire on every page.
How to implement this, please help me out. Am I missing something ?
Thanks,
Adi
It sounds like your setup is like this:
<dtm header tag>
// code that identifies 404 page
<dtm footer tag>
And it sounds like the issue is that since data elements are the first thing evaluated up in DTM top tag, your page name data element is being evaluated before it is known that it is a 404 page.
What I would do is in the code that identifies that it is a 404 page, make it output a global js var that flags the page as a 404 page, e.g. window.is404Page=true;.
From here, the overall goal now is to keep your existing data element and pageName assignment as-is, but then later override it with an empty string (and pop pageType instead). You didn't really give any details about where you are actually setting pageName, so here are some scenarios that should point you in the right direction:
Scenario 1: pageName is set in Pageviews & Content in the main tool config
1.a: In Library Management, if you have set AA to load at Page Bottom, then go to Customize Page Code section, make sure it's set to execute "after UI Sttings" (If you are already using this code box and it must be set to execute before UI settings, then skip this and go to 1.b). Click on Open Editor and add the following:
if (window.is404Page) {
s.pageName='';
s.pageType='errorPage';
}
1.b: In Library Management, if you have set AA to load at Page Top, then you will need to create a page load rule (or use an existing rule that will trigger on every page view) that evaluates at page bottom, on dom ready, or onload (basically anything but top of page - point here is to get it to eval after is404Page has been set). Within the rule, go to Adobe Analytics > Custom Page Code and add the code from 1.a there.
Scenario 2: pageName is set within a page load rule
If your page load rule is set to trigger at "Top of Page" then you will need to create a separate rule that triggers after that. See 1.b.
2.a: If you are setting pageName from within the DTM field using %dataElement% syntax, then add the code from 1.a to the Custom Page Code section.
2.b: If you are setting pageName from within the Custom Page Code section, using e.g. s.pageName=_satellite.getVar('dataElement'); then simply add the code from 1.a directly below it.
TL;DR: set a global js var to act as a flag in your on-page code that determines if 404 page and then look for that in your DTM code to overwrite pageName and write pageType in DTM custom code sections that get eval'd after the js flag var is set.
I'm trying to load content from a different file into a div element within the current file using the jQuery load() function. Nothing fancy, just loading it and that's it. However the links that are contained in the loaded file become "disabled", you cannot click them, and pseudo-classes like :hover seem to be left out as well. Is there a solution to this?
$(document).ready(function() {
$("div.content").load("content.html");
});
let's say content.html contains just this line:
xxx
When it is loaded into the <div class="content"> the link is not clickable. It is colored according to the css, however the :hover effect doesn't work, and it behaves like normal text - not a link. This is a problem because the content I'm trying to load has a couple of links, and none of them work after being load()'ed.
I believe your issue is:
You use $('div.content').load('content.html') to send a request for content to (later) be inserted into the DOM.
You then run some code to specify handlers for nodes using $(document).click, $(document).bind etc - but this code runs before the new nodes have been added to the DOM.
New nodes are then added when the .load call completes.
The behaviour that you defined on all the origional nodes isn't being followed on the new nodes.
If that is the issue your're describing - then you need to add all the same bindings to the new nodes once they're created.
i.e. you need to provide a callback to add the bindings to the new elements:
function on_data_loaded() {
$('div.content ...').hover(.....);
// etc.
}
$('div.content').load('content.html', null, onloaded);
(note that's not a particularly clean way of doing it, but it should explain what needs to be done).