MagicMirror² v2.7.0 is available! For more information about this release, check out this topic.

iFrame Form Issue



  • I’m setting up my first Magic Mirror as replacement for a family whiteboard/calendar. I have pretty much everything working correctly except for one item. I have a behavior reward star chart for my kids. Its a simple php form to a database set up on my pi.

    0_1545319723608_Screen Shot 2018-12-20 at 10.25.42 AM.png

    The Add, Remove, Reset buttons are supposed to change the corresponding number of stars for each row. When I load the php file in a browser, everything works fine.

    I have the file on my MM using MMM-iFrame-Ping on a slide by itself within MMM-Carousel:

    		{
    			module: 'MMM-Carousel',
    			position: 'top_bar', // Required only for navigation controls
    			config: {
    				transitionInterval: 0,
    				mode: "slides",
    				showPageIndicators: true,
    				showPageControls: true,//CSS file has been modified to make invisible because setting to false crashes module
    				ignoreModules: ['updatenotification', 'alert'],
    				slides: [
    					    ['MMM-CalendarExt','MMM-NOAA3','MMM-ImagesPhotos',{name:'MMM-EyeCandy',carouselId:'1'},'clock'],
    					    [{name:'MMM-EyeCandy',carouselId:'2',position:'top_left'},'clock','MMM-HTMLBox','calendar'],
    					    ['MMM-BackgroundSlideshow', 'clock'],
    					    ['MMM-iFrame-Ping'],
    					    ],
    				keyBindingsMode: "DEFAULT",
    				keyBindings: {
    					NextSlide: "ArrowRight",
    					PrevSlide: "ArrowLeft",
    					Slide0:    "1",
    					Slide1:    "2",
    					Slide2:    "3",
    					Slide3:    "4",
    				}
    		
    			}
    		},
    
    
    		{
    			module: 'MMM-iFrame-Ping',
    			position: 'top_left',	// This can be any of the regions.
    			config: {
    				// See 'Configuration options' for more information.
    				url: "http://192.168.1.54/stars.php", //url to display
    				height:"250px",
    				width:"800px",
    				autoRefresh: false, //set to false for video
    				displayLastUpdate: false,
    			}
    		},
    
    

    The problem is that the “Add” button in the first row doesnt work. Clicking it has no effect. All the other buttons work fine. I have tried changing the button name and value, no matter what the first button doesn’t work. Adding a separate “Add” button elsewhere in the table with the same coding works fine. The only way I can get the first “Add” button to work is to add “<br />” before the button code in the cell, but that takes more space and throws off the alignment. Any ideas on how to get this to work without the line break? Thanks


  • Module Developer

    @bugman61

    I’m not seeing the code for your buttons, that’s what needs looked at



  • Here is the applicable section from the php file.

    		if (mysqli_num_rows($result) > 0) {
    			
    			while($row = mysqli_fetch_assoc($result)) {
    				
    				echo "<tr><td>" . $row["name"]. "</td>";
    				
    				for($x = 0; $x  $x) {
    						echo "<td><img src="\&quot;full_star.png\&quot;" /></td>\n";
    					} else {
    						echo "<td><img src="\&quot;empty_star.png\&quot;" /></td>\n";
    					}
    				}
    				echo "<td><br />Add<br />\nRemove<br />\nReset</td></tr>\n";
    			}
    		} else {
    			echo "0 results";
    		}
    
    

    Is there a way to post the html source without it getting converted? When I past the table code most of the tags get removed.

    
    	
    
    		<table>
    	<tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th> </th></tr>
    	<tr><td>Isla</td><td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="empty_star.png" /></td>
    <td><img src="empty_star.png" /></td>
    <td><br />Add<br />
    Remove<br />
    Reset</td></tr>
    <tr><td>Maggie</td><td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="empty_star.png" /></td>
    <td><img src="empty_star.png" /></td>
    <td><img src="empty_star.png" /></td>
    <td><img src="empty_star.png" /></td>
    <td><img src="empty_star.png" /></td>
    <td><img src="empty_star.png" /></td>
    <td><br />Add<br />
    Remove<br />
    Reset</td></tr>
    <tr><td>Nolan</td><td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="full_star.png" /></td>
    <td><img src="empty_star.png" /></td>
    <td><img src="empty_star.png" /></td>
    <td><img src="empty_star.png" /></td>
    <td><br />Add<br />
    Remove<br />
    Reset</td></tr>
    	</table>
    	
    
    

  • Module Developer

    @bugman61

    I’m not seeing anything wrong with what you’ve posted thus far…

    for html code, add a space after the first <

    < button data-video-src="modules/MMM-MyVideoPlayer/videos/video_one.mp4" class="button">
       <img class="image" src="modules/MMM-MyVideoPlayer/posters/one.jpg" />
    


  • @justjim1220 said in iFrame Form Issue:

    @bugman61

    I’m not seeing anything wrong with what you’ve posted thus far…

    for html code, add a space after the first <

    That gets me this:

    0_1545330462808_Screen Shot 2018-12-20 at 1.26.47 PM.png

    The tags for all the buttons are completely identical except for the text label and the value which is a combination of the row id and A, S or R. I would suspect it has something to do with the page being in an iFrame and/or the browser used by MM.



  • I have changed the layout a bit and went with smaller + and - buttons on one line. So the required line break no longer messes with the appearance. It’s still very perplexing as to why the one single button never works in the MM.

    0_1545357673608_Screen Shot 2018-12-20 at 8.59.50 PM.png


  • Project Sponsor

    @bugman61

    If the same code works in any another position but there I’m guessing that either you have something “above” the buttons that hinders it to be clicked on or you have a formatting error somewhere that renders the buttons not clickable/functioning.



  • Just to follow up on this, it appears that the issue had something to do with interaction between MMM-Carousel and MMM-iFrame-Ping. The form worked fine with the iFrame module displayed on its own, the issue only presented when it was part of a slide within MMM-Carousel. I have switch my mirror around to use MMM-OnscreenMenu instead and the form behaves as expected now.