I'm trying to build an Ajax Bootstrap Popover to display a page that contains a rating star system.
The javascript here work nice the first time.
Then I have this error:
Uncaught TypeError: Object # has no method 'popover'
I'm not really good in jQuery, but I guess it seems to be due to the ajax call, but I can't find where the problem is.
$(".myRate")
.popover({
offset: 10,
trigger: 'manual',
animate: false,
html: true,
placement: 'top',
template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
});
$('.myRate').mouseenter(popoverDisplay);
popoverDisplay = function() {
var el = $(this);
var _data = el.attr('alt');
$.ajax({
type: 'GET',
url: 'notes.php',
data: _data,
cache: false,
dataType: 'html',
success: function(data) {
el.attr('data-content', data);
el.popover('show');
}
});
}
I don't get what I am doing wrong...
Any idea ?
EDIT:
After searching, it seems that, it's the loaded pages which causes this error.
Exactly this part:
It seems that loading jquery-1.7.2.js make the bug because if I remove it, the error disapear. Problem: I can't delete it because without it jRating doesn't work anymore :/
I had this problem after running the rails twitter bootstrap generator, then switching to bootstrap-sass.
It was caused by a filename collision because boostrap-sass references bootstrap.js instead of twitter/bootstrap, which clashes with the generated file.
Just rename the generated app/assets/javascripts/bootstrap.js.coffee to something else, eg app/assets/javascripts/bootstrap_and_overrides.js.coffee, and you're good to go.
I had this problem because i was trying to use the jQuery from bootstrap while also importing jQuery from googleapis
(like it says in http://railscasts.com/episodes/205-unobtrusive-javascript)
if you're using bootstrap, you'll have jquery
i had the same problem .
you might be loading jquery AFTER loading bootstrap.js . for some reason the sequence is important
</footer>
<script src="<?php echo "http://".$_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI']."assets/bootstrap/js/jquery-1.7.1.min.js" ;?>"></script>
<script src="<?php echo "http://".$_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI']."assets/bootstrap/js/bootstrap.js" ;?>"></script>
<script type="text/javascript">
$(document).ready(function(){
create_project_form=$('form#create_project_form');
$('button#create_project_button').popover({title:'New Project',content:create_project_form});
});
</script>
</body>
</html>
loading jquery before bootstrap did the job for me . hope that helps
I had the same problem. I was loading jQuery.js twice... Narf...
You can either use boostrap.js or (bootstrap-popover.js and bootstrap-tooltip.js)
But not both because if you use both. You get Uncaught TypeError: Object # has no method 'popover'
I guess you're using rails, so it might come that assets/vendor/jquery is loaded after assets/vendor/bootstrap, because the load order is alphabetical. So you might rename the bootstrap file to fit the right loading order. I experienced that problem and it did the trick
Related
Hi I know this has been asked a few times but I have been through every answer and tried them all with no luck.
I am trying to use Ajax in a Wordpress front end page, I have security in the page to ensure the user is logged in before they can view this page too.
No matter what code i enter my ajax call always returns 0.
function ajaxfoodlookup()
{
echo "ajax fired";
die();
}
add_action('wp_ajax_nopriv_ajaxfoodlookup','ajaxfoodlookup');
add_action('wp_ajax_ajaxfoodlookup','ajaxfoodlookup');
This is what I have in my functions.php (i have also tried exit(); and die($results) where $results = 'ajax fired'; nothing seems to work.
This is what I have in the page to call the ajax;
jQuery.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
data: { action:'ajaxfoodlookup'},
success: function (data) { alert(data);}
});
The only thing that I have different to the other questions/answers on here is that I am using a bought Theme which does have some code added, is that theme able to hijack my ajax calls? I thought wordpress would execute the ajax call depending on the 'action' in the data supplied?
Please help its driving me crazy?
Thanks
Official WordPress recommendation is to use the ajaxurl variable instead of hard coded one. Insert this before your JS code and change the url of your jQuery.ajax to use ajaxurl.
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
You can also use wp_localize_script to define the ajaxurl
I want to get last ajax call made in my code .
here is my code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script>
function getCreateAccount() {
$.ajax({
type: "GET",
url: "/Account/Register/",
contentType: "application/json; charset=utf-8",
dataType: "json"
});
console.log($.ajax.mostRecentCall.args[0]);
}
</script>
</head>
<body>
</body>
</html>
but when i see in my console it says "TypeError: $.ajax.mostRecentCall is undefined" .
Thanks,
You may register a global ajaxComplete handler that will be invoked every time an AJAX call finishes.
With this, you can emulate something like the Jasmine $.ajax.calls.mostRecentCall() property:
$(document).ajaxComplete(function(ev, jqXHR, settings) {
$.ajax.mostRecentCall = jqXHR;
});
In this case I'm saving the jqXHR object, rather than the exact set of parameters that was passed to $.ajax.
Note, of course, that this won't be populated immediately after $.ajax is called - it won't be filled until at least one call has finished.
I think mostRecentCall function is from Jasmine framework. You must include Jasmine in your code.
mostRecentCall does not exist in jquery!
there is no such this like "$.ajax.mostRecentCall" in ajax jquery.
As PSR mentioned you could try to use a flag variable
Adding an alert before logging will give enough time for the ajax call to be finished.(that should do the trick)
if you don't want any alerts then you can use sleep() method
There is nothing like
$.ajax.mostRecentCall
in Jquery. That is from Jasmine.js. Unless and until you add reference to Jasmine.js and follow the steps to spy on function, it will give you an error.
You may want to refer the documentation of Jasmin.js. Here's the link that shows how to use it.
I am loading some code with the jQuery.ajax() method. In this code I want to have some jQuery-UI Widgets (sliders and calenders) but they won't appear in IE.
Here some example code where you maybe can help me to understand where I am going wrong.
The Code which will load the jQuery-UI Widgets
<script>
jQuery(document).ready(function(){
jQuery.ajax({
type:'post',
url: 'file.php',
success: function (data) {
jQuery('.somediv').empty().html(data);
}
});
});
</script>
The Code which is loaded and SHOULD initialize the jQuery-UI Widgets
<script>
jQuery(document).ready(function(){
jQuery('.datepicker-div').datepicker(someoptions);
jQuery('.slider-div').slider(someoptions);
});
</script>
<div class="datepicker-div">
<div class="slider-div">
You can see that it should be very simple. For FF it works fine but not for IE.
Maybe it has nothing to do with the document-ready statement?
Just call the initializers in the success event:
<script>
jQuery(document).ready(function(){
jQuery.ajax({
type:'post',
url: 'file.php',
success: function (data) {
jQuery('.somediv').empty().html(data);
jQuery('.datepicker-div').datepicker(someoptions);
jQuery('.slider-div').slider(someoptions);
}
});
});
</script>
Of course, you should refactor that by having a function for initializations:
function Initialize(){
jQuery('.datepicker-div').datepicker(someoptions);
jQuery('.slider-div').slider(someoptions);
}
Then have your success call it, as well as the ready() ebent:
<script>
jQuery(document).ready(function(){
jQuery.ajax({
type:'post',
url: 'file.php',
success: function (data) {
jQuery('.somediv').empty().html(data);
Initialize();
}
});
});
</script>
Update
I have read your question more carefully and now I fully understand it. Your ready() is in the loaded code. Then you should be using jQuery's load():
Script Execution
When calling .load() using a URL without a suffixed selector
expression, the content is passed to .html() prior to scripts being
removed. This executes the script blocks before they are discarded. If
.load() is called with a selector expression appended to the URL,
however, the scripts are stripped out prior to the DOM being updated,
and thus are not executed. An example of both cases can be seen below:
Here, any JavaScript loaded into #a as a part of the document will
successfully execute.
$('#a').load('article.html');
Try removing the scripts prior to appending the html, then adding them back.
var outHTML = data.replace(/<script>/ig,"<div class='script'>").replace(/<\/script>/ig,"</div>");
outHTML = $(outHTML);
var script = outHTML.find("div.script").detach();
$(".somediv").html(outHTML);
var s = document.createElement("script");
s.textContent = script.text();
document.body.appendChild(s);
Edit:
.find("div.script") may need to be changed to .filter("div.script") based on what your ajax request is returning.
Ok, I didn't found out how i can solve the Problem, but i found a work around.
The work around is very simple. Because in every browser except for the IE the loading of the script via ajax works fine, we have to identify the IE and change the behaviour to not loading the script but redirect to the site I wanted to load. I am doing this all in Joomla 2.5, so there was a bit work to do but basically it was the following code wich solved the problem.
// preparing the url
// check for ie
if (jQuery.browser.msie) {
window.location(url);
} else {
// do the ajax
}
I am trying load content via ajax when an <a> is clicked. The code I am using:
<script type="text/javascript">
jQuery(document).ready(function(){
// ajax pagination
jQuery('.znn_paginate a').live('click', function(){
var link = jQuery(this).attr('href');
jQuery('.lay1').html('<div class="zn_ajaxwrap"><div class="zn_ajax"></div></div>');
jQuery('.lay1').fadeOut("slow").load(link+' .post').fadeIn('slow');
});
}); // end ready function
</script>
The problem is When the content is loaded the page jumps to the top. I treid to prevent it with: e.preventDefault(); But then the the ajax loading stopped. I guess it stopped prevented the ajax loading too..
Is there any fix for this?
Thanks
P.S: I am using it on wordpress. Here is the tutorial I followed: http://seonix.org/wordpress-seo/easy-ajax-pagination/
EDIT
There was something wrong with the code. I am now using this without any problem: http://pastebin.com/vbXqmTHq
two things:
your function() should return false.
also the link itself should have href="javascript:void(0);
it must be jquery
I have file text.html with 6 div in (a,b,c,d,e,f)
In another file i have a div, i like it to populate the content of a+b+c+d+e+f into that single div
I have try .load = but b remplace a
i have try append, but i need a temp var
so now i am stuck
That code get the content from the file textes.html ... div #a and put the content into div #right, but the second libe REMPLACE the content of right a with right b
I like to append the content a + b NOT a over b
$(document).ready(function(){
var temp = load('textes.html #nicolas');
$('#right').append(temp);
var temp = load('textes.html #antoine');
$('#right').append(temp);
.
.
.
.
return false;
});
that code is the idea behind what should work, but i cannot make a ajax .load() to load content into a variable to append the content to the div...
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "textes.html",
cache: false,
success: function(html){
$("#right").append(html);
}
});
});
</script>
That code load the WHOLE html file, i like to get only some selected DIV #
$(document).ready(function(){
$.get("textes.html",function(data){
$("#right").append($("#nicolas",data)).end().append($("#antoine",data));
},'html');
});
I had a similar issue just now and I think I figured out a way to do what we want using the .load() function. It's not pretty but never mind ;)
First off, I added a "TempDiv" to my html with a "visibility:hidden" style.
<div id="TempDiv" style="visibility:hidden"></div>
Then you run the jQuery :
$(document).ready(function(){
$('#TempDiv').load('textes.html #nicolas', function(){
$('#right').append($('#TempDiv').html());
});
});
I'm not sure it's the best way !
PS : That is my first stackoverflow post ;)
try,
$.get('url.php', function(data) {
$("#right").append(data);
});
This sounds like jQuery? Please state what framework you are using since I can't really see any mention of it. Anyway, append should work. Just do something like:
mydiv.append(a.text());
mydiv.append(b.text());
mydiv.append(c.text());
mydiv.append(d.text());
mydiv.append(e.text());
mydiv.append(f.text());
They should all be appended into mydiv.
NOTE: if you also want the html, use the .html() function instead of .text().
JQuery ( http://jquery.com/ ) is a good javascript library that you can use to do an AJAX request to get the other file. See this question for more: Use jQuery to replace XMLHttpRequest