i want to display the data from ajax request to tooltip, it's open in modal window right now, but I want to open it into the tooltip, how can I do that, I tried a lot but didn't get success, I stucked at here, please help me to show data through tooltip.
this is my view code
echo $this->Manager->link('Groups',array('action'=> 'test_contact_group', $records['Contact']['contact_id']),array('class'=>'ajax_links'));
the html of this link is
<a class="ajax_links" help="a" href="/contacts/test_contact_group/78">Groups</a>
and jquery is there
<script>
$(".ajax_links").hover(function(e) {
e.preventDefault();
var link = $(this).attr('href');
$.ajax({
type: "POST",
url: link,
cache: false
}).done(function( html ) {
jQuery('#myModal').modal('show');
jQuery('.modal-body').html("Groups" + html);
});
});
</script>
it is diplay in modal window, but I want to open it in tooltip, how can I do that, please help me. thanks a ton in advance, I really stucked here.
Hope this will help you..
$(".ajax_links").hover(function(e) {
e.preventDefault();
var link = $(this).attr('href');
$.ajax({
type: "GET",
url: link,
success : function (data){
$('#elementId').attr('title',data);
}
});
});
If the issue is only with jquery syntax, you can try this:
$(this).attr("title", html);
Instead of modal window. you just have a container for div with id tooltip. like this. then append the results. some thing like this : demo tooltip. and CSS taken from this answer Pure CSS Tooltip
$('#toolTip').show();
Working demo : DEMO for Tooltip
or you can append to title attribute.
$('#elementId').attr('title',data);
Related
I try to call $.ajax to get my bootstrap modal's html text. Something like this
$.ajax({
url: ...,
success: function(data){
$("#modal_div").html(data.html);
$("#myModal").modal("show");
}
});
And I have already included bootstrap.min.js in my base html. Btw, I also tried to use a button included in "data.html" to toggle modal, however, I could only see button appended after #modal_div, but couldn't make modal to show up after clicking on the button.
Thank you for your help in advance :)
I found out a way to work around.
If any code are working on newly appended element, put codes inside $(document).ready.
For example (according to my question)
$.ajax({
url: ...,
success: function(data){
$("#modal_div").html(data.html);
$(document).ready(function(){
$("#myModal").modal("show");
}
}
});
I'm using bootstrap3-wysiwyg. Code below works onload of page. This doesn't work when put inside an event, especially not inside $.ajax.
$('.textarea').html('Some text dynamically set.');
What I'm trying to do is something like this.
$.ajax({
...
success: function(data) {
$('.textarea').html(data);
}
});
data displays fine inside the textarea if without the wysiwyg, so I'm sure that's not the issue.
This solved it.
"The key is to make sure that the editor is set up on the show event of the modal not on document ready." ~ ndogaru
$.ajax({
...
success: function(data) {
$('.textarea').html(data);
$('.textarea').wysihtml5();
}
});
https://github.com/jhollingworth/bootstrap-wysihtml5/issues/268
I hope this helps!
I have the following script pulling in data from a wordpress database. It all works fine when selecting different options (pulls in the correct data etc).
I have now installed tinymce editor onto the textarea. Since this the content no longer shows.
<script>
$(document).ready(function()
{
$('#myselect').change(function()
{
var selected = $(this).find(':selected').html();
var id = $(this).find(':selected').val();
$.post('http://www.xxx/admin/email/ajax.php', {'beverage': selected, 'id':id }, function(data) {
$('#result').html(data);
});
});
});
</script>
Does anyone know what i am missing to make this work?
Any help would be greatly appreciated!
Cheers Dan
Found the solution myself, i needed to change the following:
$('#result').html(data);
to:
tinyMCE.get('result').setContent(data);
I am using jQuery Address plugin, and all my ajax navigation is based on it, and more precisely on internalChange or externalChange events like that
$(document).ready(function() {
initDeepLinking();
});
function linkClicked(e){
var request = $.ajax({
url: e.path,
data: e.queryString,
type: "GET",
dataType: "json",
});
request.done(handleResponse);
return false;
}
function handleResponse(response, textStatus, jqXHR){
$('#main').html(response.responseText);
};
function initDeepLinking(){
$.address.internalChange(function(event){
linkClicked(event);
});
$.address.externalChange(function(event){
linkClicked(event);
});
}
so when i click on a link leading to the current page, nothing happens.
I would like the page to reload when I do that. Any simple options ?
Thanks !
I am having troubles understanding what your question really is:
you don't know how to attach a handler to the link
you don't know what statement can be used to refresh the current page
In order to set a handler you can use some selector. For example, getting the element by class. More about jquery selectors here.
After you have the element, you can attach an event handler for the 'on click' event and do something like this:
window.location.reload(true);
Well this has me well and truly stumped. After searching for the last few hours I still cannot seem to work out where I am going wrong.
I am trying to append an AJAX response to a container when it gets clicked. That works fine but I don't want it to append another object when the elements from the AJAX response also gets clicked.... so:
<div id="container">
<!-- AJAX response to get inserted here, for example -->
<span id="ajaxResponse"></span>
</div>
Here is my script:
$('#container').click(function(e) {
var current_el = $(this).get(0);
$.ajax({
url: 'text.html',
success: function(data) {
$(current_el).append(data);
}
});
return false;
});
So it works fine but for some reason the click event on #container also fires when I click on the AJAX response span!?
According to jQuery documentation:
To stop further handlers from
executing after one bound using
.live(), the handler must return
false. Calling .stopPropagation() will
not accomplish this.
But unless I am mistaken, I am calling false? :(
Anyone help me out on this?
UPDATED:
So the only way I can get it to work is by updating my code to this:
$('#container').live('click', function() {
var current_el = $(this).get(0);
$.ajax({
url: 'text.html',
success: function(data) {
$(current_el).append(data);
}
});
});
$('#ajaxResponse').live('click', function(e) {
return false;
});
This seems a little messy though... anyone have a better solution?
Where is live part you mention in the title of the question ?
It is how the event model works.. If you click on element which does not handle the event, the event will travel up the DOM hierarchy until it finds an element that handles the click (and stops its propagation..). Otherwise you would not be able to put an image inside a <a> tag and click on it..
You can bind a canceling handler on the inner element assuming you have someway to target it..
$.ajax({
url: 'text.html',
success: function(data) {
$(current_el).append(data);
// assuming the returned data from ajax are wrapped in tags
$(current_el).children().click(function(){ return false;});
}
});
I think the return false is referring to something else in this case...
you should try calling stopPropagation() - this should stop the "click" function from propagating down to the ajaxResponse span....
One option that you may want to try is switching over to using live(). Essentially, the click event you setup is calling bind(), and the solution you referenced is using live() which is a variation on bind().
For example:
$('#container').live("click", function(e) {
var current_el = $(this).get(0);
$.ajax({
url: 'text.html',
success: function(data) {
$(current_el).append(data);
}
});
return false;
});
HTH