When i have fire ajax on mouseover, user profile is not displaying but second time when i mouserover on it then it is displaying. I have use tooltip for displaying user profile.
Please correct my code
$(document).ready(function(){
$(".user_profile").bind("mouseover",function(){
id = $(this).attr('id')
user_id=id.split('_')[1];
$.ajax({
url: "/admin/inbox/user_profile",
data: {user_id : user_id},
success: function(data){
$("#"+id).qtip({
content:{
text: data,
title:{
text: "User Profile"
}
},
style: {name:'blue', tip:true}
});
}
});
});
});
Because $.ajax is asynchronous, the mouseover event returns before the qtip is created.
When the page loads, you could run $.ajax to pull back data for all the user profiles displayed in the page in advance, store this data in an array, and then create each qtip with data from the already populated array.
I have resolve this problem by
I have read the solution:
"Because $.ajax is asynchronous, the mouseover event returns before the qtip is created.
When the page loads, you could run $.ajax to pull back data for all the user profiles displayed in the page in advance, store this data in an array, and then create each qtip with data from the already populated array.
"
$(document).ready(function(){
var i=0,j=0;
$(".user_profile").each(function(){
id = $(this).attr('id')
user_id=id.split('_')[1];
my_user_ids[i++]=user_id;
my_ids[j++]=id;
});
$.each( my_ids, function(index, value){
$.ajax({
url:"/admin/inbox/user_profile",
data: {user_id : my_user_ids[index]},
success: function(data){
myArray[value]=data;
$("#"+my_ids[index]).qtip({
content:{
text: myArray[my_ids[index]],
title:{
text: "New User's Profile"
}
},
show: 'mouseover',
hide: 'mouseout',
style: {name:'blue', tip:true}
});
}
});
});
});
You do not need to bind mouseover: it's already done by qtip plugin. Using bind you generate a "conflict" on events at first mouseover event.
You shound resolve, simply, using jQuery .hover instead of bind:
$(document).ready(function() {
$(".user_profile").hover(function() {
{
id = $(this).attr('id')
user_id=id.split('_')[1];
$.ajax({
url: "/admin/inbox/user_profile",
data: {user_id : user_id},
success: function(data) {
$("#"+id).qtip({
content: {
text: data,
title: {
text: "User Profile"
}
},
style: {name:'blue', tip:true}
});
}
});
});
});
Related
I have a html form to make an order in a shop by clicking a button called Order.(button_id="order")
At the button click event i have performed a ajax request to a page(itemOrder_php2.php) which sends some data in the form to that mentioned page. It's working correctly. But the problem is ajax request is not functioning when two or more users order at the same time. Please help me to work with multiple ajax requests. Thank you! here is my code.
$(document).ready(function(){
$("#order").click(function(e){
e.preventDefault();
$.ajax({type: "POST",
url: "itemOrder_php2.php",
data: { selectedItem: $("#selectedItem").val(), sizeUnit: $("#sizeUnit").val(), quantity: $("#quantity").val(), value: x, lSize : $("#lSize").val(), lPrice : $("#lPrice").val() },
success:function(result){
$("#orderResult").html(result);
}});
});
});
Handle the click event with document on...
$(document).ready(function(){
$(document).on('click','#order',function(e){
e.preventDefault();
$.ajax({type: "POST",
url: "itemOrder_php2.php",
data: { selectedItem: $("#selectedItem").val(), sizeUnit: $("#sizeUnit").val(), quantity: $("#quantity").val(), value: x, lSize : $("#lSize").val(), lPrice : $("#lPrice").val() },
success:function(result){
$("#orderResult").html(result);
}});
});
});
I'm having a problem with ajax, as it sends only once my request, i have a cssmap plugin, and that plugin have the option onSecondClick which gives me the ability to do something when i click on it twice, my post request sends some data, to the sessions.php, in session.php i delete session, and then i put one again.
The js lines :
'onSecondClick' : function(e){
var regionName = e.children("A").eq(0).text(),
regionHref = e.children("A").eq(0).attr("href"),
regionClass = e.attr("class").split(" ")[0];
if(regionClass == "eu13" || regionClass == "eu16" || regionClass == "eu47"){
//open model success
$.ajax({
type: "POST",
url: 'session',
data: { country : regionClass },
cache: false,
success: function(data){
$( "#success" ).click();
}
});
//$( "#success" ).click();
}else{
//open model error
$( "#error" ).click();
}
},
PS - the url is right, thats the url of the file, and the session is set, but only once and doesn't upadate.
session.php:
if(Input::get('country')){
$countries = array(
'eu13' => 'france',
'eu16' => 'germany',
'eu47' => 'united kingdom',
//end of playable countries, the rest is bots!
'eu5' => 'belgium',
'eu27' => 'luxembourg',
'eu33' => 'netherlands',
'eu44' => 'switzerland',
'eu20' => 'ireland'
);
if(Session::get('selected');){
Session::delete('selected');
}
Session::put('selected',$countries[Input::get('country')]);
}
On the success, i click a button, which open a "model" from Bootstrap.
everything is ok, but the session always return the previous clicked country, and no matter how much i click other country, it doesn't change.
i've got no idea what the problem is, tried e.preventdefault(), cache: false, and some more options, nothing seems to fix it.
It's hard to tell where the problem lies from your description, but if it's about presentation (i.e. you can verify that session.php does it's job, but still the modal presents the wrong info), this is probably the reason.
Bootstrap modals are only, by default, filled with content once. After that it will use .toggle to show or hide.
If you want to update the information, you'll have to clear it first:
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
This will clear any content from modals with class modal when it hides/closes. You can also use an id selector of course, like #myModal.
edit:
Try this ajax. What does the alert return?
$.ajax({
type: "POST",
url: "session",
data: { "country": regionClass },
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
cache: false,
success: function(data){
alert(data);
$("#success").click();
}
});
And add something like this to the end of your session.php:
echo $countries[Input::get('country')];
(php is not really my thing. I think that's correct though)
I am using the qtip2 Jquery plug-in to provide suggestions on keyup in an input but what I would like to do is instead of refreshing the entire tool-tip bubble every time the content is updated id rather just refresh the content of the tool-tip without closing it.
So effectively if there is no tool tip present it will show the tool-tip and call the content via Ajax but if there is an existing tool-tip it will just update the content of the existing tool tip.
http://jsfiddle.net/fDavN/11723/
Ok Iv updated my code and it kinda works but I am getting an error: typeError: $(...).updateContent is not a function.
Anbody know why?
$(document).ready(function() {
var title = 'KnowledgeBase Suggestions';
$('#name').on("keyup", function () {
if($(this).data('qtip') ) {
var getFormUrl = "http://qtip2.com/demos/data/owl";
$.ajax({ url: getFormUrl,
success: function (data) {
$(this).updateContent($(".qtip-content").html(data));
}
});
}
else {
$(this).qtip({
content: {
text: "Loading...",
ajax:{
url: 'http://qtip2.com/demos/data/owl', // Use href attribute as URL
type: 'GET', // POST or GET
data: {}, // Data to pass along with your request
success: function(data, status) {
// Process the data
// Set the content manually (required!)
this.set('content.text', data);
}
},
title: {
button: true,
text: title
}
},
position: {
my: 'top left',
at: 'center right',
adjust: {
mouse: false,
scroll: false,
y: 5,
x: 25
}
},
show: {
when: false, // Don't specify a show event
ready: true, // Show the tooltip when ready
delay: 1500,
effect: function() {
$(this).fadeTo(800, 1);
}
},
hide: false,
style: {
classes : 'qtip-default qtip qtip qtip-tipped qtip-shadow', //qtip-rounded'
tip: {
offset: 0
}
}
});
}
});
});
A stab in the dark as I don't know what updateContent does but you might have an issue with how you are referencing $(this)
try changing
$('#name').on("keyup", function () {
var $this = $(this);
if($this.data('qtip') ) {
var getFormUrl = "http://qtip2.com/demos/data/owl";
$.ajax({ url: getFormUrl,
success: function (data) {
$this.updateContent($(".qtip-content").html(data));
}
});
}
else {
....
the reason is this is a different this when inside the ajax callback
$(function() {
$('.challenge').tooltip({html: true, trigger: 'hover'});
$('.challenge').mouseover(function(){
var that = $(this);
var ajaxQueue = $({
url: "<?=base_url();?>/ajax/challenge_tip",
type: 'POST',
cache: true,
data: {
'idd': $(this).attr("rel"),
},
dataType: 'json',
success: function(challenge_j) {
that.tooltip('hide')
.attr('data-original-title', challenge_j)
.tooltip('fixTitle')
.tooltip('show');
}
});
$.ajaxQueue = function(ajaxOpts) {
var oldComplete = ajaxOpts.complete;
ajaxQueue.queue(function(next) {
ajaxOpts.complete = function() {
if (oldComplete) oldComplete.apply(this, arguments);
next();
};
$.ajax(ajaxOpts);
});
};
});
});
it's my first experience with js and i need some help. for tooltips i use bootstrap tooltips.
when cursor hover on link, script send post data to controller and receive callback data. in the first hover script receives the data, but tooltip doesn't pop up, only the second hover. how i can fix it?
and one more question. can script will send the request only the first mouse hover, and the following hover will use the information from the cache?
and sorry my english ;D
It is hard to test cross domain
Here is what I THINK you need
$(function() {
$('.challenge').tooltip({html: true, trigger: 'hover'});
$('.challenge').mouseover(function(){
var that = $(this);
$.ajax({
url: "<?=base_url();?>/ajax/challenge_tip",
type: 'POST',
cache: true,
data: {
'idd': $(this).attr("rel"),
},
dataType: 'json',
success: function(challenge_j) {
that.tooltip('hide')
.attr('data-original-title', challenge_j)
.tooltip('fixTitle')
.tooltip('show');
}
});
});
});
Create flag for ajax query.
var isTooltipTextEmpty = true;
$('.challenge').mouseover(function(){
if(isTooltipTextEmpty) {
...add ajax query here)
}
}
And you need to trigger tooltip show event, when ajax query is ready like this
.success(data) {
$('.challenge').show();
isTooltipTextEmpty = false; //prevents multiple ajax queries
}
See more here: Bootstrap Tooltip
I'm using the jQuery UI Autocomplete plug-in to make an ajax call and retrieve data. As well as passing the text of the input element I'm trying to pass in the 'id' attribute of the input element as an additional parameter. An extract of my code looks like this -
$("#autocomplete input").autocomplete({
source: function(request, response) {
$.ajax({
url: "search.php",
dataType: "json",
data: {
term: extractLast(request.term),
extra_param: $(this).attr('id')
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.label,
value: item.name
}
}))
}
})
},
});
The extra parameter is added to the 'data' property in the ajax call. It works okay if I specifically pass in a value e.g. '3' but I want to pass the 'id' attribute of the input element the function is being called on e.g. $(this).attr('id').
I assume it's a problem with 'this' not being evaluated in this part of the code, but I'm at a loss to see how else I can reference the element that is being targeted. Any help appreciated!
$('#autocomplete input').each(e, function() {
$(e).autocomplete('/path?param=' + $(e).attr('id'), function() { ... });
});
$('#autocomplete input').each(e, function() {
$(e).autocomplete({ source:function ... extra_param: $(e).attr('id') ... });
});
There maybe a more elegant way, but, I know autocomplete is somewhat sophisticated. I personally generate the request w/get parameters and use formatItem/formatResult instead of assigning the source to an ajax call.
I've got it working by breaking the autocomplete call out into an each. This allows me to capture the target element before I execute the autocomplete -
$("#autocomplete input").each(function() {
var that = this;
$(that).autocomplete({
source: function(request, response, this_element) {
$.ajax({
url: "search.php",
dataType: "json",
data: {
term: extractLast(request.term),
extra_param: $(that).attr('id')
}
....
"Source" is the ID of your input, you receive this item and save it in the variable, "that". When the input "Source" calls the autocomplete function, you can send the value of your id stored in the variable "that" for AJAX.
Example:
<script type="text/javascript">
$(document).ready(function() {
$("#Source").each(function() {
var that = this;
var url = "<?php echo constant('URL'); ?>";
$(that).autocomplete({
source: function(request, response){
$.ajax({
url: url+"models/queries/C_getOptions.php",
dataType:"json",
data:{
word:request.term,
id : $(that).attr('id')
},
success: function(data){
response(data);
}
});
},
minLength: 1,
select: function(event,ui){
//alert("Selecciono: "+ ui.item.label);
}
});
})
});