I have a PHP script (ajax.php) which loads content from a MySQL db. That script refreshes new content every N seconds via AJAX. The AJAX content has three links of which one is to archive the row in MySQL. When a user clicks the archive button, I want a jQueryUI dialog to open confirming deletion. Pressing cancel will abort, while OK will trigger an AJAX submission to delete the row from MySQL. Deleting row from table with modal form confirmation (jQuery UI)? is an example of the dialog half of what I want to do. I need this to work along with the ajax/refresh.
Because of the link itself being loaded by AJAX, I cannot run the dialog (or the delete script). How do I load the dialog script and perform the AJAX delete submission? I'm trying to use the GlobalEval but I do not understand the documentation. The examples I've found seem to be for setting variables only. The following script is what I'm trying to build it from:
var id = $('.refreshN').data('id');
var table = $('.refreshN').data('table');
var rtime = $('.refreshN').data('time');
$('.refreshN').load('ajax.php?id='+id+'&table='+table).fadeIn("slow");
var autoLoad = setInterval(
function ()
{
$('.refreshN').load('ajax.php?id='+id+'&table='+table).fadeIn(5000);
var script = $(function (){
$('.modalLink').click(function () {
$('#dialog').dialog('open');
return false;
});
});
eval(script);
}, rtime); // refresh page every N seconds
Define the variable script with an normal javascript function and add () to execute it.
Try this instead of your current js:
var id = $('.refreshN').data('id');
var table = $('.refreshN').data('table');
var rtime = $('.refreshN').data('time');
$('.refreshN').load('ajax.php?id='+id+'&table='+table).fadeIn("slow");
var autoLoad = setInterval(
function ()
{
$('.refreshN').load('ajax.php?id='+id+'&table='+table).fadeIn(5000);
}, rtime); // refresh page every N seconds
$(document).on('click','.modalLink',function(e){
e.preventDefault();
$('#dialog').dialog('open');
})
Related
So have a datatable wherein if i click a cell, it redirects me to another page. The problem is I need to store the clicked data for the next page. I wanted to store /tablez.cell(this).data()/ inside a session but I'm not sure if it's possible. Here's my code so far:
var tablez= $('#table').DataTable();
$('#table tbody').on( 'click', 'td', function () {
console.log(tablez.cell(this).data());
window.location.href = "FH_Suppliers_Add.php";
});
I'm using the code below to load the results from a database query in a PHP page:
click me
$('.item > a').click(function(){
var url = $(this).attr('href');
$('.item-popup').fadeIn('slow');
$('.item-content').load(url);
return false;
});
All works fine right now, but the next bit of functionality is a problem. Inside results.php which ajax loads into .item-content, I have another link that is supposed to update and increment click counts for that link, also without refreshing. The functional PHP bits all work fine. My only problem is the jQuery/AJAX aspect of things.
Maybe I'm going about it the wrong way, but what I really want to do is have a page with a container that loads the result of of a database query from a PHP page, but also in that container, I have a link/button whose click count I want to be able to save and update all without refreshing.
EDIT
I guess the most important question I need answering is: When the ajax on index.php loads the content of results.php into the container in index.php, do browsers treat the newly loaded ajax content as part of the parent page (index.php) or is it still treated as a different page loaded into the container like an iFrame?
If say for example it is click event then you need to write
$('input element').on('click',function() {
// write code over here
})
Dont know for sure if you want this, When returning the data in the load function you will have to add a link like this in the resultant HTML which will be clickable:
Now in javascript you need to catch the click event of the link like this:
<script type="text/javascript">
$(function(){
$(".item-content").on("click", ".clickable", function(){
var counter = $(this).data('counter');
var id = $(this).data('id');
$.ajax({
url : //your url here,
data : {'id' : id, 'counter' : counter },
type : 'POST',
success : function(resp){
//update the counter of the current link
$(this).data('counter', parseInt( $(this).data('counter') )+1 );
//whatever here on successfull calling of ajax request
},
error : function(resp){
}
});
});
});
</script>
i am using MVC and my design for my website is that there is header and body and footer,
every page in my website will have the same header and the same footer, but with different body
and for ever page there is a JS file contains the jquery calls
and for many many pages when it is opening, jquery call works and get data from database using ajax and put that data in that page
my question is : sense the jquery calls begins with $(document).ready, so when i open any page, all the jquery call starts, i don't want that, but i want just the jquery for that page which is opening to be loaded
example
this jquery just for a page
$(document).ready(function(){
$.getJSON("http://localhost/Mar7ba/Cell/getAllCountries/TRUE",function(data){
var select = $("#countrySelector");
var options = '';
for(var i=0;i<data.length;i++){
options += "<option>"+data[i]+"</option>";
}
select.html("<option>Select Source</option>"+options);
});
});
and this jquery for another page , but it is loaded when i load the first page
$(document).ready(function(){
$.getJSON("http://localhost/Mar7ba/Type/getAllTypes/TRUE",function(data){
var options = '';
options+="<option>Select Type</option>";
for(var i=0;i<data.length;i++){
options += "<option>"+data[i]+"</option>";
}
$("#addPlace #apTypeSelect").html(options);
});
});
Test for the existence of the elements you're operating on, before you fire off the AJAX method. For instance, in your first example:
$(document).ready(function(){
var select = $("#countrySelector");
if (select.length) { // must test .length; 'select' always exists even if it's empty
$.getJSON("http://localhost/Mar7ba/Cell/getAllCountries/TRUE",function(data){
var options = '';
for(var i=0;i<data.length;i++){
options += "<option>"+data[i]+"</option>";
}
select.html("<option>Select Source</option>"+options);
});
}; // end if
});
If you don't want a script to run on a page then either:
Don't put it on the page in the first place or
Wrap it in a conditional that checks if running it would be appropriate for the current page
I think if you will put all the startup functions of all pages in document.ready then function will become too lengthy and readability will be effected. You should write different start-up function for each page and call them from page on loading , in this your code will remain simpler e.g.
In js file
function InitialFunctionOfPage1()
{//define all prerequisites}
function InitialFunctionOfPage2()
{//define all prerequisites}
and in each page you can relevant function on document.ready , ample for page 1
$(document).ready(function()
{
InitialFunctionOfPage1();
}
I'm creating a system using jquery and php that pops up a small div when they get a private message on my website. The alert itself I have figured out, but I'm not sure how to gracefully cancel it.
I've made it so that clicking a link "[x]" hides the div, but how can I make the link send enough information to a php script to mark this alert as "read" in the database?
All the php script would need is the id of the alert in the database, but I've got no idea how to make it do that. There is also more than one notice displayed at a time, so I would need a way to have each link send the information necessary to the php script.
Here's the jquery that loads the div and the php that powers it.
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#mc').load('/lib/message_center.php').show("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.delete').live('click', function(){
$('#mc').hide('slow');
});
});
</script>
The easiest solution would be to set the message you are displaying to read at the moment you display it. That would not require any additional communication between the browser and the server, just do it at the end of your /lib/message_center.php script for the messages you are displaying at that moment.
Set the href attribute for your X produced by php like href="javascript:killbox(5);" and give your div a unique id (i.e.id="boxtokill5"). Then you could use something like this:
function killbox(id){
$("#boxtokill"+id).hide();
var packet = {};
packet.clickedlinkid = id;
$.get("destination.php",packet,function(data){
// data = Response (output) from script
});
}
The destination.php receives the ID by $_GET['clickedlink'].
I have a report page which dynamically generate the record and saved in the database. From database i need to show the dynamically updated records in the page without reload or load the contents using setInterval time function.
see my question Here
and use setInterval function with it
var refreshId = setInterval(function()
{
$("#yourContainer").load('yourPage.php');
}, 5000);
offcourse Jquery is prereq for this... so download jQuery from here and include it in your page
<script href="yourlink to the file"></script>
this code http://pastie.org/937213 loads ajax.php to #live div every 3 seconds