Skip to main content
Inspiring
January 21, 2025
Answered

Bracket Struggle at generating iframe and append to subelement... ;-P

  • January 21, 2025
  • 2 replies
  • 510 views

Na'Shaya dear Adobe Community!

 

I have a Joomla website where a Jomsocial community installation contains up from a certain rank respectively usergroup a manually extended profile field designated simply as " iFrame" optionally containing an url the user may enter.

 

If a user decides so in result the iframe gets created with those entered url as source attribute and appended into the div normally standardized to contain the cover image according to the native functionality of the community component, while the cover image gets removed.

 

It already works like a charm in case of a community profile on the website is being visited, but on other areas of the website it results in fatal js errors, because it searches for there non-existing elements and shall append it to an element which does not exist either.

 

So I attempted to make the execution of the according functions to depend on a check, if the current url contains the string "xxx/profile" which should indicate that the visitor is indeed visiting a profile and the functions to replace the cover image with the iframe is needed instead of being able to through errors on other pages...

 

So if you love the challenge and appreciate to prove your skills as a programmer,  you may enjoy that opportunity to provide the solution. 

 

I have the strong suspicion that somethings wrong with the brackets at the end of the code sample or a typically missing semicolon or at the wrong place, because without the outer if clause and last bracket it already works like it shall:

 

var URL = window.location.href;

if(URL.indexOf("profile") !== -1) {

var COSMiframe = document.createElement('iframe');
COSMiframe.id = "COSMiframe";
COSMiframe.style.width = "100%";
COSMiframe.style.maxWidth = "980px";
var COSMIframe_location = document.getElementsByClassName("joms-js--cover-image");

COSMIframe_location[0].prepend(COSMiframe);
COSMiframe.setAttribute("style", "min-width: 100% !important; min-height: 100% !important; height: 100%; border-radius: 0px 0px 0px 0px !important; overflow: hidden;");
const allh5Tags = document.querySelectorAll('h5');

allh5Tags.forEach(function(item) {
    if (item.innerText === "iFrame") {
        let nextTag = item.nextElementSibling;
        let nextTagContent = nextTag.innerHTML;

        let hrefs = nextTagContent.match(/href="([^"]*)/);
        let href = hrefs[hrefs.length - 1];

        document.querySelectorAll(".joms-js--cover-image img").forEach(img => img.remove());
        COSMiframe.src=href;
      })
    }
  }); 

 

Correct answer starfleetUpTo.date

Hi! With the support Nancy recommended,  it was possible to fix the code, so it's functional now. For people in a comparable challenge about brackets and semicolons I am happy to be able to provide the according correct result:

var URLx = window.location.href;

// alert(URLx);

if (URLx.indexOf("/profile") !== -1) { 

var COSMiframe = document.createElement('iframe');
COSMiframe.id = "COSMiframe";
COSMiframe.style.width = "100%";
COSMiframe.style.maxWidth = "980px";
var COSMIframe_location = document.getElementsByClassName("joms-js--cover-image");


//alert(COSMIframe_location);






COSMIframe_location[0].prepend(COSMiframe);
COSMiframe.setAttribute("style", "min-width: 100% !important; min-height: 100% !important; height: 666px; border-radius: 0px 0px 0px 0px !important; overflow: hidden;");




var allh5Tags = document.querySelectorAll('h5');

// alert(allh5Tags);

allh5Tags.forEach(function(item) {
    if (item.innerText === "iFrame") {
        var nextTag = item.nextElementSibling;
        var nextTagContent = nextTag.innerHTML;
        
     //   alert(nextTagContent.innerHTML);




        var hrefs = nextTagContent.match(/href="([^"]*)/);
        
        
        
        var href = hrefs[hrefs.length - 1];

// alert(href);


document.querySelectorAll(".joms-js--cover-image img").forEach(img => img.remove());
        
        COSMiframe.src=href;
      }
    });
  }

2 replies

Nancy OShea
Community Expert
Community Expert
January 22, 2025

Run your code through JSHint.

https://jshint.com/

 

You're missing a closing ), too.

 

 

Nancy O'Shea— Product User & Community Expert
starfleetUpTo.dateAuthorCorrect answer
Inspiring
January 23, 2025

Hi! With the support Nancy recommended,  it was possible to fix the code, so it's functional now. For people in a comparable challenge about brackets and semicolons I am happy to be able to provide the according correct result:

var URLx = window.location.href;

// alert(URLx);

if (URLx.indexOf("/profile") !== -1) { 

var COSMiframe = document.createElement('iframe');
COSMiframe.id = "COSMiframe";
COSMiframe.style.width = "100%";
COSMiframe.style.maxWidth = "980px";
var COSMIframe_location = document.getElementsByClassName("joms-js--cover-image");


//alert(COSMIframe_location);






COSMIframe_location[0].prepend(COSMiframe);
COSMiframe.setAttribute("style", "min-width: 100% !important; min-height: 100% !important; height: 666px; border-radius: 0px 0px 0px 0px !important; overflow: hidden;");




var allh5Tags = document.querySelectorAll('h5');

// alert(allh5Tags);

allh5Tags.forEach(function(item) {
    if (item.innerText === "iFrame") {
        var nextTag = item.nextElementSibling;
        var nextTagContent = nextTag.innerHTML;
        
     //   alert(nextTagContent.innerHTML);




        var hrefs = nextTagContent.match(/href="([^"]*)/);
        
        
        
        var href = hrefs[hrefs.length - 1];

// alert(href);


document.querySelectorAll(".joms-js--cover-image img").forEach(img => img.remove());
        
        COSMiframe.src=href;
      }
    });
  }
Nancy OShea
Community Expert
Community Expert
January 23, 2025

Glad you got it sorted. 😊

 

Nancy O'Shea— Product User & Community Expert
BenPleysier
Community Expert
Community Expert
January 22, 2025

You'll have more luck with an answer by going to the Jomsocial. Forum.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!