I have a Google Instant style jQuery script which uses a jQuery tab script to define what search type the user wants. Currently, no matter what tab link you click on it will only query web.php?q=QUERY. Why could this be?
<script type="text/javascript">
$(document).ready(function(){
$("#query").keyup(function(){
var query=$(this).val();
var type=$("a").attr("id");
var yt_url=''+type+'.php?q='+query;
window.location.hash=''+type+'/'+query+'/';
$.ajax({
type:"GET",
url:yt_url,
dataType:"html",
success:function(results){
$('#results').html(results);
}
});
});
});
</script>
<ul>
<li>Web</li>
<li>Images</li>
<li>Videos</li>
<li>News</li>
<li>Social</li>
</ul>
<input type='text' id='query'>
<div id="results"></div>
You need to differentiate your clicks from your keyup. You need to store your request url and then change it when tabs are clicked, you also need to seperate your url and data for a get request.
So your js would be:
$(document).ready(function(){
$("#query").keyup(function(){
var query=$(this).val();
var type='web' //substitute text, default whatever
var yt_url=type+'.html';
alert(yt_url);
window.location.hash=''+type+'/'+query+'/';
$.ajax({
type:"GET",
url:yt_url,
data: type+"="+query,
error: function(a,b,c,d)
{
$("#results").html("A:"+a+"B: "+b+" C "+c);
},
dataType:"html",
success:function(results){
console.log("Result"+results);
}
});
});
$("a").click(function() {
var query=$("#query").val();
var type=$(this).attr('id');
var yt_url=type+'.html';
window.location.hash=''+type+'/'+query+'/';
$.ajax({
type:"GET",
url:yt_url,
data: type+"="+query,
error: function(a,b,c,d)
{
console.log("A:"+a+"B: "+b+" C "+c);
},
dataType:"html",
success:function(results){
console.log("Result"+results);
}
});
})
});
Related
I am trying to pass data from a hyperlink to a page via a get request using Ajax
Initially I am able to do this without Ajax directly as below
<a id="link" href="page.php?id=12&pid=12" >pass data</a>
and I catch below in php
<?php $_GET['id'] ?>
<?php $_GET['pid']?>
now I want to do this using Ajax so the page does not need to load
I am trying with the below
<a class="choice" id="link" href="page.php?id=12&pid=12" >pass data</a>
$(document).ready(function() {
$(".choice").click(function(e) {
e.preventDefault();
$.ajax( {
<!--insert.php calls the PHP file-->
url: "votes.php",
method: "get",
dataType: 'html',
success: function(strMessage) {
$("#vote").html(strMessage);
}
});
});
});
but I am unable to get this to work. I need help on the correct implementation of send data using Ajax to my php file
First of all, a <script> tag is required for JavaScript part. Ajax URL can read from <a> tag href attribute by $(this).attr('href'). Also based on your code, a div with vote id is needed so <div id="vote"></div> added.
<a class="choice" id="link" href="page.php?id=12&pid=12" >pass data</a>
<div id="vote"></div>
<script>
$(document).ready(function() {
$(".choice").click(function(e) {
e.preventDefault();
$.ajax( {
url: $(this).attr('href'),
method: "get",
dataType: 'html',
success: function(strMessage) {
$("#vote").html(strMessage);
}
});
});
});
</script>
Document
pass data
<script>
$(document).ready(function() {
$("#choice").click(function(e) {
e.preventDefault();
$.ajax({
url: $(this).attr('href'),
method: "GET",
dataType: 'html',
success: function(strMessage) {
$("#vote").html(strMessage);
}
});
});
});
</script> </body>
I have 2 buttons "removeD" and "updateRecord"(by id) and I have written same ajax for them as follows:
$.ajax({
url: 'DB/tableDisplay.php',
type: 'POST',
data: 'id='+uid,
dataType: 'html'
})
But in tableDisplay.php I want to have different functionality for both the buttons.How to check the id of the button clicked in php?
I've tried using :
if(isset($_POST['removeD'])){
}else{
}
But this is not working.
Try this:
$(document).ready(function(){
$('button').click(function(){
var id = $(this).attr('id');
$.ajax({
url: 'DB/tableDisplay.php',
type: 'POST',
data: {id: id},
dataType: 'html'
})
});
});
$('body').on('click','#id1',function(){
$.ajax({
url : 'url',
data : {variable:values},
type : 'html',
dataType : 'GET/POST',
success : function(data){
console.log('Message after Success');
},
error : function(){
console.log('Error Message')
}
});
});
In your url page you can find whether ajax request is posted or not
if(isset($_REQUEST['variable'])){
write your php code here........
}
Try the following code to detect the button clicked:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.click-button').on('click',function () {
var button_id = $(this).attr('id');
if(button_id == 'removeD'){
alert('removeD button clicked');
}else if(button_id == 'updateRecord'){
alert('updateRecord button clicked');
}
});
});
</script>
</head>
<input type="button" class="click-button" id="removeD" value="removeD">
<input type="button" class="click-button" id="updateRecord" value="updateRecord">
You can use target it return which DOM element triggered the event. see below code its too easy and short to get id of clicked element.
$('button').click(function(e){
alert(e.target.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="remove">Remove</button><br>
<button id="update">Update</button><br>
I am working on a login form that gets loaded inside a div (parent of .messageboxcontent) with .load on a button press. It all works till the 3rd time I press submit where the div disappears again (I guess by reload of the page and the div CSS is hidden). The URL has the $_POST data added after the 3rd submit (?username=<whatever_I_Fill_In_As_3rd>).
<div class="messageboxcontent">
<form id="ajaxform">
<table>
<tr>
<td>Gebruikersnaam: </td><td><input type="text" name="username" /></td><td>
</tr>
</table>
<input type="submit" value="Registreer" id="submit" />
</form>
</div>
<script>
$('form').on('submit', function( event )
{
var dataString = $(this).serialize();
event.stopPropagation();
//event.preventDefault();
$.ajax(
{
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$('.messageboxcontent').html(response);//FIXED by changing .messageboxcontent to parent.
}
});
return false;
});
</script>
I tried different kind of approaches like:
$('form').submit(function(event) {
//..
}
//
$('#ajaxform').submit(function(event) {
//..
}
//
$(document).ready(function()
{
$("#ajaxform").on("submit", function( event )
{
var dataString = $(this).serialize();
//event.stopPropagation();
event.preventDefault();
$.ajax(
{
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$("div.messageboxcontent").html(response);
}
});
return false; //with and without this.
});
});
Be consistent with quotes. Also close your div (<div class="messageboxcontent"></div>)
Try this:
$(document).ready(function(){
$("#ajaxform").on("submit", function( event ){
var dataString = $(this).serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$("div.messageboxcontent").html(response);
}
});
return false;
});
});
Hope that helps.
return false; or event.preventDefault(); inside your ajax function would stop the page from reloading.
Secondly, jQuery works with selector methods via class or id - so, in your case, you will want to use $('#ajaxform').
Lastly, the possible reason why you are facing with unexpected result like after 3rd time is because your form is wrapped inside a div that you want to manipulate the result. So, try rewrapping your DIV element to this: <div class="messageboxcontent"></div> and have your <form> stand on its own separately from messageboxcontent div.
I have a dialog box that loads from an ajax call.. It works good. I want to have a link inside my dialog box that updates a DB and loads the results via ajax to the parent page, without my dialog closing. Is this even possible? Here is what I have so far.
This is what my parent page called deals_calendar.php looks like. The ajax call works fine and opens a dialog box that is loaded with content from get_deals.php.
<script type="text/javascript">
$("#calendar td").on('click', function() {
var data = $(this).data();
$.ajax({
type:"GET",
url: "get_deals.php",
data: { monthID: data.month, dayID: data.day, yearID: data.year },
success: function(data){
var title = $( "#dialog" ).dialog( "option", "title", "Deals" );
$('#dialog').dialog({
open: function (event, ui){
$('a').blur();
$(this).scrollTop(0);
}
});
$("#dialog").html(data).dialog("open");
}
});
$("#dialog").dialog(
{
bgiframe: true,
autoOpen: false,
height: 450,
width:900,
modal: false,
closeOnEscape: true
}
);
});
</script>
<div id="dialog" title="Dialog Title"> </div>
<div id="return"></div>
Then in my get_deals.php script I have this
<script type="text/javascript">
$('#click').live('click', function(){
$.ajax({
type:"POST",
url: "deals_add_to_queue.php",
data: { monthID: data.month, dayID: data.day, yearID: data.year },
success: function(data){
alert("Please work!");
("#return").html(data);
}
});
});
</script>
<a id="click" href="#">click me</a>
I can't get this ajax call to fire and update the content on deals_calendar.php. Any help would be great. thanks
If the event is not being fired, you need to use event delegation.
$('body').on('click', '#click' function(){
$.ajax({
type:"POST",
url: "deals_add_to_queue.php",
data: { monthID: data.month, dayID: data.day, yearID: data.year },
success: function(data){
alert("Please work!");
("#return").html(data);
}
});
});
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var content = $('#content').html();
var data = {"content":content};
$.ajax({
type: "POST",
dataType: "json",
url: "ajax.php",
data: {content:content},
success function (data) {
alert('Hello!');
}
});
});
});
</script>
<div id="content"><?php echo $content; ?></div>
ajax.php
echo json_encode($_POST['content']); ?>
Nothing happens... WhatI really want to achieve is to get that alert box and get the return data, but I am lost since I don't get any errors or nothing.
You miss " : " after success
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var content = $('#content').html();
var data = {"content":content};
$.ajax({
type: "POST",
dataType: "json",
url: "ajax.php",
data: {content:content},
success: function (data) {
alert('Hello!');
}
});
});
});
</script>
<div id="content"><?php echo $content; ?></div>
As #sofl said, if you change it to success:function (data) { it will work!
Just remember that the $("a") from $("a").click(function() { called when click in a link tag like <a href"">.
If you are using an input ou button with a class="a" you should change the code to $(".a").click(function() {
(just add a . before a)
PS: If you're using a link, you should set the href="" to href="#" to work.