There is jquery dialog (#dialog-message1) where table (tableINFO) is append.
Each row of the table shows some information regarding product with a picture link in last column.
I would like to create an on-click event where some actions are taken i.e. table row deletion and (potrawy1Engine.php) script call.
I tried creating (.confirmation2),but it does not work as expected - link is followed instead.
Can somebody help me and advice on the js script, please?
What I would like to do is to delete a row in the table tableINFO, where a link was clicked after it was clicked.
.confirmation1 and .confirmation work fine, only .confirmation2 does not work.
Maybe the problem is that the table and the link are created dynamically in jquery?
Here is the js:
$("#dialog-message").hide();
$('.confirmation').on('click', function(e) {
e.preventDefault();
var lnk = $(this).attr('href');
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
window.location.href = lnk;
},
Anuluj: function() {
$(this).dialog("close");
}
}
});
});
$("#dialog-message1").hide();
$('.confirmation1').on('click', function(e) {
e.preventDefault();
var lnk = $(this).attr('href');
var product_name = $(this).parents("tr").find("td").first().html();
$( "#dialog-message1" ).hide();
$( "#dialog-message1 table" ).remove();
$( "#dialog-message1 #labelINFO" ).remove();
$("#dialog-message1").append("<table id='tableINFO'> </table>");
$("#dialog-message1 table").append("<tr><th width='350px' >Nazwa produktu</th><th width='70px'>Waga (g)</th><th width='100px'>Kalorie (Kcal)</th> <th width='80px'>Białko (g)</th> <th width='90px'>Tłuszcze (g)</th><th width='120px'>Węglowodany (g)</th><th width='30px'> </th> </tr>");
$.ajax({
method: "POST",
url: "potrawyINFOEngine.php",
data: {"nazwa": product_name},
}).done(function( data ) {
var result = $.parseJSON(data);
var len = result.length;
for(var i=0; i<len; i++){
var T_nazwaproduktu = result[i].produkt;
var T_waga = result[i].waga;
var T_kalorie = result[i].kalorie;
var T_bialko = result[i].bialko;
var T_tluszcze = result[i].tluszcze;
var T_weglowodany = result[i].weglowodany;
var tr_str = "<tr>" +
"<td align='left'>" + T_nazwaproduktu + "</td>" +
"<td align='right'>" + T_waga + "</td>" +
"<td align='right'>" + T_kalorie + "</td>" +
"<td align='right'>" + T_bialko + "</td>" +
"<td align='right'>" + T_tluszcze + "</td>" +
"<td align='right'>" + T_weglowodany + "</td>" +
"<td align='center'>" +
"<a href='usunProduktPotrawa.php?nazwaPotrawy=" + product_name + "&nazwaProduktu=" + T_nazwaproduktu + "' title='Usuń produkt' class='confirmation2'><img src='pictures/cross16.jpg' width='10' height='10' style='margin: 0px 0px' /></a>" ;
"</td>" +
"</tr>";
$("#dialog-message1 table").append(tr_str);
}
console.log(data);
});
$.ajax({
method: "POST",
url: "potrawyINFOOpisEngine.php",
data: {"nazwa": product_name},
}).done(function( data ) {
var result = $.parseJSON(data);
console.log(result);
$("#dialog-message1").append("<label id='labelINFO'>" + result + "</label>");
$( "#dialog-message1" ).show();
});
$("#dialog-message1").dialog({
height: "auto",
width: 950,
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
$( "#dialog-message1 table" ).remove();
$( "#dialog-message1 #labelINFO" ).remove();
}
}
});
});
$("#dialog-message2").hide();
$('.confirmation2').on('click', function(e) {
e.preventDefault();
var lnk = $(this).attr('href');
var product_name = $(this).parents("tr").find("td").first().html();
$( "#dialog-message2" ).hide();
$.ajax({
method: "POST",
url: "potrawy1Engine.php",
data: {"nazwa": product_name},
}).done(function( data ) {
var result = $.parseJSON(data);
console.log(result);
$( "#dialog-message2" ).show();
});
$("#dialog-message2").dialog({
height: "auto",
width: 450,
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
});
HTML part is here:
<div id="dialog-message" title="Usuwanie potrawy">
<p>
<span class="ui-icon ui-icon-help" style="float:left; margin:0 7px 50px 0;"></span>Czy chcesz usunąć wybraną potrawe?
</p>
<p>
Naciśnij OK aby kontynuować.
</p>
</div>
<div id="dialog-message1" title="Składniki i opis potrawy">
</div>
<div id="dialog-message2" title="Test">
</div>
Thanks in advance for your help.
I have javascript code to view a news from RSS as a vertical list.
(function ($) {
$.fn.FeedEk = function (opt) {
var def = $.extend({
MaxCount: 5,
ShowDesc: true,
ShowPubDate: true,
DescCharacterLimit: 0,
TitleLinkTarget: "_blank",
DateFormat: "",
DateFormatLang:"en"
}, opt);
var id = $(this).attr("id"), i, s = "", dt;
$("#" + id).empty();
if (def.FeedUrl == undefined) return;
$("#" + id).append('<img src="loader.gif" />');
var YQLstr = 'SELECT channel.item FROM feednormalizer WHERE output="rss_2.0" AND url ="' + def.FeedUrl + '" LIMIT ' + def.MaxCount;
$.ajax({
url: "https://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(YQLstr) + "&format=json&diagnostics=false&callback=?",
dataType: "json",
success: function (data) {
$("#" + id).empty();
if (!(data.query.results.rss instanceof Array)) {
data.query.results.rss = [data.query.results.rss];
}
$.each(data.query.results.rss, function (e, itm) {
s += '<li><div class="itemTitle"><a href="' + itm.channel.item.link + '" target="' + def.TitleLinkTarget + '" >' + itm.channel.item.title + '</a></div>';
if (def.ShowPubDate){
dt = new Date(itm.channel.item.pubDate);
s += '<div class="itemDate">';
if ($.trim(def.DateFormat).length > 0) {
try {
moment.lang(def.DateFormatLang);
s += moment(dt).format(def.DateFormat);
}
catch (e){s += dt.toLocaleDateString();}
}
else {
s += dt.toLocaleDateString();
}
s += '</div>';
}
if (def.ShowDesc) {
s += '<div class="itemContent">';
if (def.DescCharacterLimit > 0 && itm.channel.item.description.length > def.DescCharacterLimit) {
s += itm.channel.item.description.substring(0, def.DescCharacterLimit) + '...';
}
else {
s += itm.channel.item.description;
}
s += '</div>';
}
});
$("#" + id).append('<ul class="feedEkList">' + s + '</ul>');
}
});
};
})(jQuery);
I need help to move the list of topics as horizontal one by one, in one line. by used javascript code. this code display just 5 topics, which I need it, but I have problem to how can I movement it as horizontal.
Html part:
<div class="page-data">
Page data is in here.
</div>
<div class="comment-wrapper">
<h3 class="comment-title">Feedback:</h3>
<div class="comment-insert">
<h3 class="who-says">Says: Leon Burning</h3>
<div class="comment-insert-container">
<textarea id="comment-post-text" class="comment-insert-text"></textarea>
</div>
<div class="comment-post-btn-wrapper" id="comment-post-btn">
Post
</div>
</div>
<div class="comments-list">
<ul class="comments-holder-ul">
<?php $comments = array( "a", "b", "c" , "d"); ?>
<?php require_once INCLUDES . 'comment_box.php';?>
</ul>
</div>
</div>
</div>
<input type="hidden" id="userId" value="1" />
<input type="hidden" id="userName" value="Leon Burning" />
</body>
<---JavaScript (comment_insert.js)---->
$(document).ready( function(){
$('#comment-post-btn').click(function() {
comments_post_btn_click();
});
});
function comments_post_btn_click() {
var _comment = $('#comment-post-text').val();
var _userId = $( '#userId' ).val();
var _userName = $( '#userName' ).val();
if( _comment.length > 0 && _userId !=null ) {
$('#comment-post-text').css('border','0px solid red');
$.ajax({
type: "POST",
url: "ajax/comments_insert.php",
data: {
task : "comment_insert",
userId : "userid",
comment : _comment
},
success : function(data)
{
comment_insert( jQuery.parseJSON(data));
console.log("ResponseText " + data); },
});
console.log(_comment + " / Username: " + _userName + " / User-ID " + _userId );
}
else {
$('#comment-post-text').css('border','1px solid red');
console.log("Area was empty.");
}
$('#comment-post-text').val("");
}
function comment_insert() {
var t = "";
t += '<li class="comments-holder" id"_1">';
t += '<div class="user-img">';
t += '<img src="user_img.png" class="user-img-pic" />';
t += '</div>';
t += '<div class="comment-body">';
t += '<h3 class="username-field">Insert User</h3>';
t += '<div class="comment-text">New Comment</div>';
t += '<div class="comment-buttons-holder">';
t += '<ul>';
t += '<li class="delete-btn">X</li>';
t += ' </ul>';
t += '</div>';
t += '</div>';
t += '</li>';
$( '.comments-holder-ul' ).prepend( t );
}
<---comments_insert.php--->
<?php
print_r( $_REQUEST );
?>
Firefox Error Message:
"SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data"
I would be very grateful if anyone could fix this for me! :)
You are trying to parse the response from your ajax call as JSON:
success : function(data)
{
comment_insert( jQuery.parseJSON(data));
console.log("ResponseText " + data); },
});
This will not work since you are just printing out the $_REQUEST array:
print_r( $_REQUEST );
You will need to convert the array to JSON first:
echo json_encode( $_REQUEST );
You are trying to parse the output of print_r as JSON (which it is not). Use the php function json_encode instead.
How can i send javascript variable values into php. i have used ajax for this but its nt working for me. please help, i am new in javascript and ajax. Here is my ajax & javascript code.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript">
$(function ()
{
$("#slider-range").slider(
{
range: true,
min: 71,
max: 109,
values: [75, 100],
slide: function (event, ui)
{
$("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
$("#min_inches").val(ui.values[0]);
$("#max_inches").val(ui.values[1]);
}
});
$("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');
var a = $("#min_inches").val($("#slider-range").slider("values", 0));
var b = $("#max_inches").val($("#slider-range").slider("values", 1));
$.ajax(
{
type: "POST",
url: "searchrange.php",
data:
{
a: a,
b: b
},
success: function (option)
{
alert("voted");
}
});
});
</script>
And Below is my php code(searchrange.php).
<?php
if(isset($_POST['a']) && $_POST['a'] != '')
{
$kws = $_POST['a'];
$kws1=$_POST['b'];
echo $kws;
echo $query = "select * from newusers where Age between '".$kws."' and '".$kws1."'" ;
$res = mysql_query($query);
$count = mysql_num_rows($res);
$i = 0;
if($count > 0)
{
echo "<ul>";
while($row = mysql_fetch_array($res))
{
echo "<a href='#'><li>";
echo "<div id='rest'>";?>
<?php echo $row['Religion'];?><br><?php echo $row['Name'];?>
<?php echo $row[0];
echo "<br />";
echo "<br />";
echo "<div style='clear:both;'></div></li></a>";
$i++;
if($i == 5) break;
}
echo "</ul>";
if($count > 5)
{
echo "<div id='view_more'><a href='#'>View more results</a></div>";
}
}
else
{
echo "<div id='no_result'>No result found !</div>";
}
}
?>
Any help would be appreciated. thank you
Try this code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
change: function(event, ui) {
// when the user change the slider
},
stop: function(event, ui) {
// when the user stopped changing the slider
$.ajax(
{
type: "POST",
url: "searchrange.php",
data:
{"min" :ui.values[0],"max":ui.values[1]},
success: function (option)
{
alert("voted");
}
});
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</body>
</html>
And your search page will be like this :
if(isset($_POST['min']) && $_POST['min'] != '')
{
$kws = $_POST['min'];
$kws1=$_POST['max'];
echo $kws;
echo $query = "select * from newusers where Age between '".$kws."' and '".$kws1."'" ;
$res = mysql_query($query);
$count = mysql_num_rows($res);
$i = 0;
if($count > 0)
{
echo "<ul>";
while($row = mysql_fetch_array($res))
{
echo "<a href='#'><li>";
echo "<div id='rest'>";?>
<?php echo $row['Religion'];?><br><?php echo $row['Name'];?>
<?php echo $row[0];
echo "<br />";
echo "<br />";
echo "<div style='clear:both;'></div></li></a>";
$i++;
if($i == 5) break;
}
echo "</ul>";
if($count > 5)
{
echo "<div id='view_more'><a href='#'>View more results</a></div>";
}
}
else
{
echo "<div id='no_result'>No result found !</div>";
}
}
Try this. Let the ajax call be done inside a call back.
$(function (){
$("#slider-range").slider({
range: true,
min: 71,
max: 109,
values: [75, 100],
slide: function (event, ui)
{
$("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
$("#min_inches").val(ui.values[0]);
$("#max_inches").val(ui.values[1]);
var a = $("#min_inches").val($("#slider-range").slider("values", 0));
var b = $("#max_inches").val($("#slider-range").slider("values", 1));
$.ajax({
type: "POST",
url: "searchrange.php",
data:
{
a: a,
b: b
},
success: function (option)
{
alert("voted");
}
});
}
});
$("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');
});
I think your problem is that your $.ajax({...}) is being called too early - ie. on document ready $(function (){ ... $.ajax({...}) });, and not after your sliders are changed/selected. You could call your $.ajax({...}) on a button click -
<input id="vote" type="button" value="Vote" />
$("#vote").on('click',function(){
var a= $("#min_inches").val();
var b=$("#max_inches").val();
$.ajax ({
type: "POST",
url: "searchrange.php",
data: { a : a,
b : b },
success: function(option)
{
alert("voted");
}
});
});
so your code could be -
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript">
$(function ()
{
$("#slider-range").slider(
{
range: true,
min: 71,
max: 109,
values: [75, 100],
slide: function (event, ui)
{
$("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
$("#min_inches").val(ui.values[0]);
$("#max_inches").val(ui.values[1]);
}
});
$("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');
$("#min_inches").val($("#slider-range").slider("values", 0));
$("#max_inches").val($("#slider-range").slider("values", 1));
$("#vote").on('click',function(){
var a= $("#min_inches").val();
var b=$("#max_inches").val();
$.ajax({
type: "POST",
url: "searchrange.php",
data:
{
a: a,
b: b
},
success: function (option)
{
alert("voted");
}
});
});
});
</script>
see this JSFiddle example (using alert in place of $.ajax()) -http://jsfiddle.net/8JgW6/
HI,
You can try this.In this example you can see how I have made a call to ajax
function callService(val1,val2){
alert("call service here "+val1);
$.ajax({
type: "POST",
url: "searchrange.php",
data:
{
a: val1,
b: val2
},
success: function (option)
{
alert("voted");
}
});
}
$sliderValue="";
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
},
stop: function(event, ui) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
b = 0;
$sliderValue=ui.value;
console.log($sliderValue)
callService($sliderValue,b);
}
});
http://jsfiddle.net/kapilgopinath/c4XA5/
I'm having problem with captcha (http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin). I'm getting error like in the title. Anyboby know what's the problem?
The "obj" has "captxt and "array" field.
I'm including jquery-1.5.1.min.js and jquery-ui.min.js library
This is a sample from my JS code:
function loadlang(lang) {
var rand = $.ajax({ url: '/captcha/data.aspx', async: false }).responseText;
var obj = eval(rand)[0];
$(".red").removeClass('red');
$(function () {
$(".ajax-fc-container").captcha({
borderColor: "silver",
text: obj['captxt'],
items: obj['array']
});
});
$("#resend_password_link").html(obj['resend_password_link']);
$("#sectxt").html(obj['sectxt']);
$("#more").html(obj['more']);
$("#langtxt").html(obj['langtxt']);
$("#optionstxt").html(obj['optionstxt']);
$("#submit").val(obj['Login']);
$("#tab").hide();
$("#desc").html(obj['Text']);
$("#dialog").html(obj['Browser']);
}
$(document).ready(function () {
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
//InitLang();
var lang = document.location.href.split('lang=')[1] || 'pl';
loadlang(lang);
$("#lang").remove();
$("#myForm").append("<input id=\"lang\" type=\"hidden\" style=\"display: none;\" name=\"lang\" value=\"" + lang + "\">");
$('.lang').click(function () {
$("#lang").remove();
$("#myForm").append("<input id=\"lang\" type=\"hidden\" style=\"display: none;\" name=\"lang\" value=\"" + $(this)[0].id + "\">");
loadlang($(this)[0].id);
});