...

Hi! I’m Starx

experienced Software Developer. And this is my blog
Start Reading About me
Blog Page
Nabin Nepal (Starx) ajax cakephp jquery post
April 17, 2012

jQuery $.post and cakePHP controller giving 400 bad request

Question by Mauritz Swanepoel

Mauritz SwanepoelMauritz Swanepoel

I am trying to use $.post() to retrieve a json array from a cakePHP controller. I figured I would not need a view file as I will turn autorender to false and I am expecing a json array. I manage to get a response when I use $.ajax and $.get, but using $.post I get a 400 Bad Request.

My code:

$.post("controller/action",{id: "1"}, function(data) {
      console.log(data);
});

public function action() {
      $this->autoRender = false;
      $array = $_POST;
      header("Content-type: application/json");
      echo json_encode($array);
      exit;
}

Any help or tips on how to possibly do this better? As mentioned $.get, $.ajax does work, but the data callback does not return anything (but firebug shows response array).

Answer by Starx

StarxStarx

One error I see is, no indication to expect a json output.

$.post("controller/action",{id: "1"}, function(data) {
      console.log(data);
},"json");
Read more
Nabin Nepal (Starx) css css3

Are there any tricks to set in css inheritance from another object or rule?

Question by anony_root

anony_rootanony_root

I’m looking for some trick(s) to make style inherited from another object/class/id. Simple trick: use classes, but are there another ways to specify style of another rule?

Sorry for explanation.. I’m looking for something like:
.st1 {font-size:17pt;} .st2 {-moz/ms/webkit-extends: '.st1';}?

Actually, I’m not really looking for it (because I use classes), just interested in.

Answer by Starx

StarxStarx

Rather than searching for tricks, You are looking for CSS extension libraries like

They do not exactly give a way to do it like you want, but provide even better one. Like

.st1 {font-size:17pt;} 
.st2 {
    .st1;
}

When the website is launched, these style declarations are compiled and optimized into a valid CSS document.

Read more
Nabin Nepal (Starx) jquery

Drop Down menu in Jquery

Question by Kamal

KamalKamal

hello friends i have tryied folowing code as u can see here http://jsfiddle.net/QCdz4/ i want to code for drop down menu to appear on click() and disappear when mouseout() but its not working please help me out Thank in advance

Jquery

<script>
    $(document).ready(function(){
        $('.click ul').css({display:'none', position:'absolute'});
        $('.click').click(function() {
            $(this).children('ul').slideDown(200);
            $(this).on('mouseout', function() {
                $(this).children('ul').slideUp(200);
            })
        })
    })
</script>

HTML

<div class="click">
    click
    <ul>
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </ul>
</div>

Answer by ThdK

ThdKThdK

You need mouseleave instead of mouseout because mouseout will also be triggered when you hover from the parent to a child element. The child element positioned above (read: z-index) the parent. Moving the cursor in this case from parent to child element will trigger the mouseout event but not the mouseleave event. The mouseleave element will only be triggered when you move the cursor away from the parent AND it’s children. 

$(document).ready(function(){

   $('.click ul').css({display:'none', position:'absolute'});


   $('.click').on('click', function(){
       $("ul", $(this)).slideDown(200);
   }).on('mouseleave', function(){
       $("ul", $(this)).slideUp(200);
   });   


})

Update: A very good article with a very clear live demo can be found here: Different between mouseout and mouseleave in jquery.
(Check out the the square’s with child elements. The one on the bottom right)

Answer by Starx

StarxStarx

You are chaining your function the wrong way.

$('.click').click(function(){
     $(this).children('ul').slideDown(200);
}).on('mouseout', function(){
    $(this).children('ul').slideUp(200);
});

Improving the above code,

$('.click').on('click', function(){
     $("ul", $(this)).slideDown(200);
}).on('mouseout', function(){
    $("ul", $(this)).slideUp(200);
});

Update

To ensure a event triggers once the cursor is outside the element, you have to use mouseleave instead of mouse out

$('.click').on('click', function(){
     $("ul", $(this)).slideDown(200);
}).on('mouseleave', function(e){
        $("ul", $(this)).slideUp(200);
});

Demo

Read more
Nabin Nepal (Starx) drop-down-menu href html javascript jquery

drop down instead of a href

Question by Yarandi

YarandiYarandi

i want change this input to dropdown menu.

<a href="#" onclick="$('#pb1').progressBar(5);">5</a> |
<a href="#" onclick="$('#pb1').progressBar(60);">60</a> |
<a href="#" onclick="$('#pb1').progressBar(100);">100</a>

dropdown sample…(not work)

<form action="#" name="progress" onclick="$('#pb1').progressBar(10);">
   <select name="dropdown">
    <option name="radOne" value="$('#pb1').progressBar(5);" selected>5</option>
    <option name="radOne" value="$('#pb1').progressBar(60);">60</option>
    <option name="radOne" value="$('#pb1').progressBar(100);">100</option>
   </select>
</form>

can anyone help me about change this structure?

Answer by Starx

StarxStarx

This is how you should do it.

   <select name="dropdown" onchange="$('#pb1').progressBar(this.value);">
    <option name="radOne" value="5" selected>5</option>
    <option name="radOne" value="60">60</option>
    <option name="radOne" value="100">100</option>
   </select>

Even like show, the practice of inline event handlers is not encouraged. Better approach is

document.getElementByid("selectboxid").onchange = function() {
    $('#pb1').progressBar(this.value);
};

But, since you are already using jQuery

$("#selectboxId").change(function() {
    $('#pb1').progressBar(this.value);
});
Read more
Nabin Nepal (Starx) css html xhtml

Table breaks when printing

