Why does my script not pass a value to PHP? - javascript

I want to get the value of an href using java script and then pass it to another file of php, I did the code of JS and some friend add J query to it, in order to pass the value to the test.php file, but I don't why it is not working.
<script>
$(function(){
$('div#tabs ul li a').click(function() {
var n = $(this).attr('href');
var p=n.slice(5,6);
alert(p);
$.ajax({
type: 'post',
url: 'test.php'
data: {value : p}
success: function(data) {
//do something with response 'data'
}
});
});
</script>

You're missing a final }); (and a few commas) in your code example. It should look like this:
<script>
$(function(){
$('div#tabs ul li a').click(function() {
var n = $(this).attr('href');
var p = n.slice(5, 6);
alert(p);
$.ajax({
type: 'post',
url: 'test.php',
data: {value : p},
success: function(data) {
// Do something with response 'data'
}
});
});
});
</script>

When creating a set in javascript, the key/value pairs need commas:
<script>
$(function(){
$('div#tabs ul li a').click(function() {
var n = $(this).attr('href');
var p=n.slice(5,6);
alert(p);
$.ajax({
type: 'post',
url: 'test.php',
data: {value : p},
success: function(data) {
//do something with response 'data'
}
});
});
});
</script>

Related

How to show a progress loader when ajax request sent?

I have a ajax function to got data, when response will get meanwhile show a bootstrap progress loader(circle loader).
How to do this ?
Ajax Function JS:
$('#category_modal').click(function(event) {
var url = $(this).data('url');
var cid = $(this).data('id');
$.ajax({
url: '<?=$this->config->base_url()?>admin_panel/update_popup',
type: 'post',
data: 'id=' + cid
}).done(function(data) {
jQuery('#categoryModal .modal-content').html(data);
$('#categoryModal').modal({
"backdrop" : "static"
});
});
});
https://fortawesome.github.io/Font-Awesome/examples/
animated icon can do the job. Also with css :
http://cssload.net/
add function
beforeSend: function () {
// show loader
}
in your ajax call
You can progress-bar class by jquery.
$('#category_modal').click(function(event) {
/*here append your class to some element
$(element).addClass("progress-bar");
*/
var url = $(this).data('url');
var cid = $(this).data('id');
$.ajax({
url: '<?=$this->config->base_url()?>admin_panel/update_popup',
type: 'post',
data: 'id=' + cid
}).done(function(data) {
/* when u r done remove
$(element).removeClass("progress-bar");
/*
});
});

Ajax get data from anchor id

I am trying to run an ajax call function but I am running into issues. I'd like to grab the id as the data item for this. My code is below but I haven't seen any signs of it working yet.
Thanks for your help
<a class='ajax-read' id='133' href='#' >read more</a>
<script type="text/javascript">
$(function(){
$('.ajax-read').click(function(){
var elem = $(this);
$.ajax({
type: "GET",
url: "/inc/read-more.php",
data: "id="+ id,
dataType:"json",
success: function(data) {
if(data.success){
elem.hide();
$('#read-more-content').html(data.message);
}
}
});
return false;
});
});
</script>
You need to get the anchor id inside the AJAX call:
<script type="text/javascript">
$(function(){
$('.ajax-read').click(function(){
var elem = $(this);
$.ajax({
type: "GET",
url: "/inc/read-more.php",
data: "id="+ elem.attr('id'),
dataType:"json",
success: function(data) {
if(data.success){
elem.hide();
$('#read-more-content').html(data.message);
}
}
});
return false;
});
});
</script>
Change
data: "id="+ id,
to
data: "id="+ elem.attr('id'),

passing array value to url in jquery ajax

i'm passing the array value to url like this
view code
from_multiselect('functio[]',$function,'','id=function')
baseurl/test/roles?id=1,2,3
this is my jquery
$("#role > option").remove();
var id = $('#function').val();
alert(id);
var str=new Array();
alert(id);
$.ajax({
type: "POST",
url: "test/roles?id="+id,
success: function(roles)
{
alert(roles);
$.each(roles,function(id,roles)
{
var opt = $('<option />');
opt.val(id);
opt.text(roles);
$('#role').append(opt);
});
}
});
});
});
Page give error when i pass the array value in url like Disallowed Key Characters.
Thank in advance
and then post this array like this:
$("#role > option").remove();
var id = $('#function').val();
var valArray = id.split(',');
var str=new Array();
alert(id);
$.ajax({
type: "POST",
url: "test/roles?id="+valArray,
success: function(roles)
{ alert(roles);
$.each(roles,function(id,roles)
{
var opt = $('<option />');
opt.val(id);
opt.text(roles);
$('#role').append(opt);
});
}
});
});
});
in the method add parameter to accept array.
This is CodeIgniter error.
So, to solve this, please go to
/application/config/config.php
AND
search for
$config['permitted_uri_chars']
change to:
$config['permitted_uri_chars'] = 'a-z 0-9~%\.\:_\+-,?&=';

jquery this selector after clicked element removed

I want to empty content of div with class dialogBody and then append returned ajax response. See the code below please. The problem I have is .html(response) doesn't do anything because clicked element is removed. How can I carry over the target element which is $this.closest('.dialogBody') after clicked element was removed?
<div class="dialogBody">
<p>Some contentClick to show question</p>
</div>
<script>
$(".ajaxReplace").live("click", function(e){
e.preventDefault();
var $this = $(this);
$this.closest('.dialogBody').empty();
ajaxUrl = $(this).attr("href")+"?ajax=1";
$.ajax({
type: "POST",
url: ajaxUrl,
success: function(response){
$this.closest('.dialogBody').html(response);
console.log(response);
}
})
});
</script>
Assign it to a variable:
$(".ajaxReplace").live("click", function(e){
e.preventDefault();
var $this = $(this);
var $dBody = $this.closest('.dialogBody').empty(); // <------
ajaxUrl = $(this).attr("href")+"?ajax=1";
$.ajax({
type: "POST",
url: ajaxUrl,
success: function(response){
$dBody.html(response); // <------
console.log(response);
}
})
});
Save a reference to the element you need instead of saving a reference to the element that will be removed:
$(".ajaxReplace").live("click", function(e){
e.preventDefault();
var ajaxUrl = $(this).attr("href")+"?ajax=1",
$thisDialog = $(this).closest('.dialogBody').empty();
$.ajax({
type: "POST",
url: ajaxUrl,
success: function(response){
$thisDialog.html(response);
console.log(response);
}
})
});
You'd also need to move the ajaxUrl assignment to before you remove the this element.

replacing xml tags using replace function dont works

<lb/>pis est) les oultragerent grandement les
<lb/>appellans Trop diteulx, Breschedens,
<lb/>Plaisans rousseaulx, Galliers, Chien-
i want to replace the tag with so that i can parse it easily should i use simple replace function of javascript or some regular expresions also!!!!
//open the document xml
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "GP.xml",
dataType: "xml",
success: parseXml
});
});
//pasre the document
function parseXml(xml)
{
//find head and its text in the line breaks
$(xml).find("div").each(function()
{
$("#output").append($(this).replace(/\n/g, "<br>");
});
}
Change this line:
$("#output").append($(this).replace(/\n/g, "<br>");
To this:
$("#output").append($(this).html().replace(/\n/g, "<br />");
With $(this) you get the object, but not the content of the object. For this you need the .html().
EDIT:
The $(this) referse to the $('#output') not the div.
$(xml).find("div").each(function() {
var thistext = $(this);
$("#output").append(thistext.text().replace(/lb/g, "br"));
});
EDIT2:
$(document).ready(function() {
$.ajax({
type: "GET",
url: "lp.xml",
dataType: "xml",
success: parseXml
});
});
//parse the document
function parseXml(xml) {
//find head and its text in the line breaks
$(xml).find("div").each(function() {
var thistext = $(this);
alert(thistext.text());
$("#output").append(thistext.text().replace(/lb/g, "br"));
});
}

Categories

Resources