How to display database data hover dynamic description display? In my project using products pagination of some product on the product hover i want to show one popup dynamically what functionally use like ajax, json or some other technology based its possible?
Try this,
Demo Ajax Tooltip
I am using Jquery UI tooltip, It is showing your IP address in tooltip from database using ajax request,
$(function() {
$( document ).tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$that = $( this )
$.ajax({
url: 'http://ip.jsontest.com/',
success: function(result){
$that.text(result.ip)
}
});
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
});
$(function() {
$( document ).tooltip({
items: "label , [title]", //as per your html
content: function() {
$.ajax({
type: "GET",
url: 'Your url',
success: function (result) {
return result;//return result from your url should be a string
}
});
});
Related
I have 2 php pages, one has jquery and post function, after i post, it returns result in a div, but in this div has its own jquery functions and they are not working properly.
$( "#home" ).click(function() {
$.post( "processor.php",{
home: "home"
}, function( data ) {
$( "#main" ).html( data );
}
);
});
data has jquery scripts and they are not working on the first page
Or you can rebind on success:
function bindEvent() {
$( "#home" ).off('click').on('click', function() {
$.post("processor.php",
{
home: "home"
},
function( data ) {
bindEvent();
}
);
});
}
bindEvent();
You have to eval your response scripts:
$( "#home" ).click(function() {
$.post("processor.php",
{
home: "home"
},
function( data ) {
$( "#main" ).html( data );
$( "#main" ).find("script").each(function(i) {
eval($(this).text());
});
}
);
});
I want to prevent the user to stop selecting or drag and drop while the previous ajax request is in process.
How can i do this...
Here is the code js code :
#drag is the div id of drag and drop area
$( '#drag ' ).bind( 'dragover',function(event) {
event.stopPropagation();
event.preventDefault();
});
$( '#drag ' ).bind( 'drop',function(event) {
event.stopPropagation();
event.preventDefault();
if( upfiles == 0 )
{
upfiles = event.originalEvent.dataTransfer.files;
console.dir(upfiles);
upfiles = Array.prototype.slice.call(upfiles, 0);
}
else {
if(confirm( "Drop: Do you want to clear files selected already?" ) == true) {
upfiles = event.originalEvent.dataTransfer.files;
upfiles = Array.prototype.slice.call(upfiles, 0);
$('#fileToUpload').val('');
}
else
return;
}
$( "#fileToUpload" ).trigger( 'change' );
});
after clicking on upload button:
$("#upload_btn").click( function() {
if ( upfiles ) {
$( '#fileToUpload' ).trigger('upload'); // trigger the first 'upload' - custom event.
$(this).prop("disabled", true);
}
});
Here is the ajax request :
$( '#container' ).on( 'upload', '#fileToUpload' , function( ) {
if ( typeof upfiles[count] === 'undefined') return false;
var data = new FormData();
var fileIn = $( "#fileToUpload" )[0];
if( !upfiles )
upfiles = fileIn.files;
$(upfiles).each(function(index, file)
{
data.append( 'file'+index, file );
});
var request = $.ajax({
url: 'files.php',
type: 'POST',
data: data,
cache: false,
contentType: false,
processData: false,
beforeSend: function( ) {
$(".progressbar").show();
},
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if(xhr.upload){
xhr.upload.addEventListener( 'progress', showProgress, false);
}
return xhr;
},
success: function(data){
if( percentComplete <= 100 ) {
$('#pb div').animate({ width: '100%' }, { step: function(now) {
$(this).text( Math.round(now) + '%' );
}, duration: 10});
}
$('#uplcomp').append( data );
}
});
How can i prevent the user while the previous files upload is in progress.
Updated
ok got it upto some extent (but this is also not a good idea, user can add div back from the firebug and send files again)
i have used
$( document ).ajaxStart(function() {
$( "#total" ).remove();
});
and in ajax start :
$(document).ajaxStop( function( ) {
//how can i add div back say : add <div id='total'></div> after <div id='someid'></div>
});
Is there any possibility that i can stop second ajax request while the first ajax is in process?
Apart from enabling/disabling drag and drop while ajax is in progress, I believe a better solution will be to show an transparent or translucent overlay which covers that area and prevent the user from selecting any draggable.
For disabling/enabling using jquery:
Use $( "#total" ).draggable( "disable" ); inside beforeSend() function of ajax.
Use $( "#total" ).draggable( "enable" ); inside success() of function ajax
Using CSS:
demo: http://jsfiddle.net/lotusgodkk/GCu2D/184/
CSS:
.checked {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:#BFBFBF;
opacity:0.5;
text-align:center;
}
.checked div {
margin:0 auto;
top:50%;
left:50%;
position:absolute;
}
HTML:
<div class="checked">
<div>Please wait...</div>
</div>
Just toggle the hide/show during ajax
Use $('.checked').show(); in beforeShow() and $('.checked').hide(); in success()
Finally i have used
if($.active === 0)
{
call ajax
}
else
{
alert("please wait previous request is in process");
}
I'm using this to submit values from a single form when a checkbox is clicked. The form is called my-form.
$( '#my-form input[type=checkbox]' ).click( function() {
$.post(
'form.php',
$( '#my-form' ).serialize(),
function( response ) {
$( '#my-form #form-response' ).html( response );
}
);
} );
This is working fine for one form. But I'd like to have other forms, maybe 10 on the same page and re use this code.
I understand each form has to have a unique ID, but how do I submit just that form, not any of the others ?
Thanks :)
give all of your forms same class and do it like this
$( '.my-form input[type=checkbox]' ).click( function() {
var CurrectForm=$(this).parents('.my-form:first');
$.post(
'form.php',
CurrectForm.serialize(),
function( response ) {
CurrectForm.find('#form-response').html( response );
}
);
} );
my-form is the class name for all forms.
You could change the ids to classes, and just submit the parent form of the checkbox, like so:
$( '.my-form input[type=checkbox]' ).click( function() {
var $my_form = $(this).closest('.my-form');
$.post(
'form.php',
$my_form.serialize(),
function( response ) {
$( '.form-response', $my_form ).html( response );
}
);
} );
I created a conformation box from jquery. I want to submit the page and view PHP echo message when click the confirm button in the confirmation box. Can you help me with code that comes for the confirmation button?
My jQuery/javascript function is here:
$(document).ready(function(){
$('#click').click(function(){
//$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Ok": function() {
// I WANT THE CODE FOR HERE TO SUBMIT THE PAGE TO WIEW PHP ECHO MESSAGE
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
});
You can use jQuery Form submit library. This will give you many options.
And according to your requirement you can call
beforeSubmit: 'YOUR FUNCTION To OPEN DIALOG',
If this returns true your form will get post and you will definitely get response.
see example here : http://malsup.com/jquery/form/#ajaxForm
Use the jQuery Post function...
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });
Here is a version with a callback when the post completed...
$.post("test.php", { name: "John", time: "2pm" },
function(data) {
alert("Data Loaded: " + data);
}
);
Or if you have an existing form that you want to post use the jQuery submit function...
$("form").submit();
But before you do this you need to make sure that you populated the input fields in the form.
try this code,
var parameter_1 = 'test';
var parameter_2 = 'test';
$.ajax(
{
type: "POST",
url: "/submit_url.php",
data: "parameter_1="+ parameter_1 +"& parameter_2 ="+ parameter_2,
success: function(html)
{
alert('Submitted');
}
});
I'm trying to get a field on my view to autocomplete with values from a database but can't seem to figure out what is going wrong....
In my view I have the following script:
$(document).ready(function() {
$(function() {
$( "#searchQuestion" ).autocomplete({
source: function(request, response) {
$.ajax({ url: "<?php echo site_url('contentmanagement/suggestions'); ?>",
data: { term: $("#searchQuestion").val()},
dataType: "json",
type: "POST",
success: function(data){
response(data);
}
});
},
minLength: 2
});
});
});
Within my contentmanagement controller I have the "suggestions" function:
function suggestions() {
$this->load->model('onlinehelp');
$term = $this->input->post('term', TRUE);
if (strlen($term) < 2)
break;
$rows = $this->onlinehelp->GetAutocomplete($term);
$keywords = array();
foreach ($rows as $row)
array_push($keywords, $row->question);
echo json_encode($keywords);}
And Finally within my model I have the follow function -
function GetAutocomplete($term) {
$this->db->select('question');
$this->db->like('question',$term, 'both');
$query = $this->db->get('question');
return $query->result();
}
The query above is the equivalent to "SELECT question FROM question WHERE question LIKE %$term%.
Can anyone see where I am going wrong with this??
You might be getting a 500 Internal Server Error caused by CSRF protection being enabled. If so, every POST request must contain a CSRF value. You have a few options:
1. Include the CSRF value in your data using $this->input->cookie('your_csrf_name');
2. Perform GET request instead of POST.
Use $this->input->get('term', TRUE); in your controller. Remember to sanitize and validate the value.
3. Disable CSRF protection. Not recommended.
This works with the CSRF enabled:
Use the jquery cookie plugin
<script type='text/javascript' src='<?php echo base_url(); ?>/js/lib/jquery.cookie.js'></script>
Then on your autocomplete thing:
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$("#searchQuestion").autocomplete({
source: function(request, response) {
$.ajax({ url: "<?php echo site_url('contentmanagement/suggestions'); ?>",
data: { term: $("#searchQuestion").val(), ci_csrf_token: $.cookie("ci_csrf_token") },
dataType: "json",
type: "POST",
success: function(data){
response(data);
}
});
},
minLength: 2,
focus: function( event, ui ) {
$("#searchQuestion").val(ui.item.term);
return false;
}
})
.data("autocomplete")._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.term + "</a>" )
.appendTo( ul );
};
});
});</script>