need to call ajax function from inside jquery modal dialog box - php

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);
}
});
});

Related

Data of a Form sent in 2 different pages

I have a form where the data is sent through an email when I click on a button.
The issue I have is that I want the same data to be inserted into a table.
I found a solution on here: send the form values to multiple pages
but I don't know how to insert that portion of code in mine.
This is the code I put in my page:
<script language="Javascript">
<!--
$('form').submit(function() {
$.ajax({
async: false,
method: 'POST',
url: 'submit.php',
data: $( this ).serialize(),
success: function() {
window.location.href = "http://stackoverflow.com"; //redirect to this page
}
});
$.ajax({
async: false,
method: 'POST',
url: 'appuntamento.php',
data: $( this ).serialize(),
success: function() {
window.open("http://www.stackoverflow.com"); //this page will be open in new tab
}
});
});
-->
</script>
The fact is that I don't know if I inserted it right and I don't know how to call the function on the button.
You don't exactly have to call the function on the button. If you include the js in your html or php file which contains the form tag <form> once the button with type="submit" is clicked the event will be triggered.
However, if you must use a button that doesn't automatically trigger form submit on click then you can trigger manually by adding an id to the form and submit onclick of the button
if you have
<form id="target">
<input type="text" value="Hello there">
<input type="submit" value="Go">
</form>
You can do this
$('form').submit(function() {
$.ajax({
async: false,
method: 'POST',
url: 'submit.php',
data: $( this ).serialize(),
success: function() {
window.location.href = "http://stackoverflow.com"; //redirect to this page
}
});
$.ajax({
async: false,
method: 'POST',
url: 'appuntamento.php',
data: $( this ).serialize(),
success: function() {
window.open("http://www.stackoverflow.com"); //this page will be open in new tab
}
});
});
If you have
<form id="target">
<input type="text" value="Hello there">
<button id="submit-form">Submit</button
</form>
you can have this
$( "#submit-form" ).click(function() {
$( "#target" ).submit();
});
$('form').submit(function() {
$.ajax({
async: false,
method: 'POST',
url: 'submit.php',
data: $( this ).serialize(),
success: function() {
window.location.href = "http://stackoverflow.com"; //redirect to this page
}
});
$.ajax({
async: false,
method: 'POST',
url: 'appuntamento.php',
data: $( this ).serialize(),
success: function() {
window.open("http://www.stackoverflow.com"); //this page will be open in new tab
}
});
});

How to check id of button clicked in php

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>

Button click, run a php function with ajax

I want to run my php function when I click on this button, This works fine on Chrome and Firefox, But not on Safari, I don't know why :( Please help me...
My PHP Function is : complete_automate_xml();
My Button is : <button id="btn" onclick="alertWithoutNotice();" class="deletebtn button button-next">Verstuur E-mails</button>
My Code is :
<script>
jQuery(document).ready(function($) {
$('#btn').click(function(){
$.ajax({
type: "POST",
url: '../wp-admin/admin.php?page=spd_xml_importer',
data: {action: 'call_this'},
success: function (html) {
alert(html);
}
});
});
});
</script>
<div class="email-bt">
<script>function alertWithoutNotice(message) {
setTimeout(function () {
alert('E-mails zijn verzonden');
}, 300);
}</script>
<button id="btn" onclick="alertWithoutNotice();" class="deletebtn button button-next">Verstuur E-mails</button>
</div>
<?php
if ($_POST['action'] == 'call_this') {
complete_automate_xml();
}
i was thinking more like this - but I'm not 100% sure this is the issue with Safari I just wondered whether there was confusion in the browser as to which function to invoke.
<script>
jQuery(document).ready(function($) {
$('#btn').click(function(){
setTimeout(function() {
alert('E-mails zijn verzonden');
}, 300);
$.ajax({
type: "POST",
url: '../wp-admin/admin.php?page=spd_xml_importer',
data: { action: 'call_this' },
success: function (html) {
alert(html);
}
});
});
});
</script>
<div class="email-bt">
<button id="btn" class="deletebtn button button-next">Verstuur E-mails</button>
</div>

Jquery Submit Ajax

I can't seem to make this to work. I'm trying to submit form using jquery dialog and I want to receive in php so I can use $_POST.
Any idea?
HTML:
<div id="table_rows_form">
<form id="fieldsform" action="system/create">
<label for="fields">How many fields are needed?</label>
<input type="text" id="fields" name="fields" />
<button type="submit">Submit</button>
</form>
</div>
Javascript:
$(document).ready(function() {
$('#table_rows').on('click', function() {
$('#table_rows_form').dialog({
open: function() {
$(this).find('[type=submit]').hide();
},
draggable: true,
modal: true,
resizable: false,
closeOnEscape: false,
width: 'auto',
minHeight: 235,
title: 'Number of Fields',
dialogClass: 'no-close',
buttons: {
"Send": function() {
$('#fieldsform').submit(function(event) {
var formData = {
'fields': $('input[name=fields]').val()
};
$.ajax({
type: 'POST',
url: $('#fieldsform').attr('action'),
data: formData,
dataType: 'json',
encode: true
});
});
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
return false;
});
});
PHP:
print_r($_POST);
The dialog opens correctly but when pressing send button doesn't do anything and doesn't gives any error at the console. Any idea about the error? I'm a newbie with jquery.
You're just adding a submit handler with your code $('#fieldsform').submit( ... ) so it doesn't trigger anything.
Rather, you should do that on document ready, and in the click handler for "Send" button, call $('#fieldsform').submit();

Fixing jQuery instant search script tabs

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);
}
});
})
});

Categories