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?
Related
$("span.removeFromCart").on("click",function(){
var id = $(this).attr("data-id");
$.ajax({
type: "GET",
url: "ajax.php?id="+id+"&action=remove"
})
.done(function()
{
location.reload();
});
});
I have a shopping cart that has - and + next to the quantity of the cart item. it works & updates fine ONLY after location.reload(), as above.
I would like to try and update the content without using the location.reload(), as it causes my toggle cart to hide after reloading the page. Would it be easy to refresh this div or the content on the page without reloading the entire page ?
many thanks
This is possible, but it seems like you don't understand what it would entail.
In order to update the "toggle", you need to re-render (or re-create it) this can be accomplished with JavaScript templating (like handlebars or underscore template). Or you can refresh just the part of the page that needs updating. You might want to try out something called pjax.
https://github.com/Jrizzi1/pjaxphp
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 am working on an existing project and heavily using jQuery AJAX calls. Existing pages have three different sections header, left menu and main content. Implemented with Spring MVC it is updating whole page whenever view is returned from Spring controller.
Now since I am working with one of the menu item but having tab content I am using jQuery to manipulate data within tabs using jQuery. While doing so whenever I have to work with hyperlink I can't use <a> tag since return from link will replace whole page . So I am always limited to use onClick() even ton the link and do AJAX call then put response back in window using jQuery.
Details
<script>
$.ajax({
type: ...,
url: ...,
success: function(response) {
$('#tab1-content').empty().html(response);
}
});
</script>
So my question is - Is there any other way so that I can use href properties of <a> tag and update window with response view?
I am not sure if I understood you correctly. Could you try something like this:
Details
<script>
$('a').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
loadDetail(href);
});
function loadDetail(url) {
alert("Load from: " + url);
// Ajax call
}
</script>
Fiddle
You can prevent default behaviour of tag just return false from your function.
See this fiddle http://jsfiddle.net/s8mpwokt/
Or just like in Michael answer attach event from javascript so you'll get event instance in your callback function with preventDefault() and stopPropagation().
Currently I am facing a problem with Jquery ajax call. The Ajax call in my jsp takes more time to load data where as javascript form submit takes less time.
Using javascript form submit i am unable to load the content form result in another tab.
Could any one help me on this
Javascript Function
function getCircuitMaintenanceDetails(event,refno)
{
var eve = event;
var ref_no = refno;
var url = "circuitMaintenanceDetails.do?EVENT_KEY="+eve+"&REF_NO="+ref_no;
document.getElementById('sessReferenceId').value=refno;
$.ajax({
type:'post',
cache:false,
url:url,
beforeSend: function ( xhr ) {
$('#content02').html('<div class="loading"><center><img src="../images/ajax-loader.gif" alt="Loading..." /><center></div>');
},
success:function(data){
window.scrollTo(0,0);
$('#content02').html(data);
}
});
}
Above javascript function loads data in another tab using ajax call. It takes more time
The jsp code has been placed in http://jsfiddle.net/mJ8m3/
I am using IE8 and Jquery 1.7.1 in my jsp file. Any one guide me how to improve the performance of Ajax call or could guide me how to load data in second tab ie (content02) tab using javascript function.
If I use document.forms[0].submit is loading the content in the same tab instead of tab2.
After Submitting the form in javascript I am unable to load the content in another tab defined using div tag
Any one can help me in this problem. Really need a solution for this. Help me to increase the speed
You can use jquery's load() method.
I am using jQuery to make a website, and I want to be able to have my navigation in a separate div from my content. Also, I want to be able to have a sort of tabbed navigation system such that I can click a link in the navigation and it will load the content into the main content div. Basically, I want to do this so that I can just maintain one page with all the content, rather than a bunch of pages for each section. I have included a picture that will hopefully make my question much more clear (right click and "viw image", it's too small on this page):
example http://img402.imageshack.us/img402/1733/examplew.jpg
$('#navlink').click(function() {
$("#maindiv").load("/url.html");
return false;
});
I would encourage you to use event delegation. For instance we can use the .on method to attach a single event to the navigation pane that will listen for clicks on links:
$("#navigation").on("click", "a", function(e){
e.preventDefault();
$("#content").load( $(this).prop("href") );
});
Which works with the following markup:
<div id="navigation">
Home
Gallery
</div>
<div id="content"><!-- content will load here --></div>
Considering that you want one page with all of the content, you could simple hide all but one main div with css, and then use javascript/jQuery to show one div when a tab is clicked, and hide all of the other (main divs).
Have your navigation links change the html of your center div
<a href="#" onclick="$('#centerDiv').html('your content');">Click me<a>
if you want it to be more dynamic use ajax to load it.
and if you want to get a bit more fancy try out the Tab widget
This calls for the jQuery load() function! Go to http://remysharp.com/jquery-api/ and search for 'load' -- you just need to target the div.
By the way, this is sort of an alternative to frames or server-side includes. The only bad thing about this approach is that Search Engines won't be able to follow your links.
Using ajax with jQuery its pretty simple and totally controllable:
$('#navlink').click(function() {
$.ajax({
type: "GET",
url: 'URL_OF_THE_RESOURCE',
//(maybe you can hold this in the href attr of the anchor tag)
//in that case you can use $(this).attr('href');
dataType: "text/html", //spectating HTML back from the server
timeout: 8000, //Wait 8 second for the response
error: function() {
alert('ERROR');//case of server error or timeout give a feedback to the user
}, //end error
success: function(html) {
$('#mainDiv').html(html); //Replace the content with the new HTML
} //end succes
}); //end ajax
return false;
}); //end click
Instead of usign an ID, you could use a dummy class (like "navlink") on all those navlinks, so instead of referencing the selector to the ID, reference it to the class like:
$('.navlink').click(function(){
...
and the url parameter will be:
url: $(this).attr('href'),
That way you just set this once and all the links will get the functionality and still give support to users that don't have JS active.