Can any one help me to shout out my problem in scripting page. I'm developing website which displays property. I wanted to know how to block a div from loading when page loads and the content should display and load only on click of a button. Let me explain it below.
<button id="loader" onclick="loaddiv(#items)" value="View Content">
This loads data from external server using API. It has lots of data and images.
Please help.
The DIV itself should not have any content when the page loads, so simply a empty div with an ID tag..
Where you have "loaddiv(#items)" ... this is invalid, well the # part anyway... try "loaddiv('#items')" to make it a string in which jquery can then handle.
Once the page has loaded, then you would use jquery with something like get/post.
<div id='items'><!-- i'm empty for now --></div>
<button id="loader" onclick="loaddiv('#items')" value="View Content">
<script>
function loaddiv(sID) {
$.get( "ajax/test.html", function( data ) {
$(sID).html( data );
});
}
</script>
Related
I have searched the forum and the internet for an example on how to move around in a dialog box using hyperlinks. Maybe this is an old and answered problem but here goes:
I am loading the html content from either a database or a file. This content contains a lot of internal hyperlinks to various divs etc. in the html code. None of them are working, not even links to move to the top of the page within the dialog.
My question is simply if this, at all, is possible to do? And if it is what am I doing wrong?
Simple html file example (htmlfile.html):
function showFile(file){
$.get(file), function(result) {
if (result != undefined) {
//Open the dialog here
$(result).dialog({
.
.
});
}else{
alert("Could not load content");
}
});
}
<div id="top">
METAR
<div>
<div>
--some html content --
</div>
<div id="metar-tag">
--some html content --
</div>
</div>
Go to top
--more content--
</div>
The dlg box is open with:
showFile("htmlfile.html");
This file is loaded ok in the dlg box but the link is not working.
Any suggestions is very much appreciated.
Cheers!
I got a main view like this,
<body>
<div id="view"></div>
</body>
The problem is if I inject an HTML content to this div it is not working, but when I copy paste the elements between the body tag its working.
I have included a jsfiddle of my script and partial : https://jsfiddle.net/whb65L5w/7/
It does some preprocessing of data to be populated on the body as well as the partial. But using jquerys load function the page is not working properly, can someone tell me why.
This is how i load the partial:
$( "#view" ).load( "views/sales.html" );
You can see that even though I selected items, it's not being checked
i am trying to display a loading image when the page is loading.Here is my code.
<body onunload="doHourglass();" onbeforeunload="doHourglass();" onload="setTimeout('show()',2000);">
<div id="divWait" style="display:none" >
<h1>wait...</h1>
</div>
<div id="main" style="display:none">
<asp:Button ID="btnHidden" runat="server" OnClick="code behind handler"
<div/>
<script>
function doHourglass()
{
console.log("inside dohour glass");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="0";
divwait.style.zIndex="1";
divwait.style.display='inline';
divmainpage.style.display='none';
setTimeout("show()",2000);
}
function show()
{
console.log("inside show");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="1";
divwait.style.zIndex="0";
divwait.style.display='none';
divmainpage.style.display='inline';
}
</script>
</body>
Problem is, it is not working when the page is loading for the first time.when i checked using console.log() i see for the first time control is not going inside doHourGlass() function.but for button click event it is working perfectly.
Things i tried:checked this link on SO, but i am not putting static html.I am trying to get the id of an html element and then working on that element so i can not use that solution.
Edit:one way i found is to keep divwait visible and hide main division then show main div when the page loads.but this way i can only display static html.i want to be able to call a function when page is loading for first time.
what is happening?is there a way to achieve it?please guide me.
using angularjs to load a jsp page content in div tag. within the jsp page some text and button there. It was successful completed. But it take some time to load the jsp page content within the div. Here i'm using some class to load a loader span. I want to disable the loader after jsp content load in that div.
index.html
<div ng-include="path"></div>
<div>
<span ng-show="loader" class="glyphicon glyphicon-refresh-animate"></span>
</div>
angular.js
$scope.path='https:/..../url.jsp?orderNo='+$scope.orderNo+'&amount='+$scope.amount;
I found the answer and forgot to post them
$rootScope.$on('$includeContentLoaded', function(event) {
$scope.loader = false;
});
I have this code
<div class="wrap-box-video" id="31">
<div class="addfav">
</div>
<img src="/etc.jpg" />
</div>
and with this code
$(document).ready(function(){
$("div.addfav").click(function(e){
window.location = "?wpfpaction=add&postid=" + $(this).parents(".wrap-box-video").attr("id");
});
});
i want to load the ?wpfpaction=add&postid=31 (in this exemple) but not to show in the url tab i want this to be underground. if i'm on exemple.com page and i click the addfav div i want the exemple.com to be the same but the script to work.
If you're talking about changing what text appears in the browser tab, you can alter the title element of the HTML rendered at you ?wpfaction endpoint.
If you want to change what the actual URL that appears in the URL bar, see Modify the URL without reloading the page