Jquery load url underground - javascript

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

Related

display a link from another php page without page reload

So basically I have a link as a div in page 1.
<a href="/computing/abc/page2.php" class="topic-list-item">
<h3 class="topic-title">Internet Protocol Basics</h3>
<div class="topic-description-text">
Learn how Internet Protocol is used
</div>
</a>
When I click on the div it opens the page 2 by reloading the page.
I want the new content of page 2 to appear without any reloading while at the same time this changes my URL.
Is this possible?
HTML:
Disable your <a> tag because you will send an ajax request instead of loading a new page
<a href="#" data-url="/computing/abc/page2.php" class="topic-list-item">
<h3 class="topic-title">Internet Protocol Basics</h3>
<div class="topic-description-text">
Learn how Internet Protocol is used
</div>
</a>
JS (jQuery):
Bind the click event to execute your ajax call, then set the HTML your server send back where you want it to be.
$("a").click(function(){
$.ajax({
url: $(this).data("url"),
method: 'get',
success: function(data){
$("#targetContainer").html(data);
}
})
});
The success function's argument will be what your server send back, the /computing/abc/page2.php page. You can set it where you need it to be on your page (here inside $("#targetContainer") ).
See Modify the URL without reloading the page for the url modification without reload

Asp.net:show loading image before page loads for the first time

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.

How to load div only on click and not when page loads?

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>

Loader visible while upto ng-include completed

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;
});

how to show/hide the single element when coming from different pages?

I have 2 pages name "A" & "B", both pages have a link which will open the same page "X".
But page "X" will show/hide some components as per from which page its coming.
On page "X", I want to show/hide my buttons on page named "X".
If I come from "Page A" > they should be visible.
And If I come from "Page B" > they should not be visible.
==========================================
I am taking approach for doing this is by passing variable/value in URL on page A and B.
HTML code page A:-
<a data-fancybox-type="iframe" class="various marginLeft10 button" href="/Provision/Summary/MC-IT0401-ATUTEJA?abc">View Summary</a>
HTML code page B:-
<a class="marginLeft50 button" href="/Provision/Summary/MC-IT0401-ATUTEJA?xyz">Confirm & Proceed</a>
Page X Code=
<div class="marginTop50 marginBottom valignBottom" role="button" id="summaryButtons">
<input type="button" class="active" value="Back" id="stepSummaryBack">
<input type="button" class="bigButton marginLeft50" value="Ready for Diagnostic" id="stepSummaryConfirm">
</div>
This Particular Div should show/hide as per navigation from page "A" or "B".
I am not sure now how to confirm the URL along with the variables (?abc and ?xyz) I am passing in the "href" using jquery.
Please suggest.
And let me know if anything is not clear or need more details.
So in the onload event could you just do.
var URL = window.document.URL.toString();
var vars = URL.split("?");
then your variable should be vars[1];
I would suggest handling the show/hide decision while rendering Page X, not with javascript once it has already loaded. You don't need to use query params in your url (?abc and ?xyz). Access the HTTP_REFERER from the Page X request in your controller to see whether the request came from /page_a or /page_b, then use that information while rendering Page X to determine whether or not to include the buttons.

Categories