Here is the jQuery code which works on Firefox and IE but not on Chrome.
I placed the alert() to debug and it doesnt works on chrome or safari. Any ideas?
The bxslider jquery works but not the $(".locationoption").click(function() .
Here is the code :
$(document).ready(function(){
$(".locationoption").click(function() {
var datastring = "location="+$("#locationselection").val()+"&language="+"<?php echo $language; ?>";
alert(datastring);
$.ajax({
type: "POST",
url: "includes/ajaxlocationsearch.php",
data: datastring,
cache: true,
success: function (data) {
$("#hotelselection").html(data);
}
});
});
$('#leftsidebarbanners').bxSlider({
controls:true,
nextText:" Next →",
prevText:"← Previous |",
});
});
I guess you should not use the clicking on an "option" element because it is not really a DOM element I guess. It's completely drawn by the browser and as you noticed it can act different depending on the browser.
But use the change event of the select: "#locationselection". And maybe use the following syntax to fill the data:
$("#locationselection").change(function() {
$.ajax({
type: "POST",
url: "includes/ajaxlocationsearch.php",
data: {
location: $(this).val(),
language: "<?php echo $language; ?>"
},
cache: true,
success: function (data) {
$("#hotelselection").html(data);
}
});
});
You can try using the JQuery Delegate.
Link to JQuery documentation
Had a problem with dynamicly loaded content on my site aswell and delegate worked perfectly for me.
$("id of class of outer element").delegate( "id/class/element of content that is to be clicked", "click", function() {
//do your stuff
);
Related
I'm trying to understand why sometimes my code works and sometimes not.
First, I have this function that open or close a tchat finder:
$(function(){
$(document).on("click", "a.tchat_open", function(){
var uid_target = $(this).attr("rel");
load_tchat('open', uid_target);
});
$(document).on("click", "a.tchat_close", function(){
var uid_target = $(this).attr("rel");
load_tchat('close', uid_target);
});
});
But when I put this function above the previous code, the previous code doesn't work:
function load_wall() {
$("#display_wall").html("Loading...");
$.ajax({
url:"/scripts/ajax/load_wall.php",
type: "POST",
dataType: "json",
success: function(data){
console.log(data);
$("#display_wall").html(data.content);
},
error: function(resultat, statut, erreur){
console.log(resultat);
console.log(erreur);
}
});
}
I can understand why, and when I pass an argument to my function, sometimes it works, sometimes not... I think I didn't understand something with jQuery.
Then, I have a problem on my dynamic content which should be display in this div after clicking on my link .tchat_open. The JSON message is shown:
But nothing happened in my div. It works on Chrome browser, but not on Safari... What difference is there?
Here is my load_tchat() function:
function load_tchat(method_call, uid_target) {
$.ajax({
url:"/scripts/ajax/load_tchat.php",
type: "POST",
data: "method_call="+method_call+"&tchat_status=close&uid_target="+uid_target,
dataType: "json",
success: function(data){
console.log(data);
if(data.tchat_operation == 'open') {
$("#frameChat").html(data.tchat_content);
// open tchat --- this doesn't make appear my finder
frameChat.classList.remove("Espace-Chat-Ferme");
frameChat.classList.add("Espace-Chat");
}
},
error: function(resultat, statut, erreur){
console.log(resultat);
console.log(erreur);
}
});
}
Thanks a lot!
I have a problem with an animation (fadeIn). It doesn't work after ajax. There is just NO ANIMATION but the content appears.
My code is like:
function ajax(varia) {
return $.ajax({
dataType: "html",
async: false,
type: 'POST',
url: 'index.php?fn=' + varia,
data: { token: "mytoken" }
});
}
Function with ajax works fine...
ajax("login").done(function (data) {
$("body").prepend(data);
}).done(function () {
// The #login have atribute style="display: none;"
$("#login").fadeIn(500);
});
This problem can be resolved with using delay before the fade, but i think it should be fine without this. Why it's not?
Thats probably because JavaScript is an asynchroneus language. What you are experiening is a synchronization issue:
Your ajax is done, you are firing DOM manipulation (prepend()), and imidiately after you fire it you do the fadeIn() but the fadeIn is complete before your data is prepended, so probably you'are calling fadeIn() on an element that doesn't exist yet.
Try this:
ajax("login").done(function (data) {
$("body").prepend(data);
setTimeout(function(){
$("#login").fadeIn(500);
},0);
});
And read this to understand why using timeout 0 is sometimes helpful: Why is setTimeout(fn, 0) sometimes useful?
By wrapping your action with setTimeout function you are basically telling: "wait until everything is done before doing this".
Here's the fiddle: jsFiddle
Did you try to put both calls into the same .done()-Block?
I think this should work:
ajax("login", "html").done(function (data) {
$("body").prepend(data);
// The #login have atribute style="display: none;"
$("#login").fadeIn(500);
});
In this case it should be guaranteed that the two lines of code are executed
successively.
I've made an live example here: http://jsfiddle.net/xLo93d29/
For me it works.
You should use "success" instead of "done":
function ajax(varia) {
$.ajax({
dataType: "html",
async: false,
type: 'POST',
url: 'index.php?fn=' + varia,
data: { token: "mytoken" },
success: function(data) {
$("body").prepend(data);
// The #login have atribute style="display: none;"
$("#login").fadeIn(500);
}
});
}
ajax("login", "html");
May be you can do like this
.done(function (data) {
var $data = $(data).hide();
$data.prependTo($("body"));
$data.fadeIn(500);
});
$(document).ready(function () {
var j = jQuery.noConflict();
j('.refresh').click(refreshDiv);
j('.refresh').css({
color: ""
});
function refreshDiv() {
j.ajax({
url: "refresh.php",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});
}
});
I have this code ,but I am confused how to display that div gets refreshed.Please provide me some code or links to refer.I am making site in which I want to update the score when I refresh the div using ajax.
In your ajax request specify dataType:'html' as shown :-
j.ajax({
url: "refresh.php",
dataType:"html",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});
You can user the different state of Ajax please refre Ajax Details Desc
Then put beforeSend() function put any loading gif img
Then on complete() hide or remove that image
and on success return the data to div.
Try putting your function in global scope and add the relevant datatype:
function refreshDiv() {
$.ajax({
url: "refresh.php",
datatype:"html",
cache: true,
success: function (html) {
$(".refresh").html(html);
}
});
}
$(document).ready(function () {
$('.refresh').click(refreshDiv);
$('.refresh').css({
color: ""
});
});
Another suggestion is try replacing $ with your j which you have used for jQuery.noConflict() utility.
A small demo could help you.
I am learning jquery and i am stuck with a problem. Here is the code
$(function(){
var gotProducts=new Array();
var productsWithDelete=new Array();
$('.addProducts').on('keyup',function(event) {
var searchVal=$(this).val().trim();
if(searchVal.length > 0) {
$.ajax({
url: 'http://localhost/url',
data: { products: $(this).val(), },
type: 'POST',
dataType: 'html',
success: function(msg) {
$('#printTheProducts').html(msg);
}
});
}
});
$('.productsButton').click(function() {
alert('yes');
});
});
The response I am getting from the ajax call is a button having class productsButton.
Now when i try to click that button I got through ajax then it does not alert yes. I mean it does nothing.
Question:-
What might be the problem?
Try event delegation using .on() for generated button, As they are generated dynamically
$('#printTheProducts').on('click','.productsButton',function(){
alert('yes');
});
Where #printTheProducts is the closest parent element, you can use document or document.body also as a selector!
Syntax:
$(closestparentelement).on('event','targetselector',function(){
});
This may be something very easy but i can't seem to get this to work and im not sure why. I have jquery installed and i am trying to get an attribute of "this" element when i click on it. Right now my code looks like this:
url = $(this).attr("href")
When I call this function by clicking on a link, it tells me that the var "url" is undefined. So obviously it is not picking up the "this" when i click on the link. I am trying to pass the href of an anchor tag to use as my variable.
What am i overlooking? Again, i know this is something very simple but i can't seem to figure it out so thank you for taking the time to help me.
Thanks.
<script type="text/javascript">
url = "push1";
$("a").live("click", function(event) {
event.preventDefault();
url = $(this).attr("href");
})
$.ajax({
type: "get",
url: "/"+url+".php",
data: "",
dataType: "html",
success: function(html){
jQuery('#Right_Content').hide().html(html).fadeIn(1000);
},
})
;
</script>
html:
<body>
<a href="push1" >Image 1</a>
<a href="push2" >Image 2</a>
<div id="Right_Content"></div>
</body>
This should work for you
$(function(){
$(".link").click(function(){
var url=$(this).attr("href");
alert(url);
return false;
});
});
Assuming you are targeting all anchor tags with a css class called "link"
Here is the working example : http://jsfiddle.net/L99mM/2/
Edit: As per your code posted in the question
You should call preventDefault after your ajax call. and there is closing brackets should be after ajax call
$("a").live("click", function(event) {
var targeturl = $(this).attr("href");
$.ajax({
type: "get",
url: "/"+targeturl +".php",
data: "",
dataType: "html",
success: function(html){
jQuery('#Right_Content').hide().html(html).fadeIn(1000);
}
}); // closing for ajax
event.preventDefault();
}); // closing for click event binding
<script type="text/javascript">
var url = "push1";
function getContent(){
$.ajax({
type: "get",
url: "/"+url+".php",
data: "",
dataType: "html",
success: function(html){
jQuery('#Right_Content').hide().html(html).fadeIn(1000);
});
}
$("a").live("click", function(event) {
event.preventDefault();
url = $(this).attr("href");
getContent();
});
getContent();
</script>
you don't need "this" for this, you need the target of the event:
$("a").live("click", function(event) {
event.preventDefault();
url = event.target.href;
})
working fiddle
http://jsfiddle.net/3LvCm/