I have a codeigniter project where data is fetched from the database and shown in a tabular form in a view inside a div. The div is auto refreshed using ajax every 5 seconds.
The problem I am facing is after about 2-5 minutes, the browser starts to lag, and hangs. I have to then force quit my browser, clean up my memory to bring the system back to normal.
My Controller code
function view_data()
{
$this->load->model('site');
$data['list'] = $this->site->get_data()
$this->load->view('data',$data);
}
Model Code
function get_data()
{
$query = $this->db->get('data');
return $query->result_array();
}
View Code
<script>
var auto_refresh = setInterval(
function()
{
$.ajaxSetup({ cache: false });
$('#loaddiv').empty().load(window.location.href);
}, 1000);
</script>
<body>
<div id="loaddiv"><table>.....DATA...</table></div>
Related
I am porting an application to WordPress. It uses a form to select what attributes the customer is looking for in an Adult Family Home via checkboxes and drop-downs. It re-searches the database on each onchange and keyup. Originally I had the application standalone in PHP, but when I migrated it to WordPress I started having issues.
Currently in WP I have the code conditionalized ($DavesWay == 1) to do ajax the normal no-WordPress-way and ($DavesWay == 0) to do it the WordPress-way.
In the non-WordPress-way, the ajax works fine EXCEPT that I get a WP header and menu between the search form and the results-div that Ajax puts the data in. I get no errors from WP or in the JS console. In the WP-way The search form displayed, but nothing happens when I check any of the checkboxes. The JS console displays
POST http://localhost/demo4/wp-admin/admin-ajax.php 400 (Bad Request)
But I don't see any way to tell exactly what it is complaining about. How should I troubleshoot this?
Troubleshooting = Examine the HTML output, lots of echos and exits in PHP code, look at JS console.
function submitPg1(theForm) {
// Used with onChange from "most" form elements, but not on those that change the page
// rather than the select criteria. Such as rowsPerPage, pageNumber etc.
setById("pageNo", "1"); // set inital page
mySubmit();
}
function mySubmit(theForm) { // The actual ajax submit
// DO NOT set page number
jQuery.ajax({ // create an AJAX call...
data: jQuery("#asi_search_form").serialize(), // get the form data
type: jQuery("#asi_search_form").attr("method"), // GET or POST
url: jQuery("#asi_search_form").attr("action"), // the file to call
success: function (response) { // on success..
jQuery("#result").html(response); // update the DIV
}
})
}
function setById(id, value) { // Used to set vales by Id
x = document.getElementById(id).value;
x.value = value;
}
// 1st submit with blank selection
jQuery(document).ready(function () { submitPg1(this.form) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Code fragments: (from the displayed page source)
<div id="asi_container" class="asi_container" >
<noscript><h2>This site requires Javascript and cookies to function. See the Help page for how to enable them.</h2></noscript>
<div id="searchForm">
<form id="asi_search_form" name="asi_search_form" method="post" action="http://localhost/demo4/wp-admin/admin-ajax.php">
<input type="hidden" name="action" value="asi_LTCfetchAll_ajax" style="display: none; visibility: hidden; opacity: 0;">
<table id="greenTable" class="asi_table" title="The Green areas are for site administration, not typical users">
<tbody>
PHP code:
$DavesWay = 0;
if ($DavesWay == 1){ //echo "Daves Way Setup"; // Dave's way, which works but prints the menu twice
if( $operation == "submit"){
require("asi_LTCfetchAll.php"); // for each onchange or onkeyup
}else{
add_filter( 'the_content', 'asi_tc_admin', '12' ); // Initial page refresh # must be >12
}
}else{
// The WordPress way that I could't get to work -- asi_LTCfetch never gets called
function asi_LTCfetchAll_ajax(){
//echo "<br /> Goto to Submit function"; // DEBUG
require($asi_plugin_dir . "/includes" . '/asi_LTCfetchAll.php');
}
add_action( "wp_ajax_asi_LTCfetchAll_ajax", "asi_LTCfetchAll_ajax" ); // admin users
add_action( "wp_ajax_nopriv_asi_LTCfetchAll_ajax", "asi_LTCfetchAll_ajax" ); // non-logged in users
add_filter( "the_content", "asi_tc_admin", "12" ); // Initial page refresh # must be >12
}
Try changing the JavaScript to the way WordPress recommends it in their documentation:
var data = {
'action': 'my_action',
'whatever': 1234
};
jQuery.post(ajaxurl, data, function(response) {
alert('Got this from the server: ' + response);
});
I suggest trying following URL: https://codex.wordpress.org/AJAX_in_Plugins
Also you can use the plugin: https://wordpress.org/plugins/ajax-search-lite/
I am new to ASP.NET core.
I am loading a different view under components folder using view component based on a condition.
<div class="container" id="patientLayout">
#await Component.InvokeAsync("PatientView", new {model = Model})
</div>
public async Task<IViewComponentResult> InvokeAsync(PatientTabViewModel model)
{
switch (model.Id)
{
case 3:
PatientMessageViewModel msgModel=GetMessagesViewModel(model.PatientId);
return await Task.FromResult(View("_messages.cshtml", msgModel));
}
}
I have a $(document).ready() function in _Messages.cshtml
<script type="text/javascript">
$(document).ready(function () {
console.log('ready function fired');
}
});
</script>
Issue: This ready function is getting fired for first time only but next time onwards its not getting fired,but breakpoint getting hit at case 3 every time.
Could you please provide some info/solution for this?
Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.Reference :$( document ).ready()
I know it has been given some answers but I will go for it :). As the title says i want to add popover bootstrap but with ajax loaded content. my html, but i want a Loading message to appear first and then the content.
<p class='entry' data-adjaxload = '/calendar/entry/1'>Title1</p>
<p class='entry' data-adjaxload = '/calendar/entry/2'>Title2</p>
<p class='entry' data-adjaxload = '/calendar/entry/3'>Title3</p>
my django view is the following
def entry_details(request, entry_id):
entry = get_object_or_404(Entry, pk=entry_id)
args = dict(entry=entry, user=request.user)
if request.is_ajax():
return render_to_response('mycal/ajax/entry_details.html', args)
else:
entry_form = EntryForm(instance=entry)
args.update(entry_form=entry_form)
return render_to_response('mycal/entry_details.html', args)
Pretty simple. I am using the same view to either load html content via ajax in the popover, or a details page via normal get request
the ajax details page:
<div class="entry">
<p>{{entry.title}}</p>
<p>{{entry.date}}</p>
<p>{{entry.customer}}</p>
</div>
and the script
$(document).ready(function(){
$('p.entry').each(function (){
var i = $(this);
$(i).bind('mouseenter', function(){
i.popover({
html:True,
title:i.html(),
content:'Loading'
}).popover('show');
$.ajax({
url:i.data('ajaxload'),
dataType:'html',
success:function (data){
i.popover({content:data}).popover('show');
}
});
});
$(i).bind('mouseleave', function(){
i.popover('hide');
});
});
});
But whilst it does run tha ajx and fetches the html, it won't load them onto the popover. How can I change that?
Just fiddled what you are looking for with popover content being updated dynamically using echo/json.
Just roll over the p element and wait for the 3 second delay.
If as you say, the data is being loaded properly then the only change needed is:
var popover = i.data('popover');
popover.options.content = data.text;
i.popover('show');
I want to show the Facebook "Like box" plugin and some other FB code in a ajax loaded page.
When I load it in a ordinary html page it works as it should, but when I try to put it in a ajax load page it only loads the first time, when I click on the link to load the page the second time it is not loading the page? It is only loading the page if I clear the cache.
The index file init the fb code.
FB.init({
appId : '277065222', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true
});
I load the ajax page with this code:
function loadFacebook(){
$('#container').load('http://www.manmade.se/manmade/guiden/facebook_onweb.html');
FB.XFBML.parse();
}
And in the ajax loaded page I have the facebook code, eg the facebook Like box.
you can call fb par script in your page load after calling fb script
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=11111code";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(document).ajaxComplete(function () {
try {
FB.XFBML.parse();
} catch (ex) { }
});
reloadlike.html
<div class="fb-like fltLeft" data-href="http://yrl_like" data-send="false" data-layout="button_count" data-width="87" data-show-faces="false"></div>
this should work every time.
I guess your callback is not right.
$('#container').load('reloadlike.html', function() {
FB.XFBML.parse();
});
Varying a little bit the example code from bugrasitemkar, at the end of the ajax code, I include this jquery script and it works:
<script type="text/javascript">
$(document).ready(function() {
try {
FB.XFBML.parse();
} catch (ex) { }
});
</script>
After the form submits, the progressbar appears, and the getProgress function is called. getProgress check a php file (which uses the uploadprogress apache mod to get the current upload progress) and returns a number from 0 to 100 (which means complete).
OK, The idea is that getProgress is self-executed if the number returned is not 100. Otherwise, the form continues to upload.php where the file is manipulated.
THIS IS WHAT IM LOOKING FOR: http://screenr.com/ByG <- video.
Here is the HTML part.
<form method="post" action="upload.php" enctype="multipart/form-data" id="UploadForm">
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
<input type="file" name="file">
<input type="submit" name="submit" value="Upload!">
</form>
<div id="UploadBarContainer">
<div id="LoadBar"></div>
<div id="ProgressBar"></div>
</div>
Here is the jQuery part. Which seems to be broken
$(function(){
// This flag determines if the upload has started
var started = false;
// Start progress tracking when the form is submitted
$('#UploadForm').submit(function() {
//Update the flag to true.
started = true;
//Hide the form.
$('#UploadForm').hide();
//Show the progress bar.
$('#UploadBarContainer, #LoadBar, #ProgressBar').show();
//Start updating progress after a 2 second delay.
//This is to prevent the getprogress.php assume that upload is complete.
setTimeout(function () {
// We pass the upload identifier to our function
getProgress($('#uid').val());
}, 2000);
});
//Function used to get the current upload progress.
//It should be executed over and over again untill the result is 100.
function getProgress(id) {
//Get the current time.
var time = new Date().getTime();
//Make an ajax request to the server.
$.ajax({
//Pass the data trought GET method.
type: 'GET',
//Get the progress from this php file.
url: 'getprogress.php',
//Pass our upload identifier as a parameter and current time to prevent caching.
data: { uid: id, t: time },
//Get the results.
success: function (data) {
//Get the output as an integer.
var progress = parseInt(data, 10);
//If upload progress is not 100, change bar percentage and update again.
if (progress < 100) {
//Update the progress bar percentage.
//But only if we have started.
$('#ProgressBar').css('width', progress + '%');
//If we aren't done, update again.
getProgress(id);
}
}
});
}
});
Just i case this helps, here is the getprogress.php file called on the $.ajax request.
if (isset($_GET['uid'])) {
// Fetch the upload progress data
$status = uploadprogress_get_info($_GET['uid']);
if ($status) {
// Calculate the current percentage
echo round($status['bytes_uploaded']/$status['bytes_total']*100);
}
else {
// If there is no data, assume it's done
echo 100;
}
}
Any help is appreciated, i have a live demo but i scared about what you could upload.
only new versions of some browsers support file upload progress. You should check your net with firebug if getprogress.php send numbers or just errors.
You may look these:
http:
Server-side, get progress on sending file
may use swf swfupload
another jquery plugin: uploadify
Well finally i came to the conclusion it is not possible to get this working on webkit browsers such as opera, chrome and safari, not so on firefox and internet explorer.
Webkit browsers tend to block any ajax while a file is being uploaded.
You may want to check this out: https://bugs.webkit.org/show_bug.cgi?id=23933