I am about to use jQuery in my wordpress installation. Thus I have used the appropriate wp_enqueue_script function to load this and additionally the jQZoom-script.
As a result, the following lines can be found in my header in this order
<link rel='stylesheet' id='jQZoom_style-css' href='http://mysite.de/wordpress/wp-content/themes/twentytwelve-child/jqzoom_ev-2.3/css/jquery.jqzoom.css?ver=2.3' type='text/css' media='all' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?ver=1.9.1'></script>
<script type='text/javascript' src='http://mysite.de/wordpress/wp-content/themes/twentytwelve-child/jqzoom_ev-2.3/js/jquery.jqzoom-core.js?ver=2.3'></script>
The according files do all exist.
However, my little test script shortly above the footer (i.e. in the body) does not work (neither does the demanded function):
<script type='text/javascript'>
if (jQuery()) {
alert('3ja');
} else {
alert('3nein');
}
if ($()) {
alert('2ja');
} else {
alert('2nein');
}
if (jqzoom()) {
alert('1ja');
} else {
alert('1nein');
}
</script>
I get the 3ja and the 2ja, but neither a 1ja nor a 1nein
Also I have the following in my body, which is supposed to show the zoom function:
<script type='text/javascript'>
$(document).ready(function(){
$('.zoomTarget').jqzoom();
});
</script>
<a href="http://mysite.de/wordpress/wp-content/uploads/triumph_big3.jpg" title="triumph_big3" class="zoomTarget">
<img src="http://mysite.de/wordpress/wp-content/uploads/triumph_small3.jpg" title="triumph_small3" />
</a>
The Chrome js console shows the following errors:
Uncaught ReferenceError: jqzoom is not defined mysite.de:131
(anonymous function) mysite.de:131
Uncaught TypeError: Object [object Object] has no method 'jqzoom' mysite.de:111
(anonymous function) helga-matzke.de:111
c jquery.min.js:3
p.fireWith jquery.min.js:3
b.extend.ready jquery.min.js:3
H jquery.min.js:3
Thank you!
Try adding the migrate js too for 1.9.1
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
Related
Hi I have a jquery popup script I am trying to call in a php function.
The script calling the function is:
<link rel='stylesheet' href='css/sweetalert.css'>
<script src='js/sweetalert-dev.js'></script>
<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<?php
include('functions/notification.php');
$notification_message = "There is a problem loading Smart Telecom at the moment.";
notify($notification_message);
?>
and the function call in notification.php:
<?php
function notify($message)
{
$pop.= "<script>sweetAlert('". $message ."', 'Our Sincere apologies.', 'error');</script>";
echo $pop;
}
?>
As it is, the pop up will display with an error about undefined variable $pop. If I try to disable error notifications, the popup doesn't display. if I do it without the concatenation, the popup also doesn't display.
Where am I going wrong?
UPDATE - SOLVED:
Got it to work. echoed "nbsp;", just before echoing $pop
Ok so follow these steps to ensure the code is working, then check the pop issue:
Delete all data in the function to look like below:
<?php
function notify($message) {
echo $message;
} //output: data passed to $message variable should be displayed?>
if echo $message works then
<link rel='stylesheet' href='css/sweetalert.css'>
<!-- You must always place the jQuery first and then call functions or it will not work -->
<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script src='js/sweetalert-dev.js'></script>
<?php
function notify($message) {
$pop = "<script>sweetAlert('$message', 'Our Sincere apologies.', 'error');</script>";//refer link: http://stackoverflow.com/questions/10512452/php-using-a-variable-inside-a-double-quotes
echo $pop;
}?>
Hi i am using autopopulated code getting the error geocomplete is not a function if is used it in locally (seperated file) it works for me what can be the error
$(function () {
$("#location").geocomplete({
//alert("gine");
details: ".geo-details",
detailsAttribute: "data-geo"
});
});
Pls suggust
You must to add the jquery.min.js and jquery.geocomplete.min.js before call the geocomplete() method:
<script src="/javascripts/jquery.min.js" type="text/javascript"></script>
<script src="/javascripts/jquery.geocomplete.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#location").geocomplete({
details: ".geo-details",
detailsAttribute: "data-geo"
});
</script>
I have a php file that I load into another php file with jQuery. This works, but the moment I start using jQuery in the 'external file', I get ERROR 500.
The reason I used this approach is because this is handy to refresh the data after an AJAX function.
This I have:
test.php:
<script type="text/javascript" src="js/modernizr.custom.29473.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$(document).tooltip({
items: ".plupic , .ingr",
content: function() {
var element = $( this );
if ( element.is( ".plupic " ) ) {
var src = element.attr('src');
return "<img src='" + src + "' style='max-height: 300px; max-width: 300px;'>";
}
if ( element.is( ".ingr" ) ) {
var txt = element.text();
return txt;
}
}
});
$('#kasticket').load('cart.php');
});
</script>
</head>
<body>
<div class="container">
<div id="kasticket"></div><!-- Load data with jQuery-->
cart.php:
I just do a select from the database and write some data to a table with echo();
This works perfectly, but the moment I want to use jQuery, I goes all wrong...(I know this for sure because the jQUery works in a local html file and putting this line in comment makes my php working again)
echo("
<script>
jQuery(document).ready(function() {
if($('#L$MyAant').width() < 70) {
$('.TR1$MyAant').show();
$('.TR2$MyAant').hide();
}else{
$('.TR2$MyAant').show();
$('.TR1$MyAant').hide();
}
});
</script>
");
I have no idea what I'm doing wrong.
If its any help: http://www.itreflex.be/TestAcc/test.php (with currently the jQuery line in comment).
And this is cart.php, exported to txt, it was to long to paste here.
hard to tell without the full source code but I have got a couple of ideas:
First Error 500 should be the HTTP code for internal server error, which basically means that the error lies on the server, then on the PHP side.
Could it be possible that you are mixing up PHP and jQuery on some of your other statements not posted here?
Second, you missed a single quote on your line
$('#kasticket').load(cart.php');
In your cart.php remove the brackets after echo ... For example
echo "<script>
jQuery(document).ready(function() {
if($('#L$MyAant').width() < 70) {
$('.TR1$MyAant').show();
$('.TR2$MyAant').hide();
}else{
$('.TR2$MyAant').show();
$('.TR1$MyAant').hide();
}
});
</script>";
Try this above line in your cart.php and see if that works.
Here is my CSS:
#optionHotel{
display:none;
}
Here is my JavaScript:
function cb1(type){
switch(type){
case "hotel":
alert("hotel");
$("#optionHotel").css("display","block");
break;
}
}
Here is my Html:
<div id="optionHotel"> Some Element In here</div>
Start Script in 'Head Tag':
<?echo '
<script>window.onload = cb1("'.$orderType.'");</script>
'?>
<!--CSS-->
<link href="../../css/navigate.css" rel="stylesheet"/>
<link href="../../css/reservation.css" rel="stylesheet"/>
Passing data from php to js is ok because I have checked In the switchcase
with alert() it's ok but I don't know why .css display to block doesn't work
please advice, Thank in advance
Your code:
<script>window.onload = cb1("'.$orderType.'");</script>
will call the cb1() function immediately and try to assign its result as the window.onload handler. You see the alert because the function does run, but because it runs immediately from inside the head of the document the document body has not yet been parsed so the script can't find your element.
You need to assign an actual function as the handler, where that function will be run onload and at that point will call cb1():
<script>window.onload = function() { cb1("'.$orderType.'"); };</script>
Or, since you are using jQuery, and assuming you don't want to wait for images to load before calling your function, use a document ready handler:
<?echo '
<script>
$(document).ready(function() {
cb1("'.$orderType.'");
});
</script>
'?>
...or move the script to the end of the body and call your function directly:
<?echo '
<script>cb1("'.$orderType.'");</script>
'?>
I am getting the following error from the chrome developer tool
Uncaught ReferenceError: searchRequests is not defined
searchProcess.php:174 onclick.
When I click on hyperlink produced from engine.php, I don't get the alert from the searchRequests function. I'm not sure what the problem is, I appreciate any advice given. Here is my code:
searchProcess.php
<?php
include '../include/engine.php';
?>
<html>
<head>
<script type="text/javascript" src="../jQuery.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var instrID;
var cat;
$(window).load(function(){
});
var newheight = $(window).height();
function searchRequests(instr)
{
alert("in searchResults");
instrID = instr;
alert(instrID);
}
});
</script>
</head>
<body>
<?php
drawSearchResults($var1, $var2, $var3, $var3, $var4);
?>
</body>
</html>
engine.php
<?php
function drawSearchResults($var1, $var2, $var3, $var4, $var5)
{
while($row = mysql_fetch_assoc($result))
{
echo ("<tr>");
echo ("<td id='InstrumentID'><a href='javascript:void(0);' onclick='searchRequests($row[InstrumentID])'>$row[InstrumentID]</a></td>");
echo ("</tr>");
}
?>
The problem is that the function searchRequests is not in scope outside of the $(document).ready(). Move it outside of $(document).ready().
In general you shouldn't embed your javascript in the html. Much nicer:
$('#InstrumentID a').click(someFunctionThatIsInScope);
And you can put that code in the $(document).ready() block. In addition the function you call will get an event object that you can use to get any values you might need from the markup.
Because it is private. You are hiding it from global scope since it is inside the ready function. Do not use inline event handlers, use on() to attach events!