Running code mid page

[toolman]

Hi,

I have the following code which works in console, but when running it on the actual page, it doesn’t do anything.

<script>
jQuery( document ).ready(function() {
console.log( "ready!" );
	jQuery('li.mega-menu:contains("Hotels") ul').removeClass("col-sm-8").addClass("col-sm-3 col-xs-12").css("background","#ffffff");
	jQuery('li.mega-menu:contains("Hotels") .mega-menu-content-img').removeClass("col-sm-4").addClass("col-sm-9 text-right");
	jQuery('li.mega-menu:contains("Hotels") .mega-menu-content-img').html("<img src='/file/hotels.png' style='width: 765px; height: 239px; display: inline' />");
});
</script>

I only have access to a CMS so I can only run it in the middle of the page.

Can anyone see if there is a way of making it run mid page?

Thanks

[toolman]

I’ve managed to get it to work by using a timeout function, but it’s not ideal

<script>
jQuery( document ).ready(function() {
setTimeout(function() { 
	jQuery('li.mega-menu:contains("Hotels") ul').removeClass("col-sm-8").addClass("col-sm-3 col-xs-12").css("background","#ffffff");
	jQuery('li.mega-menu:contains("Hotels") .mega-menu-content-img').removeClass("col-sm-4").addClass("col-sm-9 text-right");
	jQuery('li.mega-menu:contains("Hotels") .mega-menu-content-img').html("<img src='/file/hotels.png' style='width: 765px; height: 239px; display: inline' />");
	}, 5000); // for 5 second delay
});
</script>

It’s basically a nav bar, but it doesn’t load straight away so the jQuery isn’t working. Is there another way without the timeout?

Thanks

[m3g4p0p]

@toolman

It’s basically a nav bar, but it doesn’t load straight away so the jQuery isn’t working.

Hi @toolman, are you loading the nav bar yourself or is this done by some 3rd party code? Could you provide a link to the page or a fiddle or something that demonstrates the problem?

[toolman]

It’s all in the same website, but wit dynamically loads it, so its the last thing to load.

I managed to get it to work with the setTimeout function, but if I go to a new page, it doesn’t fire until you refresh.

[m3g4p0p]

@toolman

It’s all in the same website, but wit dynamically loads it, so its the last thing to load.

Yes but how are you actually loading the content? Using a timeout is definitely not a good solution as it may still break if you have a bad network connection and the request takes longer than your timeout. So you should use a load callback; e.g. if you’re using jQuery’s load() method:

$('.mega-menu').load('mega-menu.html', function () {
  // Init stuff once the content got loaded
})

If you are using another library for this, you’ll have to check the docs if it provides a similar way to callback on load. If you don’t have access to the loading mechanism at all, you might use a mutation observer to check when the menu got populated:

new MutationObserver(function (mutations, observer) {
  observer.disconnect()
  // Init stuff once any nodes got appended to the .mega-menu
}).observe(
  document.querySelector('.mega-menu'),
  { childList: true }
)

(The former approach is certainly preferable, but I know there are situations where there just isn’t any way to directly hook into the internal workings of a CMS…)

[toolman]

Hi,

Thanks for the reply.

I tried both versions, but no luck. I don’t have a mega-menu.html file, so I’m not sure what will go in place of that.

In terms of how its’s loaded, I’m not too sure. I’m guessing it could be through AJAX.

Also, the website uses knockout.js

This is the begining of the menu, but there are so many items in it

<div data-bind="template: {name: templateUrl(),templateSrc: templateSrc()}, attr: {id: typeId()+&quot;-&quot;+id()}" id="MegaMenuContentAndData_v1-wi1900001"><!-- ko setContextVariable: {name: 'elementConfig', value: {
  "14004001": {"id": "14004001"},
  "14004002": {
    "id": "14004002",
    "richText": {
      "content": " ",
      "sourceMedia": "m2240001"
    }
  },
  "14004003": {
    "id": "14004003",
    "richText": {
      "content": "<p>300<\/p>\n",
      "sourceMedia": "m220003"
    }
  },........

I will try to set up a fiddle, but the website is so big.

Thanks

[m3g4p0p]

@toolman

I tried both versions, but no luck. I don’t have a mega-menu.html file, so I’m not sure what will go in place of that.

Those snippets were not supposed to be working out of the box; as I don’t know your markup or how the menu is getting loaded, I can only give you examples for some possible approaches. Of course, you’ll have to adjust the implementation to your actual page.

@toolman

In terms of how its’s loaded, I’m not too sure. I’m guessing it could be through AJAX.

If it is not loaded with AJAX, then there may indeed be a simpler approach. Maybe you just have to wait until knockout completes rendering… I never worked with knockout though. Do you see something template-like getting loaded in the network panel of the browser dev tools?