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());
});
}
);
});
Related
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
}
});
});
I'm having a link as follows :
<div id="demo-testpack">
Demo Test Packages
</div>
On clicking on this link I'm calling following jQuery code :
$(function() {
$("#user-popup-login").dialog({ autoOpen: false });
$( ".user-not-loggedin" )
.click(function() {
$( "#user-popup-login" ).dialog( "option", "width", 400 );
$( "#user-popup-login" ).dialog( "option", "modal", true );
$( "#user-popup-login" ).dialog( "open" );
return false;
});
The pop up gets opened after this function some fields and some links are there in the pop up. One link is as follows in the popup:
<div id="registern">Register Now</div>
On click of this link I want to execute the following code which results in opening of another popup. The jQuery code for this is as follows :
$(function() {
$("#create-user-form").dialog({ autoOpen: false });
$( ".register-btn" )
.click(function() {
$( "#create-user-form" ).dialog( "option", "width", 560 );
$( "#create-user-form" ).dialog( "option", "modal", true );
$( "#create-user-form" ).dialog( "open" );
return false;
});
$( ".get-start" )
.click(function() {
$( "#create-user-form" ).dialog( "option", "width", 560 );
$( "#create-user-form" ).dialog( "option", "modal", true );
$( "#create-user-form" ).dialog( "open" );
return false;
});
//This function is used to submit User Registration form
$('#user_registration_form').live('submit', function() {
$('.register').attr('disabled', 'disabled');
show_request('#registration_error');
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data:$(this).serialize(),
dataType: 'json',
success: function(response) {
$('.register').removeAttr('disabled', 'disabled');
var reg_error = response.reg_error;
if(reg_error=='yes') {
var error_msg = response.error_msg;
var dialog_title = 'Input Errors Found';
var dialog_message = error_msg;
$("#registration_error").html(error_msg);
} else {
$("#registration_error").html('');
$( "#create-user-form" ).dialog('close');
var suc_msg = response.suc_msg;
var dialog_title = 'Registered Successfully';
var dialog_message = suc_msg;
var $dialog = $("<div class='ui-state-success'></div>")
.html("<p class='ui-state-error-success'>"+dialog_message+"</p>")
.dialog({
autoOpen: false,
modal:true,
title: dialog_title,
width: 500,
buttons:{
'OK': function() {
$(this).dialog('close');
}
}
});
$dialog.dialog('open');
$('#user_registration_form')[0].reset();
}
}
});
return false;
});
});
Now what I want to achieve is when user clicks on the above link the previously opened popup should close and only this new popup should display. I did lots of tricks but not succeeded. Can anyone help me out on how to achieve this?Thanks in Advance.
I'm going to guess this is scope issue because the call to popup('open') on $( "#create-user-form" ) in a different anonymous function than where you are trying to close it. Try putting the calls to open and close it in the same document.ready shorthand anonymous function.
I tried and tried and reacThis can be achieved by following code snippet. It really did magic for me.
if($( "#user-popup-login" ).dialog( "open" ))
$( "#user-popup-login" ).dialog( "close" );
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 have this problem with the jQuery autocomplete.
I use JSON data, retrieved from a mySQL db, by PHP function.
$.ajax({
dataType: 'json',
async: false,
method: 'post',
success: function(data) {
test = data;
},
url: '<?php echo site_url('products/autocomplete/'); ?>'
});
So, my JSON data is stored into the variable: 'test'.
This is my autocomplete code:
$( "#prodname" ).autocomplete({
minLenght: 2,
source: test,
focus: function( event, ui ) {
$( "#prodname" ).val( ui.item.prodname );
return false;
},
select: function( event, ui ) {
$( "#prodname" ).val( ui.item.prodname );
$( "#uname" ).val( ui.item.uname );
$( "input[name=prodname_fk]" ).val( ui.item.id );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.prodname + "</a>" )
.appendTo( ul );
};
The data loads properly and all, but the autocomplete field doesn't seem to work properly. The first item of my JSON object starts with 'b', so only when I press the letter 'b', the autocomplete(suggestions) appear.
How can I fix this? My guess is maybe because I use async: false, but that the only way I made it work a little at first place.
I need the autocomplete on my Product field, so when a user selects product, a hidden field (prodname_fk) receives the corresponding ID of the product. And the uname field (unit of measure) is only used for displaying purposes.
I attach picture for your reference.
Thank you in advance.
If your php page returns json, you can put its url directly in the autocomplete function :
<script>
$(function() {
$( "#birds" ).autocomplete({
source: '<?php echo site_url('products/autocomplete/'); ?>',
minLength: 2,
select: function( event, ui ) {
$( "#prodname" ).val( ui.item.prodname );
$( "#uname" ).val( ui.item.uname );
$( "input[name=prodname_fk]" ).val( ui.item.id );
}
});
});
</script>
In your script, you can remove the _renderitem replacement, as it's only useful if you want specific rendering, like
'<em>' + item.prodname + '</em>(' + item.id ')'
You should try to adapt the basic samples from http://jqueryui.com/demos/autocomplete/#remote then add more advanced functionality.
This is how I made it work.
$( "#prodname" ).autocomplete({
minLenght: 2,
source: "<?php echo site_url('products/autocomplete/'); ?>",
select: function( event, ui ) {
$( "#prodname" ).val( ui.item.prodname );
$( "#code" ).val( ui.item.code );
$( "#uname" ).val( ui.item.uname );
$( "input[name=prodname_fk]" ).val( ui.item.id );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.prodname + "</a>" )
.appendTo( ul );
};
Now, I use asynchronous search, so whenever the user types something in the Products field, a GET request is sent, with the term (http://localhost/ci/products/autocomplete?term=xxx), which is searched against the product names into the database, returning the matching results(JSON) into the autocomplete suggestion box.
using jquery to post a value to php file but the value is not being posted (COMPANY_NAME). Code below works for multiple values but not when it's changed to post single values? Any tips?
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
var COMPANY_NAME = $( "#COMPANY_NAME" ),
allFields = $( [] ).add( COMPANY_NAME ),
tips = $( ".validateTips" );
$( "#dialog-form5" ).dialog({
autoOpen: false,
height: 200,
width: 350,
modal: true,
buttons: {
"ok": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
if ( bValid ) {
$.post("setCompany.php", {
COMPANY_NAME:$(this).val()
}, function(data) {
if(data=='no')
{ $("#msgbox").fadeTo(200,0.1,function()
{
$(this).html(data).addClass('messageboxerrorAdd').fadeTo(900,1);
});
} else if (data=='wrong') {
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html("fjdhffh").addClass('messageboxerrorAdd').fadeTo(900,1);
});
} else {
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html(data).addClass('messageboxerrorAdd').fadeTo(900,1);
});
}
});
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
});
Try this :
$.post("setCompany.php",{"COMPANY_NAME":COMPANY_NAME.val()}, function(data)...
JSON objects require keys to be surrounded by double quotes
COMPANY_NAME:$(this).val()
I don't think that $(this) points to the company name field. Try this:
"COMPANY_NAME" : COMPANY_NAME.val()
(as mentioned before, JSON keys need to be in double quotes)