I am using jQuery to send the data to the server by the post method. The function is activated on click on the span tags inside the html page. Posted data set a php session variable and after that the page needs to be reloaded. Everything is working fine in Chrome, but in IE9, I have to click several times to see the effect. If I put an alert inside the function, it works fine (but I do not want that alert).
I am not an experienced user of jQuery.
Here is the code of the jQuery
$(document).ready(function(){
$("#ciril").click(function(){
$.post('myphpfile.php', { 'lang' : 'cir'});
location.reload();
});
$("#latin").click(function(){
$.post('myphpfile.php', { 'lang' : 'lat'});
location.reload();
});
});
and here are the span tags
<span id="latin">Text1</span>
<span id="ciril">Text2</span>
You do NOT want to do a location reload when you use Ajax since it sort of negates the point of using Ajax in the first place.
If you insist on doing it anyway, you need to reload in the callback
$(function(){
$("#ciril").on("click",function(){
$.post('myphpfile.php', { 'lang' : 'cir'}, function() {
location.reload();
});
$("#latin").on("click",function(){
$.post('myphpfile.php', { 'lang' : 'lat'}, function() {
location.reload();
});
});
If the page you are loading is the same page you are on, simply submit a form and have the server return the page to you
Here is a neater way
<span class="lang" id="lat">Text1</span>
<span class="lang" id="cir">Text2</span>
Using
$(function(){
$(".lang").on("click",function(){
$.post('myphpfile.php', { 'lang' : this.id }, function() {
location.reload();
});
});
Related
Is it possible using jQuery to literally refresh a div?
Nothing like submitting a form or anything like that.
I have a data stream which is updated else where and all I want to do is refresh the div and all its contents as if it were a page refresh. I can't link to that page to make a return that populates as the only output is just raw data.
The div itself contains all the data display processing. Nothing needs to be fetched as the data is already there.
you have to use setinterval with ajax function,
$(document).ready(function(){
setInterval(function(){ refreshDiv(); }, someInterval);
});
function refreshDiv(){
$.ajax({
url: "http://yourrequestpath",
.....
});
}
<div id="data"></div>
<script>
$('#div').load("loaddata.php", function() {
window.setInterval("loadData", 60000);
});
function loadData()
{
$('#div').load("loaddata.php");
}
</script>
I have an index.html page which, using jquery, calls somepage.php residing within the same site to load the contents of this index.html page.
So this is the intended page load sequence:
index.html -> somepage.php -> submit.php (if submit button is clicked)
The index.html has only the "main-div" and no contents as such. When the somepage.php is called, the "main-div" contents are loaded by running the php script. The main-div contains a sub div with a small form with a submit button. Using jQuery,I see if the submit button is clicked, and when clicked, the submit.php script is called.
This is the barebone code:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script>
$('document').ready(function(){
$("#main-div").load("http://www.someurl.com/somepage.php");
$('#item-submit').click(function(){
jsURL = $('#input').val();
submit(jsURL);
});
function submit(jsURL){
$.get(
'http://www.someurl.com/submit.php',
{ item: jsURL },
function(data){
if(data=="success")
{
$('#submit-status').html(data);
}
else
{
$('#submit-status').html(data);
}
}
);
}
});
</script>
</head>
<body>
<div id="main-div"> </div>
</body>
</html>
Now the issue:
The index.html page loads with everything displayed correctly (the small form with the submit button, all other main-div contents, everything is displayed). However, the submit button does not call the submit.php script, meaning I believe that the jQuery code corresponding to the click event is not being registered.
I am fairly new to jQuery. Does this have something to do with how I have "ordered" the code in the jQuery .ready()? Something to do with the DOM not being ready before the function is called, or maybe an issue with the .load() in jQuery?
Try this :
<script>
$(document).ready(function(){
$("#main-div").load("http://www.someurl.com/somepage.php",function(){
$("#main-div").on('click', '#item-submit', function(e){
e.preventDefault();
var jsURL = $('#input').attr('value');
submit(jsURL);
});
});
});
function submit(jsURL){
$.ajax({
url:'http://www.someurl.com/submit.php',
type :'GET',
success: function(data){
$('#submit-status').html(data);
}
});
}
</script>
$(document).ready(function(){
$("#main-div").load("http://www.someurl.com/somepage.php");
$("#main-div").on('click', '#item-submit', function(e){
e.preventDefault();
var jsURL = $('#input').val();
submit(jsURL);
});
function submit(jsURL){
$.get('http://www.someurl.com/submit.php', {item: jsURL}, function(data){
$('#submit-status').html(data);
});
}
});
Do not quote the document
load() is a shortcut for $.ajax, and it's async, so #item-submit does'nt exist when you attach the event handler, you need a delegated event handler for that.
If it's really a submit button inside a form, make you sure you prevent the default action so the form does'nt get submitted.
The load function works asynchronously. With your code #item-submit is not yet there when you try to bind the event handler.
Bind the event handler on succes:
$("#main-div").load("http://www.someurl.com/somepage.php", function () {
$('#item-submit').click(function () {
jsURL = $('#input').val();
submit(jsURL);
});
});
load loads the data asynchronously, which means time by the time you are assigning a click handler on submit button the button itself might not be yet on the page. To overcome this you have two options:
Specify a success handler for load.
$("#main-div").load("http://www.someurl.com/somepage.php", function(){
$('#item-submit').click(function(){
jsURL = $('#input').val();
submit(jsURL);
});
});
Use on to indicate that the click handler should be assigned to elements that are or will be on the page.
$('#item-submit').on('click', function(){
jsURL = $('#input').val();
submit(jsURL);
});
As all pointed out, the load function works asynchronously so, your click handler is not working for the 'future' div.
You can bind handler to a future element like this:
$(document).on('click', '#item-submit', function(event){
jsURL = $('#input').val();
submit(jsURL);
});
This way you can bind your handler in the jQuery document ready function.
I am using Malsup's AJax form plugin.
What I have going is a "chat" page, basically a div that is being refreshed every 2 seconds, and refresh when the user submits something to the chat window.
Rough HTML layout of page:
<div id='refresh_openmsg'>
<div id='chatdiv'>Chat window here</div>
</div>
<div id='reply_block'>
<form id='send_msg_form'>Basic form goes here</form>
</div>
JS:
//create timer to refresh chat window every 2 seconds
<script type='text/javascript'>
$(document).ready(function() {
refresh_openmsg = setInterval(function (){$('#refresh_openmsg').load('messaging.php?view='+the_page+' #refresh_openmsg');}, 2000);
});
</script>
//This is what happens when the form is submitted
<script type='text/javascript'>
$(document).ready(function() {
var options = {
target: '',
dataType: 'html',
beforeSubmit: showRequest_sendmsg,
success: showResponse_sendmsg
};
$('#send_msg_form').live('submit', function() {
$(this).ajaxSubmit(options);
return false;
});
});
function showRequest_sendmsg(formData, jqForm, options) {
return true;
}
function showResponse_sendmsg(responseText, statusText, xhr, $form) {
$("#reply_block").load('messaging.php?view='+the_page+' #reply_block', function() {
$('#reply_area').focus();
$("#refresh_openmsg").load('messaging.php?view='+the_page+' #refresh_openmsg', function() {
$("html, body").animate({ scrollTop: $(document).height() }, 500);
});
}).focus();
}
</script>
//on showResponse, I'm reloading the #reply_block div, and reloading the #refresh_openmsg div (#refresh_openmsg div is also being reloaded every 2 seconds)
The issue I'm running into is that the form is being submitted multiple times, sometimes twice, sometimes 3 times, and sometimes 4 or 5. Very strange, i've built similar pages before and have never ran into this issue. I know it's something with my code, and the never ending refreshes, but that's my only option at the moment. Anyone see a problem with this?
I've tried putting .die() before the .live event when submitting the form but that did not fix the issue.
You are reloading reply block div which is causing this piece to be triggered, hence after every load one more listener is getting added
$('#send_msg_form').live('submit', function() {
$(this).ajaxSubmit(options);
return false;
});
you can try using like this:
$('#send_msg_form').live('submit', replyBlockDivLoaderHandler);
function replyBlockDivLoaderHandler(event){
if(event.handled != true){
$(this).ajaxSubmit(options);
event.handled = true;
}
}
I am working with AJAX with prototype and PHP. It is working for me but I need some small changes. Following is my running code for AJAX request:
JS/Prototype:
function ajaxRequest(url) {
new Ajax.Request( url, {
method: 'get',
onSuccess: function( transport ) {
// get json response
var json = transport.responseText.evalJSON( true );
alert(json);
},
onFailure: function() {
alert('Error with AJAX request.');
}
});
return false;
}
HTML:
<a href='javascript:ajaxRequest("/testajax/ajaxresponse");'>Testing AJAX</a>
Question:
Now I want to change my link like this:
<a href='/testajax/ajaxresponse' class='AjaxLink'>Testing AJAX</a>
So prototype function should capture click event of class='AjaxLink' links and then get href part of clicked link and proceed. How can I change my above prototype function for such kind of links.
Thanks
If you have Prototype 1.7 then this way is available:
document.on('click', 'a.AjaxLink', ajaxRequest.curry('/testajax/ajaxresponse'));
Otherwise you'll have to rely on good old Event.observe:
$$('a.AjaxLink').invoke('observe', 'click',
ajaxRequest.curry('/testajax/ajaxresponse'));
Just re-read the question and I see you want to use the href attribute. Jan Pfiefer was very close.
document.on('click', 'a.AjaxLink', function(event, element) {
return ajaxRequest(element.href);
});
This wont work. Why do you want such a link? If a link is specified in this way any click on it will follow its href and change location of actual document. Only way to prevent such a behavior then is by adding onclick again or in $(document).ready bind onclick handler, and manualy cancel the event.
UPDATE
However to bind onclick event on all links with AjaxLink class,execute request and cancel the event:
$(document).ready(function(){
$('.AjaxLink').click(
function(e){
ajaxRequest(this.href);
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
);
});
This will work:
$$('a.AjaxLink').each(function(element) {
element.observe('click', function(e) {
var element = e.element()
Event.stop(e)
alert(element.href)
});
})
I have a page that generates a google map on page load that I would like to call from another page via a link. Here is how I'm creating the google map inside a colorbox:
// show_map.php
jQuery(document).ready(function(){
$.colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
Here is my attempt but something tells me I've headed down the wrong path. Should I use the modal window for something like this or is there a better way?
$(document).ready(function() {
$('.show_map').click(function() {
$.get("show_map.php", function(data) {
// alert(data);
})
});
If I've understood correctly, colorbox is already designed to do what you want to do. You don't need to use extra ajax calls (it's already built in). Just set the href option to your page instead of your inline html (then of course remove the inline:true option). The full code (in the page with the link to your map):
$(document).ready(function() {
$('.show_map').click(function() {
$.colorbox({
href: "show_map.php",
width:"643px",
height:"653px"
});
})
});
You can also load any external page if you add the iframe: true option to that code.
Either you use jQuery's .getScript() if the page only contains JavaScript or you can use .load() to insert the page content into the DOM.
$(document).ready(function() {
$('.show_map').click(function() {
$('.some-element').load("show_map.php");
})
});
EDIT: a better approach
have the colorbox inline instead. Saves a round trip to the server.
$(document).ready(function() {
$('.show_map').colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});