I was using this code earlier today and it worked fine, then I apparantly changed something and it doesnt work. ive tried reinstalling jQueryUI but it doesnt help.
<script type="text/javascript">
$(function() {
function loadpage(webpage) {
window.location.replace( webpage );
}
$("#searchform").autocomplete({
source: "search.php",
minLength: 2,
select: function(event, ui) {
loadpage(ui.item ? ("http://www.tf2heatmaps.net/maps/" + ui.item.value + "/"));
}
});
});
</script>
<div class="ui-widget">
<label for="searchform">Search: </label>
<input id="searchform" class="textbox">
</div>
search.php returns valid JSON so I don't believe the problem is there.
You should be getting a missing : in conditional expression as the parameter you give to loadpage is an incomplete shorthand if
In other words you are missing the else part..
Related
Hi iam learning jquery with php. I created very small php and jquery code to getting value but it's not working. I check console but not giving any information i have referred jquery api documentation same process i followed but no use. How can i solve this.
<script>
$(document).ready(function(){
$("#submit").click(function(){
var term= $("#sterm").val();
$.post('oopsdata.php', {nwterm: term}, function(data){
("#container").html(data);
});
});
});
</script>
<body>
<form class="" action="" method="post">
<input type="text" name="" value="" id="sterm">
<input type="submit" name="" value="Search term" id="submit">
</form>
<div id="container">olddata</div>
PHP Code
<?php
$newterm = $_POST['nwterm'];
if($newterm == 'bio'){
echo "Request received This is the new data"
} else {
echo "no data received;"
}
?>
There are few issues with your code, such as:
You need to prevent your form from being submitted in the first place. Use jQuery's .preventDefault()
Missing $ before ("#container").html(data);
Based on the above two points, your jQuery code should be like this:
$(document).ready(function(){
$("#submit").click(function(event){
event.preventDefault();
var term= $("#sterm").val();
$.post('oopsdata.php', {nwterm: term}, function(data){
$("#container").html(data);
});
});
});
There are two syntax errors in your PHP code. Missing ; in both your echo statements.
So based on the above point, your PHP code should be like this:
<?php
$newterm = $_POST['nwterm'];
if($newterm == 'bio'){
echo "Request recieved This is the new data";
}else{
echo "no data recieved";
}
?>
I have the following 2 files :
<?php
?>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {
$("form").submit(function () {
var textu = $("#textu").val();
$.post("index.php", function (data) {
alert(data);
});
return false;
});
});
<script>
<form method="post" action="">
<input type="text" id="textu" name="textu">
<input type="submit" value="send" id="send">
</form>
Now I want to style the data that it's returned from the index.php where I sent the values.
The problem is that if I use something like <h1> or any html tag in the file index.php the test file will just return it as plain text for example <h1>text</h1>.
I want to style the data that comes from index.php but I can't manage to do it because it keeps returning me the plain text and I can't use any html tags or anything apart from PHP in that file. How can I do that ? Any ideas ?
try this:
html
<input type="text" id="textu" name="textu">
<input value="send" id="send">
jQuery:
$("#send").click(function(){
var textu = $("#textu").val();
$.post("index.php",{"textu":textu},function(data){
alert(data);
});
});
Add datatype html as third parameter to $.post - http://api.jquery.com/jQuery.post/
$.post("index.php", function (data) {
alert(data);
}, 'html');
I know this has been asked some time, but the solutions before did not help, and I do not understand if I am missing something
I have simple php/hmtl page with an index.php where I include the different content php pages with a simple GET check:
if (isset($_GET['section'], $section[$_GET['section']])) {
include $section[$_GET['section']];
} else {
include $section['home'];
}
Now one of these sections contains a form which I want to do some magical ajax/jquery action with.
In my javascript file which is loaded at the bottom of the index.php I have following jquery ajax stuff
//ajax load domain search script
$(document).ready(function(){
$('#lookup_domain').live("click", function(e) {
e.preventDefault();
searchVal = $('#domain').val();
topLevel = $('.custom_select').val();
domain = searchVal + '.' + topLevel;
$.ajax({
type: 'GET',
url: 'script_domain.php',
data: 'domain=' + domain,
dataType: 'html',
beforeSend: function() {
$('#result').html('<img style="margin-left: 80px;margin-top: 30px;" src="_assets/img/loader.gif" alt="loading..." />');
if (!searchVal[0]) {
$('#result').html('<p>Syötä domain nimi.</p>');
return false;
}
},
success: function(response) {
$('#result').html(response);
},
error: function(response) {
$('#result').html('<p>Haussa virheitä.</p>');
}
});
});
});
I thought it would be enough to use
$(document).ready(function(){
and the live method (i have jquery 1.7.1 so live should be working?)
$('#lookup_domain').live("click", function() {
but unfortunatedly this is not working, the form just sends it to itself and loads the page again.
Here is the form:
<?php
if(!defined('indexcalled')){die('Direct access not premitted');}
?>
<div id="domain_search">
<h5>hae verkkotunnusta</h5>
<form action="#" method="get" class="domain_form">
<input type="text" name="domain" class="domain_input" />
<div class="select_wrap">
<select class="custom_select">
<option value="fi">.FI</option>
<option value="com">.COM</option>
<option value="net">.NET</option>
<option value="me">.ME</option>
<option value="info">.INFO</option>
</select>
</div><!--/select wrap-->
<input type="submit" value="Syötä" class="domain_submit_btn" id="lookup_domain"/>
</form>
<div class="clear"></div>
</div><!--/domain search-->
What am I missing here? Is there any good documentation about how to use jquery with this kind of dynamical page setup?
EDIT
My original question was, how to handle these kind of elements properly with jquery, because they are included later on.
I found that I should be working with on() instead of live because its deprecated in 1.7 too. So I edited the code like this:
$(document.body).on("click", '#lookup_domain', function(e){
e.preventDefault();
$(document.body).on("click", '#domain', function(event){
alert($(this).text());
});
But the alert does not work, it does nothing. What am I missing here?
You're calling e.preventDefault(), which should keep the form from submitting, however you are not passing the event object into your click handler. Update it to this and it should work:
$('#lookup_domain').live("click", function(e) {
e.preventDefault();
...
});
Because you are using a submit button for your live click you need to disable the form submission.
There are two solutions:
1, Return false on the click event:
$('#lookup_domain').live("click", function() {
// all of your code
return false;
})
2, add an onsubmit attribute to your form:
<form action="#" method="get" class="domain_form" onsubmit="return false;">
</form>
Thanks for all guys who helped me in the chat, the correct method is to first have the document ready, then use .on() with click method with body to access the element created afterwards. Then just with normal .val() to get the values, like this:
$(document).ready(function(){
$(document.body).on("click", '#lookup_domain', function(e){
e.preventDefault();
searchVal = $('#domain').val();
Solution:
The problem is that in my php code, I have a debug message: print $_GET['term'];
It also return the result to client.
I am implementing search with autocomplete feature, but hitting some issues when connecting to php, here is my code
html:
<input type="text" id="leaderboard_search" />
search.js:
jQuery(function($) {
$( "#leaderboard_search" ).autocomplete({
minLength: 1,
width: 240,
source: 'search.php'
});
});
search.php:
<?php
$values = array('abc','def');
echo json_encode($values);
?>
When I type something. It just doesn't show anything. I have debugged into php code, search.php get called with no problem. So I suspect the problem is on jquery side.
I am using jqueryui 1.8
Update: to simplify the problem, I changed to embedded js, but still doesn't work:
html code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#leaderboard_search" ).autocomplete({
minLength: 2,
width: 240,
source: 'search.php'
});
});
</script>
<html>
<fieldset class="searchinput"><input type="text" id="leaderboard_search" /></fieldset>
</html>
try this as your search.php:
$values = ['abc','def'];
echo json_encode($values);
according to the jquery documentation here http://jqueryui.com/demos/autocomplete/
it states that the result either can be a name value pair or just an array or strings.. so instead u shud echo smthing like this.
echo '["abc","def"]';
What's wrong here? The alert function was working until I added this new function to it.
Is there anything I am doing wrong? It just simply doesn't fire the alert anymore.
<input value="1" type="checkbox" name="salgsvilkar" id="checkbox2" style="float:left;"
/>
{literal}
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
//checkbox
$("#scrollwrap").click(function(){
$("#scrollwrap").toggleClass('highlight');
});
});
$(function(){
//button
$("#fullfor_btn").click(function(e){
if(!$("#checkbox2").is(':checked') == false)
{
alert("Please accept the terms of sale.");
e.preventDefault();
}
});
});
</script>
{/literal}
<button type="submit" class="submit" name="{$method}" id="fullfor_btn" title="Fullfør bestillingen nå" value=""> </button>
Instead of:
if(!$("#checkbox2").is(':checked') == false) {
why not just use the much more readable:
if($("#checkbox2").is(':checked')) {
EDIT: If your intention is for the alert to fire when the checkbox is not checked:
if(!$("#checkbox2").is(':checked')) {
Your logic is probably not what you intended, as karim79 said.
if(!$("#checkbox2").is(':checked') == false)
is identical in function to
if($("#checkbox2").is(':checked') == true)
so your alert will only trigger when the checkbox is checked.
you can put all your code in the same $(function(){ code }) in your example, you are setting the document ready twice
$(function() {
//checkbox
$("#scrollwrap").click(function(){
$("#scrollwrap").toggleClass('highlight');
});
//button
$("#fullfor_btn").click(function(e){
if($("#checkbox2").is(':checked'))
{
alert("Please accept the terms of sale.");
e.preventDefault();
}
});
});
Works for me.
Though it seems a little odd that you'd trigger the alert when the checkbox is checked, instead of when it is not.