JS-generated GET variables not being read PHP - php

I am using JavaScript to generate a form's action attribute:
$("#select-font").on('change', function(){
var font = $(this).val();
$("#font-family").val(font);
$(this).css({
'font-family': font
});
$("#edit-doc").css({
'font-family': font
});
// BUG IS HERE --->
$('#save')
.attr('src', '/img/icons2/save.png')
.attr('onclick', '$(this).parents("form").submit();');
$('#save')
.parents('form')
.attr('action',
String($('#save')
.parents('form')
.attr('action')) + '&autosave=true');
});
$("#select-font-size")
.on('change', function(){
var size = $(this).val();
$("#edit-doc").css({
'font-size': size
});
$("#font-size").val(size);
// BUG IS HERE --->
$('#save')
.attr('src', '/img/icons2/save.png')
.attr('onclick',
'$(this).parents("form").submit();');
$('#save')
.parents('form')
.attr('action',
String($('#save')
.parents('form')
.attr('action')) + '&autosave=true');
});
The GET variable is passed to the next page; in the URL bar the location shows up as http://localhost/foo/?var1=a&var2=b&autosave=true. However, when I test the GET variable:
if($_GET["autosave"]){
// some code...
}
The condition is not run. Why can't the PHP see the variable?

Rather than using
if($_GET["autosave"]){
// some code...
}
try:
if (isset($_GET["autosave"])) {
// your code...
}
Also when adding handlers try this, rather than using the inline click handler, use jQuery.on()
$('#save')
.attr('src', '/img/icons2/save.png')
.on('click', function(){
$(this).parents("form").submit();
});

Related

jquery click function on a d3.js node

I want to use jQuery to handle a mouse click on nodes in a force directed network graph. That way, I can run AJAX calls to a PHP page that extracts data about that node via a mySQL query.
But I am struggling how to integrate d3.js with jQuery. I tried this (see jQuery after //click event), but not surprisingly it does not work because 'node' is clearly not the correct ID. When I use HTML div tags, its easy, but with d3.js I am not sure the equivalent ID to use.
Thanks, Tom
<script type="text/javascript">
//click event
$("node").click(function(){
alert("The node was clicked.");
});
//Set margins and sizes
var margin = {
top: 20,
bottom: 50,
right: 30,
left: 50
};
var width = 1920 - margin.left - margin.right;
var height = 1080 - margin.top - margin.bottom;
//Load Color Scale
var c10 = d3.scale.category10();
//Create an SVG element and append it to the DOM
var svgElement = d3.select("body")
.append("svg").attr({"width": width+margin.left+margin.right, "height": height+margin.top+margin.bottom})
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")");
//Load External Data
d3.json("php/index_network_methy.php", function(dataset){
//Extract data from dataset
var nodes = dataset.nodes,
links = dataset.links;
//Create Force Layout
var force = d3.layout.force()
.size([width, height])
.nodes(nodes)
.links(links)
.gravity(0.1)
.charge(-200)
.linkDistance(100);
//Add links to SVG
var link = svgElement.selectAll(".link")
.data(links)
.enter()
.append("line")
.attr("stroke-width", function(d){ return d.weight/1; })
.attr("class", "link");
//Add nodes to SVG
var node = svgElement.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.call(force.drag);
//Add labels to each node
var label = node.append("text")
.attr("dx", 24)
.attr("dy", "0.35em")
.attr("font-size", function(d){ return d.influence*1.5>9? d.influence*1.5: 9; })
.text(function(d){ return d.character; });
//Add circles to each node
var circle = node.append("circle")
.attr("r", function(d){ return d.influence/2>15 ? d.influence/2 : 15; })
.attr("fill", function(d){ return c10(d.zone*10); });
//This function will be executed for every tick of force layout
force.on("tick", function(){
//Set X and Y of node
node.attr("r", function(d){ return d.influence; })
.attr("cx", function(d){ return d.x; })
.attr("cy", function(d){ return d.y; });
//Set X, Y of link
link.attr("x1", function(d){ return d.source.x; })
link.attr("y1", function(d){ return d.source.y; })
link.attr("x2", function(d){ return d.target.x; })
link.attr("y2", function(d){ return d.target.y; });
//Shift node a little
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
//Start the force layout calculation
force.start();
});
</script>
Your listener declaration $("node").click does not reference any element
node is not an element.
You have elements with class node so your jquery declaration should perhaps be
$('.node').click... // (note the dot)
If that doesn't work, it's likely because you're attaching the listener before the elements are in the dom.
A good approach for d3 is to add the a regular javascript listener when you append the node. See d3 handling events

WordPress Ajax call very slow and jittery

I've been working on a website for some time now and while they do have a large amount of content and I have upgraded them, the AJAX load more call on the masonry grid is very slow. I have tried caching and using a CDN but it's still taking a very long time, particularly after the first instance.
Does anyone have any ideas? Website is www.noctismag.com
Here's the script I'm using to run it, in my footer.
<script>
jQuery(function ($) {
/* Masonry + Infinite Scroll */
var $container = $('#grid-container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.post'
});
});
$('#grid-container').masonry({
itemSelector: '.post'
, columnWidth: 258
});
$container.infinitescroll({
navSelector: '#page-nav'
, nextSelector: '#page-nav a'
, itemSelector: '.post'
}, function (newElements) {
var $newElems = $(newElements).css({
opacity: 0
});
$newElems.imagesLoaded(function () {
$newElems.animate({
opacity: 1
});
$container.masonry('appended', $newElems, true);
});
});
$(window).unbind('.infscr');
jQuery("#page-nav a").click(function () {
jQuery('#grid-container').infinitescroll('retrieve');
return false;
});
$(document).ajaxError(function (e, xhr, opt) {
if (xhr.status == 404) $('#page-nav a').remove();
});
});
</script>
Does the Ajax request send back HTML code?
If it's the case try to change the code, Ajax call must return data as a JSON string and a front-end function will transform that data to render it on grid.