Question by iceteea

iceteeaiceteea

I have a site with some tables on it (with thead & tbody).
This site shall be printed with the latest firefox.
Problem: sometimes firefox breaks the page within one of the tables,
the printed version of the site is unusable.
Couldn’t find any working solution yet.

Answer by Starx

StarxStarx

This shall fix the problem

table { 
   page-break-before: always;
}

Update::

On that case, use the folloing

@media print {
    table {
       page-break-inside:avoid;
    }
}
Read more
Nabin Nepal (Starx) css hover javascript
April 16, 2012

CSS On hover dynamically width background image

Question by Roel

RoelRoel

I am attempting to create a mouse-over effect on a navigation on my website.
The navigation is a horizontal bar with a few items in it. Code for it below;

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Our work and portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

This has a plain background color and between every <li> is a border to separate the items. Now I want to give a background image on hover, though my problem is that – as you can see – every <li> has a different width because of its contents and my image for the hover is as below;

hover effect

So it’s actually just a black shadow on the left and right. The right shadow must be placed on the absolute right side of the <li> and the left shadow on the absolute left.

Is there any way to achieve this? Not a problem if it’s with jQuery or anything like that.

Thanks in advance.

Answer by Starx

StarxStarx

If you want the shadow, and the variable length effect. Then split the image into three parts. And update your markup to something like this

  1. Left Shadow
  2. Center Part
  3. Right Shadow

Then use the following CSS snippet

li a:hover:before { content: url("image/leftshadow.jpg"); }
li a:hover { background-Image: url("image/center.jpg"); }
li a:hover:after { content: url("image/rightshadow.jpg"); }
Read more
Nabin Nepal (Starx) jquery

Using .hide() instead of .remove()

Question by ptthttp

ptthttpptthttp

The output should be like in this demo. The problem is that I need to use .hide() instead of .remove(). Does anyone have any idea to solve it?

$('td').parents('tr:contains(John)').remove();

$('tr').parents('tbody').not(':has(td)').after('<tr><td> Perfect!! </td> </tr>');

How can i resolve the same problem where .hide() is in the place of .remove()?

<table>    
    <tr>
        <th>Name</th>
    </tr>
    <tr>
        <td>John</td>
    </tr>
    <tr>
        <td>Max</td>
    </tr>
</table>

    </br></br>

<table>
    <tr>
        <th>Name</th>
    </tr>
    <tr>
        <td>John</td>
    </tr>    
</table>

Answer by Starx

StarxStarx

You can use .hide() instead of .remove() there is no problem on it.

$('td').parents('tr:contains(John)').hide();

See How?

Read more
Nabin Nepal (Starx) jquery

Submitting multi-stage form using .load method

Question by methuselah

methuselahmethuselah

I’ve been looking at this multi-stage form at http://jsfiddle.net/xSkgH/89/ and was just wondering about the best way of submitting the form using the .load method.

I’ve been trying this so far:

<script type="text/javascript">
$(document).ready(function() {
$("#last-step").hide(300).show(300).$load("resources/process.php", 
$("#task5_booking").serialize());
}
</script>

But it doesn’t seem to be working. Any hints?

Thanks in advance!

Answer by Starx

StarxStarx

Few typos on your code.

  • $.post chained with previous statements
  • Sending a post request with serialized data in the wrong way.

Update your code like this

$("#last-step").hide(300).show(300);
$.post(
   "resources/process.php",
   { data: $("#task5_booking").serialize() }
);
Read more
Nabin Nepal (Starx) html mysql php

Weird behavior PHP vs MySQL

Question by silentw

silentwsilentw

This is the SQL:

TRUNCATE TABLE `dc_path`;
INSERT INTO dc_path (coords) VALUES('(40.64406436923055, -8.638539251709062)');
INSERT INTO dc_path (coords) VALUES('(40.62791121610622, -8.615193304443437)');
INSERT INTO dc_path (coords) VALUES('(40.62895347295352, -8.6625718444825)');

If I try to execute that query on phpmyadmin it works just fine, but through php it gives me this error:

You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'INSERT INTO dc_path (coords) VALUES('(40.64406436923055, -8.638539251709062)');I' at line 1

I tried many things and I can’t work it out!

Thanks in advance.

Edit:

PHP

function insertPath($coords){
    $conn = connectDB();
    $coords = explode(";",$coords);
    $sql = "";

    $sql = "TRUNCATE TABLE `dc_path`; ";

    for($i=0;$i<count($coords)-1;$i++){
        $sql .= "INSERT INTO dc_path (coords) VALUES('".$coords[$i]."');";
    }
    echo $sql;
    $query = mysql_query($sql, $conn) or die(mysql_error());

    closeDB($conn);
    return true;
}

the $coords variable contains something like these values:

(40.638854101691635, -8.6515855163575);(40.629474595277166, -8.63235944213875);

Answer by TomUnite

TomUniteTomUnite
function insertPath($coords){
    $conn = connectDB();
    $coords = explode(";",$coords);

    mysql_query("TRUNCATE TABLE `dc_path`", $conn);

    for($i=0;$i<count($coords)-1;$i++){
        mysql_query("INSERT INTO dc_path (coords) VALUES('".$coords[$i]."')", $conn);
    }

    closeDB($conn);
    return true;
}

Answer by Starx

StarxStarx

You cannot query more than one statement using mysql_query().

Query like this

for($i=0;$i<count($coords)-1;$i++){
    $sql = "INSERT INTO dc_path (coords) VALUES('".$coords[$i]."');";
    $query = mysql_query($sql, $conn) or die(mysql_error());
}
Read more
...

Please fill the form - I will response as fast as I can!