[rick.gommers]

I have an element with 2 images in it (templateId). I want to get the src of the smallest image and replace an image on another screen with it.

Check out the code below. The alert never fires and there’s no output in the console. How could that be?

$(templateId).children("img").each(function() {
        alert('test');
        if($(this).width()<140) {
            $(this).addClass('smallRing');
        }
    });
      
    $('.smallRing').attr('src', $('#RingDesing01-myRing1').attr('src'));

[support-michael]

Editied – I just saw your other post about an issue with reloading being troublesome in the Sim. Given that I my comment below is a little less helpful. But my expectation is that even with out reloading working you should be able to identify the error. If your alert is not firing then I would start with either there is a syntax error that prevents the code from loading or your selector is incorrect. I frequently use the js console to experiment and develop snippets and incrementally build up more complex code.

Let me propose that you investigate this by running your project in the Simulator and using the awesome Chrome Dev Tools. It’s simple!

Right-click and choose Inspect Element. This will open the Chrome Dev Tools. From the tools open the console and look for errors messages such as a syntax error in your code. If no error msgs then click the Source tab at the top of the dev tools console and open the js file. Set breakpoints in your code and then reload the page. You can step through the code, explore the call stack and local and global variables. You can also run snippets of code in your app context directly in the js console (you will need to change the console’s document context as shown below your app’s main html file). See attachment inspector-doc-context.png

Attachments:

You must be logged in to view attached files.

[rick.gommers]

Hi Michael,

Thx for your reply. I have done what you said above. Together with a much more experienced developer we have looked at this issue, but unable to find the cause. I shall try to explain as clearly as possible what we try to do and what the problem is.

I have 2 screens. Screen01 with custom.js and screen02 which activates the functions (via mobi1 onclick method) in the custom.js of screen01 (do you follow? :P)

The onclick function in screen02 is as follows:

var templateId = ($(newPage).attr('id'));
templChanged(templateId);

The corresponding function in screen01 custom.js is as follows:

alert(templateId);
    $(templateId).children("div").each(function() {
        alert('blaat');
        if($(this).width()<140) {
            alert('small image found');
            $(this).addClass('smallRing');
        }
    });
alert(templateId);
    $('.smallRing').attr('src', $('#RingDesign01-myRing1').attr('src'));

Notice that I have 2 alerts, above and below my function, that return the contents of variable templateId. These return always, in all cases, the id of the page that is clicked upon. So templateId is defined!

Now, the 2nd alert ( alert(‘blaat’); ) does never fire. Why is that?

Using the console I typed templateId or $(templateId) in the simulator and it comes up as undefined!! Why would that be? Both alerts show us that templateId IS defined and has the id of the page that is clicked upon.

This is one retarded issue.. I’ve spent all night on it and still trying to find out what causes it. Many kudo’s to whoever can find the cause of this issue!

[rick.gommers]

Problem solved

[support-octavio]

Hi marcoevich,

Being curious, could you share if the solution was related with the m1- prefix that is added to every widgets? Sharing this information will also help other users who run into this problem in the future.

[rick.gommers]

@support-octavio wrote:

Hi marcoevich,

Being curious, could you share if the solution was related with the m1- prefix that is added to every widgets? Sharing this information will also help other users who run into this problem in the future.

Hi Octavio,

This was not related to m1-prefix, it’s just that passing the templateId variable to the function that didn’t work consistently.

I’ve rewritten the entire function, and instead of creating the variable templateId in the onclick handler, I now send the object itself to my function, in the form of this

Like so: onclick=”templChanged(this);”

[support-octavio]

Hi marcoevich,

Thanks for sharing your solution.

[Author]

Posts