Disabling a button based on an id clicked

I need a person who can help me solve this problem.The code below is working well with the post and the php code.
//Getting the id of a buyer and loop through
//sending a request to the seller
$(document).ready(function(){
$('.buyerRequest').click(function(){
var id=$(this).attr('id').replace('id_','');
$.post('SendingOffer.php',{id:id},function(data){
if(data=="true"){
$(this).html('<b>Offer Send</b>').css('background','#dce6f1');
$(this).attr("disabled","disabled");
}else if(data=="false"){
alert('You have reached the maximum number you can send todays');
}
});
});
});
I have tested the php code,that is,if data returned is true output alert box and is working.For instance
if(data=="true"){
alert(id);
}
However,on including this code
if(data=="true"){
$(this).html('<b>Offer Send</b>').css('background','#dce6f1');
$(this).attr("disabled","disabled");
}
and clicking the current id,i am unable to disable it and change it's attributes to offer send.
How can i deal with this problem
This is my div code
echo"<li id='td_request'><a id='id_".$fetch_num['order_id']."' class='buyerRequest' href='#".$fetch_num['order_id']."'>Send Offer</a></li>";
There were a few problems. I assume this is a button. I created a div to apply the styling to. The problem is that this is defined by scope. Inside of the post callback, this refers to the actual post object, not an html element.
<script>
$(document).ready(function() {
$('.buyerRequest').click(function() {
var id=$(this).attr('id').replace('id_','');
$.post('SendingOffer.php', {"id":id}, function(data) {
console.log(data);
if (data.length>0) {
$('#my_div').html('<b>Offer Send</b>').css('background','#dce6f1');
$('#id_my_button').prop("disabled",true);
}
else {
alert('You have reached the maximum number you can send todays');
}
});
});
});
</script>
<input type='button' class='buyerRequest' id='id_my_button' value='my_button'>
<br/>
<div id='my_div'></div>
$(this) might not be a very good idea to use inside a $.post. You better use a reference to the html object.
for example
$("#mydiv").html('Offer Send').css('background','#dce6f1');
$(this) usually refers to the current object in the context, in this case the ajax request if i am not mistaken. For example...
$(".mydiv").each(function(){
//using $(this) here refers to the current instance of .mydiv; not the DOM or the body
});
So, try this
$(document).ready(function(){
$('.buyerRequest').click(function(){
var id=$(this).attr('id').replace('id_','');
$.post('SendingOffer.php',{id:id},function(data){
if(data=="true"){
$("#**yourdivid**").html('<b>Offer Send</b>').css('background','#dce6f1');
$("#**yourdivid**").attr("disabled","disabled");
}else if(data=="false"){
alert('You have reached the maximum number you can send todays');
}
});
});
});
Working Code
<a id='id_0' class='buyerRequest' href='#0'>Send Offer</a>
<div id='responseDIV'></div>
<script>
$(document).ready(function(){
$('.buyerRequest').click(function(){
var id=$(this).attr('id').replace('id_','');
$.post('SendingOffer.php',{id:id},function(data){
if(data=="true"){
$("#responseDIV").html('<b>Offer Send</b>').css('background','#dce6f1');
$("#id_0").removeAttr("href");
}else if(data=="false"){
alert('You have reached the maximum number you can send todays');
}
});
});
});
</script>
Maybe "this" is ambiguous here, try to change into:
var currentBtn = $(this);
var id = currentBtn.attr('id').replace('id_','');
$.post('SendingOffer.php',{id:id},function(data){
if(data=="true"){
currentBtn.html('<b>Offer Send</b>').css('background','#dce6f1');
currentBtn.attr("disabled","disabled");
}else if(data=="false"){
alert('You have reached the maximum number you can send todays');
}
});
if disabled attribute does not work, you can try:
currentBtn.prop("disabled", true);
It belongs to your jQuery's version , reference: jQuery .attr("disabled", "disabled") not working in Chrome
Hope this help :)

