I have a jquery to show links in a div without reloading page:
jQuery Code:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
// Prevent default click action if javascript is enabled
event.preventDefault();
//load the content of the new page into the content of the current page
$("#content").load( $(this).attr("href") + " #content");
})
});
</script>
everything is fine and working, but this is so simple! how i can add a loading image before content loading in this code?
and second question, is there any way to show a new page link in address bar after loading?
You can use the call back function to remove the loader.
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
// Prevent default click action if javascript is enabled
event.preventDefault();
//load the content of the new page into the content of the current page
$('#loader').show(); // Show some hidden loader on the page
$("#content").load( $(this).attr("href") + " #content", function() {
$('#loader').hide(); // Hide the loader when it completely loads the given URL.
});
})
});
</script>
For your second question this should be the answer. Change the URL in the browser without loading the new page using JavaScript
Related
Trying to load contents from an element into another element from another page, problem is in chrome it loads the entire page in to the element. See for yourself here: http://www.monsterhighshop.co.uk/gadgets-electonics
$(function(){
e.preventDefault();
/*
if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
$("a[rel='sort']").click(function(e){
pageurl = $(this).attr('href')+"?rel=sort #categoryproducts-productlisting";
$('#categoryproducts-productlisting').load(pageurl);
//to change the browser URL to 'pageurl'
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
return false;
});
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=sort',success: function(data){
$('#categoryproducts-productlisting').html(data);
}});
});
I am trying to create ajax pagination on Blog Page..
What I need to do is to display 5 posts initially and then load 5 more when "load more posts" link is clicked.
Below is the javascript I am using:
<script>
jQuery(document).ready(function() {
// ajax pagination
jQuery('.nextPage a').live('click', function() {
// if not using wp_pagination, change this to correct ID
var link = jQuery(this).attr('href');
// #main is the ID of the outer div wrapping your posts
jQuery('.blogPostsWrapper').html('<div><h2>Loading...</h2></div>');
// #entries is the ID of the inner div wrapping your posts
jQuery('.blogPostsWrapper').load(link+' .post')
});
}); // end ready function
</script>
The problem is that when I click the link the old posts get replaced by the new ones, I need to show old posts as well as the new posts...
Here is the Updated jQuery Code which enables the ajax pagination.
jQuery(document).ready(function(){
jQuery('.nextPage a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('.blogPostsWrapper').html('Loading...');
jQuery('.blogPostsWrapper').load(link+' .post');
});
});
The only problem now is the old posts get removed, i need to keep both old and new posts..
Here is the final code I used and now everything works perfectly...
// Ajax Pagination
jQuery(document).ready(function($){
$('.nextPage a').live('click', function(e) {
e.preventDefault();
$('.blogPostsWrapper').append("<div class=\"loader\"> </div>");
var link = jQuery(this).attr('href');
var $content = '.blogPostsWrapper';
var $nav_wrap = '.blogPaging';
var $anchor = '.blogPaging .nextPage a';
var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts
$.get(link+'', function(data){
var $timestamp = new Date().getTime();
var $new_content = $($content, data).wrapInner('').html(); // Grab just the content
$('.blogPostsWrapper .loader').remove();
$next_href = $($anchor, data).attr('href'); // Get the new href
$($nav_wrap).before($new_content); // Append the new content
$('#rtz-' + $timestamp).hide().fadeIn('slow'); // Animate load
$('.netxPage a').attr('href', $next_href); // Change the next URL
$('.blogPostsWrapper .blogPaging:last').remove(); // Remove the original navigation
});
});
}); // end ready function
Could you maybe try the following code? This is how I got this working on my own site.
replace:
jQuery('.blogPostsWrapper').load(link+' .post')
with:
$.get(link+' .post', function(data){
$('.blogPostsWrapper').append(data);
});
You should use jQuery append() to add the new posts without using the old ones.
jQuery load() Will replace the data found in your element . Quoted from jQuery API:
.load() sets the HTML contents of the matched element to the returned
data. This means that most uses of the method can be quite simple:
I am using validation engine from http://www.position-absolute.com/ site.
The validation is applied on the div tag which is opened as popup on parent page.
Issue : when error message is shown on a control, it is appearing behind the div.
Search to similar issue suggest the usages of z-index, but how to control the z-index of error message poping from validation engine? Giving high number to div z-index:99999 did not work.
Please help
just change your script as
<script type="text/javascript">
$(function () {
$(".primary").click(function () {
$(".formError").remove();
});
$(".close").click(function () {
$(".formError").remove();
});
$("#yourformid").submit(function (ev) {
ev.preventDefault();
var validForm = $("#yourformid").validationEngine('validate');
$(".formError").css("z-index", 15000);
if (validForm) {
$("#yourformid").submit();
}
});
});
</script>
it works fine
I have an image that is in my apex application with the id tag of submit_button. I want to display an alert when the user tries to click this image but for some reason nothing is happening. In my header on the page I have this code
<script type="text/javascript">
$(document).ready(function() {
$('#submit_button').click(function) {
alert('hi');
}
});
</script>
Any ideas?
I don't know why that doesn't work (it doesn't work for me either, I just tried), but it is very simple to do via a dynamic action with the following properties:
Event = click
Selection Type = DOM Object
DOM Object = submit_button
"True" Action = Execute Javascript Code
Fire on page load = (unchecked)
Code = alert('hi');
How can i catch the "onblur" event of my htmlbox textarea?
I want to be able to get the htmlbox content when it's onblur..
Thank's In Advance.
Try this code, it loops waiting 1 second until htmlbox creates the iframe, then it adds a .blur handler to the iframe, I found out the iframe's id by using IE8's Developer Tools, by clicking on the arrow icon in the developer tools and clicking the box you can see how HTML looks after the page loads and javascript processed. if($("iframe").length) is true then then htmlbox has created the iframe and you can attach the .blur event handler.
<script type="text/javascript">
$(function(){
var check = function(){
if($("iframe").length){
$("#hb_html").blur(function(){
alert('Blur has occurred!');
});
} else {
setTimeout(check, 1000)
}
}
setTimeout(check, 1000)
});
</script>
This example demonstrates:
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bar").blur(function(){
$(this).text("I have been blurred.");
});
});
</script>
<textarea id='bar'>foo</textarea>
Make sure the file jquery-1.5.min.js is in the same folder IF you use the example above.
You can read up on the .blur event at http://api.jquery.com/blur/
It receives a function as an argument and executes it when it becomes blurred.