I was learning some about this html5 concept and i was trying to integrated in my project .
I have a page called chat_wnd.aspx wish is a chat page between two client programmed by Signalr, and a masterpage having a div like so :
<script type="text/javascript">
function OpenChatwnd() {
$("#ifrm").attr("src", "/chat_wnd.aspx");
}
</script>
Open chat wnd
<div id="dv_chat">
<iframe id="ifrm"></iframe>
</div>
Is there any way to use the push/pop state to prevent the iframe from reloading inside the div every time i navigate to another page in my website
PushState only changes URL and adds the URL into history without change content, so you should use ajax to change your content.
Note that if you want to use <a> to navigate another page, your javascript may like below:
$('a').click(function(e) {
e.preventDefault(); // prevent default action of navigating to another page
// ajax load data
$.ajax({
url: $(this).attr('href'),
type: "GET",
success: function(html){
$('#content').(html);
},
error:function(xhr, ajaxOptions, thrownError){
console.error(xhr.status);
console.error(thrownError);
}
});
// change the current URL
window.history.pushState('', document.title, $(this).attr('href'));
});
Also, here is a jQuery plugin PJAX provides the integration of AJAX and pushState, you can see there demo at here.
Related
I am working on building a website that will not reload to a new page every time a link is pressed. I want to make something kind of like all enterprise/popular websites. (When looking in the network dev tab: notice that youtube page doesn't completely reload when you click on a link, same with google, same with Facebook for the most part. They all usually just reload the page content and nothing else.)
I would like only the HTML between the body tags to be changed (nothing else: no js,css, no head tags, etc).
It would seem like it is pretty easy. Currently, I am just using ajax to go out and fetch the html of the page, and load that into the body. Done! Not so fast... Three things (my code is at the bottom)
The js includes are located at the bottom of the page, right before the closing body and html tags. When looking in the network tab, it shows that the same js is always gotten again and parsed again. How do I prevent that?
Some pages will not load styles that are set. (note that all css, js, etc. scripts are the same for every page)
I want to make sure that the page is completely reloaded if the user leaves the website.
I am not sure if I am looking for a fix to the way I am doing it, but probably just a completely better different way to do it.
Here is my code:
$('a').on('click', function () { //on click of any <a> tag
var where = $(this).attr('href'); //gets url of the <a> attribute
$.ajax({
type: "GET",
url: where, //where is the variable defined above
success: function(a) {
// load next page
history.pushState({urlPath: where},"",where); //changes the link of the webpage
$('body').html(a); //changes the body of the webpage
document.title = $('#title').text(); //changes the title using some weird irrelevant method
}
});
return false;
});
$(window).on('popstate', function() {//on click of the back or forward button
$.ajax({
type: "GET",
url: window.location.href, //the url is the url that the back or forward button is set to
success: function(data) {
//console.log();
$('body').html(data);//replaces data
document.title = $('#title').text();//changes title using weird irrelevant method
}
});
});
I have a template site which contents I want to change with data from an ajax call.
I have a button which opens an fancybox 3 iframe. The content of this page is what I want to change.
Button to open fancybox:
'<i class="fa fa-info-circle fa-2x inv-details" invoiceId="' + data[index].invoiceid + '"' +
'aria-hidden="true" data-fancybox data-type="iframe" data-type="iframe" href="javascript:;" data-src="/invoice_details/"</i>'
click event to trigger ajax call:
$('#my_in').on('click', 'i.inv_details', function () {
var inv_id = $(this).attr("invoiceId");
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'post',
dataType: 'json',
data: {
action: 'invoice_details_ajax',
inv_id: inv_id
},
done: function (data) {
//HERE I WANT TO FIND THE CONTENTS OF THE
//OPEN IFRAME AND CHANGE THEM, LIKE SUCH:
// $('.fancybox-iframe').contents().find("#test #bankgiro").text('test');
// This above works in console, if I load jquery first, it does not work here.
}
});
});
The jquery selector for the iframe is correct, since i can edit the page via the chrome console. So I think the problem is that it tries to change the page before it has loaded? Is there any solution for this?
All answers I've read assums you have an empty fancybox iframe page and simply append data to it. But in my case I already have an template site which contents i want to change. Links I have read:
How to show ajax response in fancybox iframe
Loading dynamic AJAX content into Fancybox
It is not clear from your description - you want to open iframed page inside fancybox and you want to make ajax request that changes contents of that page - at the same time? Would it not be more sensible to just load final page?
I think you just have to pass invoice id using url, like /invoice_details/?invoiceId=YOUR_ID and avoid messing with two requests.
If you've already tried document.ready and window.onload etc which I assume you have seems as you're using jQuery:
The way I tend to get around things like this is I but a setInterval() that fires every 0.5 seconds or whatever, checks if the needed info is there and if it is, does what it needs to and then turns itself off. Could work for you for needing to wait for page load?
Maybe is a strange title but all I want is to do so:
I have an arduino webserver and an webserver
My arduino server can receive data via url like
192.168.1.2?light=1 - light on
192.168.1.2?light=0 - light off
It is working just fine, but the problem is when I put that link anywhere on an website (in button or just normal links) the arduino server is opening in browser, is there possible to just load it using ajax, js or jquery or just simply using html?
Assuming you have a webpage with jQuery.
HTML
<a class="access-only" href="http://192.168.1.2?light=1">Turn on the light</a>
<a class="access-only" href="http://192.168.1.2?light=0">Turn off the light</a>
JS
$(document).ready(function() {
// Attach click handler to all "access-only" links.
$('a.access-only').click(function() {
// Once the link is clicked, access its URL with a GET request.
$.get($(this).attr('href'), function(response) {
// Do nothing here, the URL has been accessed.
});
// Return false to prevent the browser's default click action.
return false;
});
});
If want to use this link from a webpage then (requires jQuery):
$.get('http://192.168.1.2?light=1', function(response) {
console.log(response);
});
You can try this.
$(".yourAtag").click(function(e){
e.preventDefault();
$.ajax({url: this.href, success: function(result){
alert('success!');
}});
});
I'm using Jquery/Ajax to load html pages into a div on my website. I get links certain class to open up in the specified div. When doing this the address bar remains www.example.com. Due to the fact that I do have several pages that I will like to be able to share; so when people visit the links it will take them to the website but with the specific page loaded into the div container.
Here's a few lines of my code
$( document ).ready(function() {
$.ajax({
method: 'GET',
url: "pages/promo.html",
success: function(content)
{
$('#contentarea').html (content);
}
});
});
$('.menu_nav') .click (function () {
var href = $(this) .attr('href');
$('#contentarea').hide() .load(href).slideDown( 'very slow' )
return false;
});
Unless the other pages are on your domain, you cannot do this. If the other pages are, see this StackOverflow question: Updating address bar with new URL without hash or reloading the page.
Here's the deal: since you are loading a new page and you want the URL of the browser to point to that page, you should just give users a link. They know how to use the back button. (You could use the information in the linked answer to to change the URL to something like this: http://www.trillumonopoly.com/other-website.com.)
You can use the history object.
$('#contentarea').html(content);
history.pushState({url: "pages/promo.html"}, "", "pages/promo.html");
With the use of the state {url: "pages/promo.html"} you can load your page into your div when your users navigate back/forward.
$(window).on("popstate", function(e) {
if (e.originalEvent.state != null)
{
// AJAX load e.originalEvent.state.url
}
})
I am trying to create a webpage that will dynamically fill a div using AJAX. I have been able to simply update the div content with the following AJAX code:
$(document).ready(function(){
$("#projects-list a").click(function(e){
e.preventDefault();
var url = $(this).attr('href'); //get the link you want to load data from
$.ajax({
type: 'GET',
url: url,
success: function(data) {
$('#content').fadeOut(300, function() {
$('#content').html(data).delay(200).fadeIn(300);
});
}
});
});
});
However, I also am hoping to find a way to update the page URL or change the hash. So for instance, when a user is given the link to /projects.html they will be sent to a page of links, and then when a link is clicked the content is changed using AJAX and the url will change to /projects.html#first. This way then a user navigates to /projects.html#first they will see the content for the first project rather than the original list of projects to choose from.
I would recomend to use a library to handle URL and paths
http://github.com/flatiron/director
http://balupton.github.com/history.js/demo
if you want to use standard # then you can use via js, on a function call do :
window.location.hash = valueYouWantToSet, some ID mostly,
and then you can check on page load if there is a # in there then call a particular function like :
handleHash: function () { if (!isNaN(parseInt(window.location.hash.replace('#', '')))){ this.showDetails(window.location.hash.replace('#', '')); }