This piece of code (with another php file) grabs some content from a database and pus it into a div called about_content.
$(document).ready(function(){
$('a#about-menu').click(function() {
var id = $('a#about-menu').attr('class');
$.post('subpages/content_about/about_content.php',{id: id}, function(id){
$('div#about_content').text(id)
});
});
});
Everything works, but can you tell me how I can modify this so the stuff fades in, instead of just being smacked right in... I'm not sure how to use the fadeIn function in this scenario..
Try..
$('div#about_content').css('opacity', '0').text(id).fadeIn();
you can do
$('div#about_content').hide();
$('div#about_content').html(id);
$('div#about_content').fadeIn(1000);
didnt test it, so im not sure you could try
This fades out the existing content then replaces the content and fade it in!
$(document).ready(function(){
$('a#about-menu').click(function() {
var id = $('a#about-menu').attr('class');
$.post('subpages/content_about/about_content.php',{id: id}, function(id){
$('div#about_content').fadeOut('fast',function(){ $(this).html(id).fadeIn(); });
});
});
});
DEMO
Related
I have very limited knowledge with scripts so I hope you guys can help me with a simple solution to a small problem that I have...
I'm using the following jquery function to refresh a div with new content when a link is clicked
<script>
$(function() {
$("#myButton").click(function() {
$("#loaddiv").fadeOut('slow').load("reload.php").fadeIn("slow");
});
});
</script>
My problem is, I need to send 2 variables to the reload.php page to use in a mysql query (I have no idea how to accomplish that), also I need to make multiple links work with this function, at the moment I have multiples links with the same id and only the first link works so I guess I must associate different ids to the function in order for this to work, how can I do that?
here's the page where i'm using this: http://www.emulegion.info/teste/games/game.php
You may want to use document ready instead of function on your first line as this will make sure the code is not executed until the full page (and all elements) have loaded.
You can then use the callback functions of the fade and load to perform actions in a timely manner.
additional variables you can add after the .php, these can then be read in your reload.php file as $var1 = $_GET['var1'];
Do make sure to sanitize these though for security.
<script type="text/javascript">
// execute when document is ready
$(document).ready(function() {
// add click handler to your button
$("#myButton").click(function() {
// fade div out
$("#loaddiv").fadeOut('slow',function(){
// load new content
$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){
// content has finished loading, fade div in.
$("#loaddiv").fadeIn('slow');
}); // end load content
}); // end fade div out
}); // end add click to button
}); // end document ready
</script>
For different variables you could add a HTML5 style variable to your button.
<input type="button" id="myButton" data-var1="foo" data-var2="bar" />
You can retrieve this when the button is clicked:
// add click handler to your button
$("#myButton").click(function() {
// get vars to use
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
...
load("reload.php?var1="+var1+"&var2="+var2
if you have multiple buttons/links I would use class instead of id "myButton". that way you can apply the function to all buttons with the above script. Just replace "#myButton" for ".myButton"
First, you should use .on('click', function() or .live('click', function() to resolve your one click issue.
You'll want to do something like:
<script>
$(function() {
$("#myButton").on('click', function() {
var a = 'somthing';
var b = 'something_else';
$.post('url.php', {param1: a, param2: b}, function(data) {
//data = url.php response
if(data != '') {
$("#loaddiv").fadeOut('slow').html(data).fadeIn("slow");
}
});
});
});
</script>
Then you can just put var_dump($_POST); in url.php to find out what data is being sent.
Try creating a function that would accept parameters that you want.
Like:
$(document).ready(function(){
$('.link').click(function(){
reload(p1,p2);
});
});
function reload(param1, param2){
$("#loaddiv").fadeOut('slow').load("reload.php?param1="+param1+"¶m2="+param2).fadeIn("slow");
}
But by doing the above code your reload.php should be using $GET. Also you need to use class names for your links instead of id.
<script type="text/javascript">
// execute when document is ready
**$(document).ready(function() {**
**$("#myButton").click(function() {**
**$("#loaddiv").fadeOut('slow',function(){**
**$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){**
// content has finished loading, fade div in.
$("#loaddiv").fadeIn('slow');
});
});
});
});
</script>
$("#myButton").click(function() {
// get vars to use
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
So i've a situation where I have a selectbox that makes a jquery .post call to another script on a .change event.
I was wondering if there is anyway i can revert the selectedoption back to the original default should something occurs or that my .post event fail?
Hi ppl, I'm sorry.
Here's the javascript code. I've made some amendments to it. I'm trying to get the second line to work as this code is not working now due to some errors(due to don't know what on the second line). My selectbox is part of a list so i'm not able to make it a unique id to it and to remember the box the user selects, i need to use $(this).
$('.order_stateselect').click(function(){
var val=$(this).find(":selected").val();
$(this).change(function(){
if(confirm('Confirm Order Status Change?')){
var conduct_status_chge=$.post('/seller/helpers/order_status_change.php',{order_item_id:$(this).parent('td').siblings('.order_item_id').text(),order_item_status:$(this).find(':selected').val()},function(data){
alert(data);
})
.error(function() { alert("error"); })
}
});
});
Difficult to tell without code, but I'll try
$("#selectbox").data('origValue', $("#selectbox").val());
$("#selectbox").on('change', function () {
$.post(...).done(function () {
// other stuff
$("#selectbox").data('origValue', $("#selectbox").val());
}).fail(function () {
$("#selectbox").val($("#selectbox").data('origValue'));
});
});
Use something like this
var value=$("#selectbox").val();
$.ajax({
type:post,
url:"something.com",
success:function(){
},error:function(){
$("#selectbox").val(value);
}
})
$('select').val('defaultvalhere');
You could use this to select first option not regarding default value:
$('#selectId option:eq(0)').attr('selected',true);
you can simply use a global variable to save the option selected previously. Once save you can just use that on your error Its something like this
<script type="text/javascript">
this.previousVal = 0;
function changeHandler(selectBox)
{
$.ajax({
type:post,
url:"URL",
success:function(){
//ur code
this.previousVal=selectBox.selectedIndex;
},error:function(){
//use previousVal and set the value back to the previous value
}
})
}
</script>
<select id="changeLang" name="changeLang" onchange="changeHandler(this)"></select>
I have got site with dynamic refreshing divs.
Source:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('boo.php').fadeIn("slow");
$('#loaddiv2').fadeOut('slow').load('boo2.php').fadeIn("slow");
}, 1000);
</script>
But I want fadeout and fadein only if boo.php return different(updated) value than actuall div. How compare new and actuall value and do this?
P.s Sorry for bad English but I'm Polish
You'll need to write a callback function that inspects the returned data and compares it to what's stored within the div already. Additionally, the functions that show/reveal the div will probably need to be moved to the callback function as well.
Documentation is available here.
You'd have to write an Ajax function to boo.php and compare the result with the div's value
$.ajax(
{
url: "boo.php",
success: function(result)
{
if($("#loaddiv").html() != result)
{
$("#loaddiv").fadeOut("slow")
$("#loaddiv").html(result);
$("#loaddiv").fadeIn("slow");
}
}
});
You need to check the result you are getting from the ajax call and compare it with the current content. Assuming you have an element with ID MsgCount in your Ajax response and current Div Markup and you are using the value of that to compare, the below code will work
$(function() {
var auto_refresh = setInterval(function(){
var currentMsgCount= $('#MsgCount').text();
$.get("boo.php",function(data){
var resultData=$(data);
var newMsgCount= resultData.filter('#MsgCount').text();
if(newMsgCount!=currentMsgCount)
{
//content is different. Let's show it
$('#loaddiv').fadeOut('slow',function(){
$('#loaddiv').html(data).fadeIn("slow");
});
}
});
}, 1000);
});
Hello I am having trouble regarding div reloading when a new record has been added. What I wanted to do is to show first a loading image then after a record has been inserted it will reload the div.
$("a.follow").click(function(event) {
event.preventDefault();
$("#flash").show();
$("#flash").fadeIn(300).html('<img src="ajax-loader-transp.gif" />Loading Result.');
$.ajax({
//url: $(this).attr("href"),
success: function(msg) {
$("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index');
}
});
return false;
});
That's what I got to far when I'm trying the code it refreshes a whole physical of page on the div & not the desired div itself. . .
Sorry guys I am poor with jQuery and BTW this is in CodeIgniter.
Your problem is, that codeigniter obviously returns a whole html page. You have two choices:
Either return only a fragment (I don't know how to do this in CI) or use jQuery to parse out the div you want. This can be done with the following code, assuming that the div you want is named <div id="results_div">...</div>
$("a.follow").click(function(event) {
event.preventDefault();
$("#flash").show();
$("#flash").fadeIn(300).html('<img src="ajax-loader-transp.gif" />Loading Result.');
$("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index #results_div', function(){ $('#flash').hide(); });
});
Can you include the HTML with the #results_div div?
This is my best guess without html to work with:
$("a.follow").click(function(event) {
event.preventDefault();
// show the linke
$("#flash").fadeIn(300).html('Loading Result.');
//ajax load the 'mini div' result -- i guessed that this url pulls back the div you want
$("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index', function(data, text, xhr){
$('#flash').fadeOut("fast");
});
});
I have code as follows:
$("#item_select").change(function()
{
var params = $("#item_select option:selected").val();
$.post('/account/ar_form.php', {idata: params}, function(data){
$("#message_display" ).html(data);
});
});
This is a dropdown that uses /account/ar_form.php to display html in the div correctly.
But it only displays on the change event. I'd like it to preload the data. When I use a load event, it will display the html, but on change, it displays it twice.
$("#item_select").change(function(){
var params = $("#item_select option:selected").val();
$.post('/account/ar_form.php', {idata: params}, function(data){
$("#message_display" ).html(data);
});
}).triggerHandler("change");
It depends a bit... what does your ar_form.php return with blank params?
You could do a hackish way (at fear of being downvoted) by calling
$("#item_select").change();