jQuery&php fire function when page is loaded

I have a php page with jQuery, with range sliders.
When the sliders are changed the jQuery code sums the values.
I also want this code to be fired when the page is loaded. But it doesn't happen when I trigger the function inside $(window).load(function() {}); or directly in $(document).ready(function() {});.
Here's the jQuery code:
$(document).ready(function() {
$(window).load(function() {
countSilders();
});
function countSliders(){
var SliderValue = parseInt($("#slider0").val())+parseInt($("#slider1").val())+parseInt($("#slider2").val());
if (SliderValue==10)
$("#submit_next").button("enable");
else
$("#submit_next").button("disable");
$("#lblsum_scores").text(SliderValue+"/10");
}
$(document).on("change","#sliders", function(){
countSliders();
});
});
Try this:
// First define your function
function countSliders() {
var SliderValue = parseInt($("#slider0").val()) + parseInt($("#slider1").val()) + parseInt($("#slider2").val());
if (SliderValue == 10) $("#submit_next").button("enable");
else $("#submit_next").button("disable");
$("#lblsum_scores").text(SliderValue + "/10");
}
// Run on ready, don't use ready and then on load, that will never happen
// And i changed the on() to change()
$(document).ready(function(){
countSilders();
$("#sliders").change(function(){
countSliders();
});
});
You should be able to do:
function countSliders(){
...
}
$(document).ready(function() {
countSilders(); // fire it on load
// bind it to sliders
$(document).on("change","#sliders", function(){
countSliders();
});
});

How to save drag and dropped image as .jpg format to database using jquery and PHP?

I am new to Jquery. trying to drag and drop image clone. but I am not able to save this drag image to my database using PHP. please someone refer some code.
here is my code:
var test = 0;
$(document).ready(function(){
$('#working-area .rotatable').live('dblclick', function(event) {
$(this).remove();
});
});
$(document).ready(function(){
$('#dhtmlgoodies_xpPane li .rotatable').draggable({appendTo: "working-area", helper: "clone" });
$('#working-area .rotatable').live('click', function(event) {
test = test + 90;
$(this).rotate({ angle: test , appendTo: "#working-area"}).draggable();
});
$('#working-area .rotatable').live('mousemove', function(event) {
$(this).resizable({appendTo: "#working-area"}).parent().draggable();
});
$( "#working-area" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: "#dhtmlgoodies_xpPane li .rotatable",
drop: function( event, ui ) {
<!--$( this ).find( "#working-area" ).remove();-->
$(this).append($(ui.helper).clone().draggable());
}
}).mousemove(function(e){
var xx = e.pageX - this.offsetLeft;
var yy = e.pageY - this.offsetTop;
$('#status2').html("X = "+ xx +', '+"Y = "+ yy);
});
});
With "database" I guess you mean that you want to store the image on the server side. So, you need to post your image to the server side. jQuery is an javascript client library and don't have direct access to you database server.
You can do this by an AJAX call or via a basic form post.

Categories