How to make jAlert() Message Box without OK Button.
Basically what I want is to use jAlert() like Jquery Block UI
Please check this fiddle http://jsfiddle.net/Bumts/2/.
There has been some modifications in the core jquery.alert.js, since there has been no overlay param. I made the changes to pass overlay (6th parameter) option to pass for it. You could replace the jquery.alert js code with my modified one.
$(function(){
$('#test').click(function(){$('#test3').jAlert('This is a jAlert Warning Box',"warning",'warningboxid', '', '', 1);});
});
Use JQuery events !!
Example ::
Case 1 : If you are trying to trigger your button after an interval
then use
setInterval( "clickRight()", 5000 );
function clickRight()
{
$('.slide_right').trigger('click');
};
Case 2 : If you are waiting for user to type some thing on to an input field
$('#form').on('mousedown',function(e)
{
if(e.which===1)
{
//call your function alerting message here//
}
}
Short Code ::
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input id="whichkey" value="type something">
<div id="log"></div>
<script>
$('#whichkey').on('mousedown',function(e){
alert("Error");
});
</script>
</body>
</html>
Related
I have a simple HTML form where user can search a word from database and PHP return result as a JSON object if the word is in database.
Strange thing is that a JSON object is returned for a word that is in database when user searches by clicking on a button instead of pressing enter key. I have the following two functions to deal with either when user press enter key or click on the button to search. How to improve my code to get the JSON object from PHP when user searches by pressing enter key after they have typed the word in text field?
$('#word-submit').on('click', function() {
var word = $('#word').val();
$.post('ajax/name.php', {word: word}, function(data) {
var obj = jQuery.parseJSON(data);
console.log(obj); //I see the object in Chrome console log.
});
});
$('#word').keypress(function(e) {
if (e.which == 13) {
var word = $('#word').val();
$.post('ajax/name.php', {word: word}, function(data) {
var obj = jQuery.parseJSON(data);
console.log(obj); //No object is return here. Why? May be something is wrong in my code.
});
}
});
<html>
<head>
<title>Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<form>
<input type="text" id="word">
<input type="button" id="word-submit" value="Search">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/global.js" charset="UTF-8"></script>
</body>
</html>
PHP script works just fine. So I am not pasting it here.
The problem is most likely that your form is submitting. I would just add one listener on the form's submit event which should handle clicking the button and hitting Enter, eg
$(form).on('submit', function(e) {
e.preventDefault(); // don't submit
var word = $('#word').val();
$.post('ajax/name.php', {word: word}, function(data) {
console.log(data);
}, 'json');
});
Ideally, you shouldn't have to parse the JSON or even tell jQuery the response data type (see 'json' arg above). Make sure your PHP script has something like this...
header('Content-type: application/json');
echo json_encode($someDataArrayOrObject);
exit;
In order to make the button work with the above, change its type to submit, ie
<input type="submit" id="word-submit" value="Search">
button work because it prevent the form auto submit / reload it self.
pressing enter key on that textbox causing the form to submit and then reload it self without even triggering the $('#word').keypress(function(e)).
I'm trying to simply echo a function back to the client browser from a server php page after a selection has been made in a jQuery autocomplete box so that the function can process as needed (client-side) with the value of the autocomplete box. The autocomplete is in the php page as follows:
mypage.php
<html>
<head>
<title>Autocomplete</title>
<link href="../../jqSuitePHP/themes/redmond/jquery-ui-1.8.2.custom.css" id="skin" rel="stylesheet" type="text/css" />
<script src="../../jqSuitePHP/js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="../../jqSuitePHP/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script>
$(function ac_boxes() {
$("#dlr").autocomplete({
source: "dlrAutocompleteSearch.php",
minLength: 2,
search : function(){$(this).addClass('ui-autocomplete-loading');},
open : function(){$(this).removeClass('ui-autocomplete-loading');},
select: function( event, ui ) {
// Here's my attempt at calling the client side 'test' function
<?php echo '<script>window[test](ui.item.value)</script>;' ?>
}
});
});
</script>
</head>
<body>
---------
</body>
</html>
But the < and > are causing a problem. If I remove the < and >, the page processes completely (without the 'select' function of course. If I add the < and >, the page does not process.
I have tried assigning the string using the php htmlentities() as such:
<?php
$val = htmlentities('<script>window[test](ui.item.value)</script>;');
echo $val;
?>
But this doesn't seem to work either.
Is my problem stemming from the php being inside of the jQuery script? If so, what is another method of calling the php from the 'select' method of autocomplete?
Thanks in advance.
I don't think this code is doing what you think it is doing; when you load the page the PHP is executed and you end up with something like this in the source code:
<script>
...
select: function( event, ui ) {
<script>window[test](ui.item.value)</script>;
}
...
</script>
Which is not correct (you don't need script tags within script tags; as you've seen it doesn't do anything but cause problems).
If you want to execute some PHP when the selection changes, you have to make another call to the server, via AJAX, submitting a form, or whatever. Something like this might be more like what you want:
select: function(event, ui) {
// send the selected value to the server for processing
$.get("processChange.php", {value: ui.item.value});
}
See the JQuery docs on $.get() for more on that.
On the other hand, if all you're trying to do is call another client-side javascript function (test, for example) with the selected value, you don't need PHP to echo anything. This ought to do the trick:
<script>
function test(args) {
// ...
}
$("#dlr").autocomplete({
// ...
select: function(event, ui) {
test(ui.item.value);
}
}
</script>
You can use < and > just like in HTML. You can also use the replace() function to find all the < and > and replace them.
I am just trying to test a simple ajax call on my server using jquery
I have a HTML file like this
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#connect_button").click(function(event){
$("#placeholder").load("http://mysever/AjaxResponse.php");
})
});
</script>
</head>
<body>
<button id="connect_button" type="button">Connect</button>
<span id="placeholder">This has not worked</span>
</body>
</html>
AjaxResponse.php, which works when accessed from the browser statically, looks like this
<?php
echo "This now works";
?>
The code runs and the replace happens the only problem is that the page returns a blank string causing the span to be empty
If I change the code to use another jQuery call such as $.get() the callback is sent back the textStatus of "Success" and a data value of ""
What am I missing here? Do severs need to be set up to respond to Ajax calls. Am I misusing jquery?
Is your AjaxResponse.php on the same domain? Ajax calls won't work cross-site.
If you want, you could check if the loaded page has anything in it like this:
$(function(){
$('#connect_button').live('click', function(){
content = $.get('test.php',function(data){
content = data;
if (content != ""){
$('#placeholder').html(content);
}else{
$('#placeholder').html('This has not worked');
}
});
});
})
That way if the returned data is empty, it will put "This has not worked" in the placeholder id.
Why am I getting an error in Firebug "u is undefined"?
My page consists of a display of photos and photo gallery as a special separate section in the PHP code divided using the "break".
Photos and photo galleries are displayed using the "Fancybox.js".
The first time when I try to open a photo, everything works fine but when I do it again after I refresh the page the Firebug display error "u is undefined".
The Jquery for the menu that I'm using for display these separate part of the page:
$(document).ready(function(){
$(".menu_rfr").bind('click', function() {
$("#main").html('<img src="img/spin.gif" class="spin">');
location.replace($(this).attr('rel'));
});
$(".menu_clickable").bind('click', function() {
$("#main").html('<img src="img/spin.gif" class="spin">');
$("#main").load($(this).attr('rel'), function(event) {
});
$(".menu_clickable").unbind("click");
});
});
The simplified PHP code looks like:
<?
if (!isset($a)) $a = '';
switch($a)
{
case 1:
default:
?>
<div class="menu_clickable prof_link" id="prof_info" rel="?a=2">Photos</div>
<div class="menu_clickable prof_link" id="prof_info" rel="?a=3">Gallery</div>
<div id="main"></div>
<?
break;//photos
case 2:
?>
<script type="text/javascript">
$("a.group").fancybox({
'titlePosition' : 'over',
'overlayShow':false
});
</script>
<?
<img src="tmb/1.jpg" border="0">
<?
break;
case 3: // photo gallery
?>
<script type="text/javascript">
$("a.groupg").fancybox({
'titlePosition' : 'over',
'overlayShow':false
});
</script>
<?
<img src="tmb/2.jpg" border="0">
<?
break;
}
?>
As I said this is a simplified code, and probably there are some errors in it. I just wanted to show where and how I'm using Fancybox.
Is there a conflict between the jquery code for the menu at the top of the page and this for fancybox or there is some other reason why I keep getting an error in Firebug "u is undefined" after opening the other part of the PHP page and attempts to re-opening photos?
View your HTML source and make sure you don't have FancyBox declared twice. I just had the exact same error pop up in firebug and this is what I found in my source:
<script language="javascript" type="text/javascript" src="./ext_scripts/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" href="./ext_scripts/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<script language="javascript" type="text/javascript" src="./ext_scripts/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
Not sure exactly why it happened, but if you nest your include and require_onces in your PHP like I unfortunately did, you can wind up with some very funky Javascript references.
You probably have the fancybox.js script included twice which is causing the issue. Please check all your files and remove the the ones that are not required.
I have this same bug as well - I think it is due to the the 'loading' divs being reset by the cleanup code. I have a VERY nasty fix:
Change:
if ($("#fancybox-wrap").length) {
return;
To: (To skip the multiple-init check)
if (false && $("#fancybox-wrap").length) {
And add:
$.apzFancyboxInit = fancybox_init;
after 'fancybox_init = function() {'
What this does is allow us to call the initialisation routine multiple times; and saves the function pointer to this routine in a global variable. All we have to do now is make sure we call the $.apzFancyboxInit function every time a fancybox is closed. The best place to do this is in the onClosed function handler; so (in my case), my calls look like this:
$.fancybox(
{
'showCloseButton' : true,
'type' : 'ajax',
'onClosed' : function()
{
$.apzFancyboxInit();
},
If you are using a "ripped" template you may find that there are the fancybox generated div written in tho the html template right above the </body> tag.
check if your html output has a div with the id of fancybox-wrap if you have JavaScript disabled, and remove that.
php sends html strings to html via ajax wrapped in <p class="select"></p> tags, css reads class perfectly. javascript/jquery does not. javascript/jquery wont even parse <p onclick="function()"></p>. What am i doing wrong?
heres my php (sends data via ajax fine)
echo "<p class='select' onclick='populate();' >{$row['song_name']} </p>";
heres my css (works fine)
p.select{color:#fff;padding: 5px;margin:0}
p.select:hover{color:#fff;background:#f60;cursor:pointer;}
heres my javascript
method 1 jquery.
$("p .select").click(function(){
var str = $(this).val();
alert(str);
});
method 2 onclick function.
function populate()
{
alert('here')
}
neither of the two methods respond at all. Guru why is this?
$("p .select").live ( "click" , function(){
var str = $(this).text();
alert(str);
});
See
Events/live
Binds a handler to an event (like
click) for all current - and future -
matched element.
Two things:
p .select will choose <p> tags containing an element with class select. p.select selects <p class="select">.
Why not move the populate function to within the live? I suspect the jquery live (or click) removes any explicit handlers.
Try this:
$("p.select").live("click",function()
{
var str = $(this).text();
alert(str);
populate();
});
I posted a working(in Firefox) example below. I think you forgot to put the jquery method inside the onload event. Beside the other (small) bugs...
<html>
<head>
<style>
p.select{color:#fff;padding: 5px;margin:0}
p.select:hover{color:#fff;background:#f60;cursor:pointer;}
</style>
<script src="jquery-1.3.2.min(2).js" type="text/javascript"></script>
<script type="text/javascript">
function bodyOnLoad() {
//instead of "p .select" "p.select"
$("p.select").click(
function(){
//changed val() into text()
var str = $(this).text();
alert(str);
});
}
</script>
</head>
<body onload="bodyOnLoad()">
<p class='select'>Songname</p>
</body>
</html>