I have the following situation. I have a jquery mobile page with multiple pages.
The pages content in separate pages and are loaded with Jquery Ajax.
In one of the page, there is a iframe and its content comes from a jsp page.
HTML file one, is a jquery main pages with multiple page
<div id="page1" data-role="page" data-title="page1">
</div>
<div id="page2" data-role="page" data-title="page2">
</div>
<div id="page3" data-role="page" data-title="page3">
</div>
CONTENT of page 3 :
<div class="ui-header ui-bar-a ui-header-fixed" data-role="header" role="banner">
</div>
<div class="ui-content" data-role="content" role="main">
....
<tr>
<td valign="top">
<iframe name="uploadIframe" src="uploadImage.jsp" marginheight="0px" marginwidth="0px" scrolling="no" width="350" height="50" frameborder="1" ></iframe>
</td>
</tr>
....
</div>
The problem I have is that the iframe content which is uploadImage.jsp is not loaded.
Coould anyone help me ?
Wait for the content loaded event.
var doc = window.frames.uploadIframe.document;
doc.addEventListener("DOMContentLoaded", function () { /* ready */});
Related
I have a view in my ASP.NET Core application.The view split into 2 div containers Left and right containers in the 1st container i load some stuff with java script Now in my seconded container i want to load a different website example http://example.com
<div class="page-container">
<div class="panel-container">
<div class="panel-left">
panel-left
</div>
<div class="splitter">
</div>
<div class="panel-right">
I want to load a website here (http://example.com)
</div>
</div>
</div>
You can use an iframe tag:
<iframe src="https://www.w3schools.com"></iframe>
I am building a jquery mobile webpage . I use swiper slider plug in for image gallery. But navigation buttons and and pagination not works correctly without reloading page. when visitors enter the sixth page. I just want to
automatically refresh only that page and only once. My image gallery in that page already. My html codes like this. I guess we can do reloading webpage with java script codes. But although I do a lot of research, i could not find the solution. I will be grateful if you can help me.
<div data-role="page" id="page6">
<div data-role="header">
<div class="logo"></div>
<div class="blueline"></div>
</div>
<div data-role="content" class="bodycopy"><center>Resimleri Görmek İçin Yukarı Kaydırın</center>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" ><img src="images/image-1.jpg" alt="resim-1"></div>
<div class="swiper-slide" ><img src="images/image-2.jpg" alt="resim-2"></div>
<div class="swiper-slide" ><img src="images/image-3.jpg" alt="resim-3"></div>
<div class="swiper-slide" ><img src="images/image-4.jpg" alt="resim-4"></div>
<div class="swiper-slide" ><img src="images/image-5.jpg" alt="resim-5"></div>
<div class="swiper-slide" ><img src="images/image-6.jpg" alt="resim-6"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div data-role="footer" class="footer">
<h4>Button</h4>
</div>
</div>
You can use location.reload() with location = location as a fallback for older browsers to reload the page with Javascript.
<button id="reload" onClick="refresh()">Reload</button>
<script>
function refresh(){
location.reload() ? location.reload(): location = location;
}
</script>
As a result of my researches I have found a solution like this:
I divided my jquery mobile website in different pages. So multiple page website. And created an external js file for swiper slider. I put the .js link on end of body tag which page includes swiper slider codes in it. Every thing is okay now. It works very well. Before this editing all of the page codes were in same file. Because of this swiper slider did not work correctly. Now i don't need to refresh the page.
using SwipeJS how can I call a different html? For example using the following code to swipe pages I use it as index.html and I want to call other three inside like page1.html page2.html and page3.html Is that possible?
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div class="page">
Page 1
</div>
<div class="page">
Page 2
</div>
<div class="page">
Page 3
</div>
</div>
</div>
i'm trying to figure out how i can append a page to the bottom of another page after clicking on a button.
Usually the page with the button disappears and the next page is loaded.
I don't want the first page to disappear, instead just add the content of the second page at the bottom.
For example i have this structure of a page:
<div data-role="page" id="p1">
<div data-role="header"><h1>Header Page 1</h1></div>
<div data-role="content">
If you click this button, this page will be hidden and the next page will slide up.
Go To Page 2
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
<div data-role="content">
<p>This is page2</p>
Go To Page 3
</div>
</div>
<div data-role="page" id="p3">
<div data-role="header" data-rel="back"><h1>Header Page 3</h1></div>
<div data-role="content">
<p>This is page3</p>
</div>
</div>
I created this jsfiddle for illustration.
I am using scrollview plugin on a jquery mobile file and works great on iOS. However when I use an iframe, scroll y is not applied and its content remains fixed. How to apply scroll y on an iframe? Thank you
<div data-role="page" id="init" data-theme="a">
<div data-role="header" id="head" data-position="fixed" data-tap-toggle="false">
</div>
<div data-role="content" data-scroll="y" id="cont" data-theme="a" style="border:none;">
<iframe data-scroll="y" src="http://www.abcd.com" style="border: 0px none;" height="100%" width="100%">
</iframe>
</div>
<div id="id3">
</div>
</div>
all necessary jquery mobile and scrollview plugins are attached.
Please #Jaume try this,
$(function() {
$('#cont').scrollview({
direction:'y'
})
})
Else, you need to include the jquery.mobile.scrollview.js file.