1

I want when someone clicks this link to go first on myfunction that I have in JS and after that follow the href function that exists in <a> tag. The problem is that it follows first the href and I can't pass the variable I want from the js function.

here is my code:

PHP

echo '<a href="category.php?id=' . $_SESSION['id'] . '" onclick="myFunction();">
        <div class="icon-lock">
            <img  src="/test/images/lock.png" alt="Locked Button" width="35" height="35" border="0">
        </div>';
echo '</a>';

JS

<script>
function myFunction() {
$.ajax({
        type: "POST",
        data: {id: "1"},
        url: "category.php"
        });
 }
</script>

I am very confused on how href and myfunction will work in order to print 

$id=$_POST['id'];
echo $id;

in php after the page has been reloaded...
Any thoughts?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Johnny
  • 39
  • 1
  • 8
  • What is the purpose of reloading page ? – guest271314 Dec 04 '15 at 01:01
  • i want the page to be reloaded and then based on if the user clicked on the link print a different icon that before..as you see i have a lock.png image in my code but if the link is pressed then i have an if that if (!(id==null)) then print lock.png else print unlock.png..and for the purpose of this i first have to pass the id from the session as category.php?id= session['id'] but also to pass the var id from javascript that i want to check on the same page to print another image. i hope you understand what i want to do. – Johnny Dec 04 '15 at 07:12

3 Answers3

1

You could pass the 'id' as a parameter in your function and use javascript to change the window location after the ajax is successful.

HTML

<div class="icon-lock">
    <img onclick="myFunction(<?=$_SESSION['id']?>)" src="/test/images/lock.png" alt="Locked Button" width="35" height="35" border="0">
</div>

Javascript

function myFunction(id) {
    $.ajax({
        type: "POST",
        data: {id: "1"},
        url: "category.php",
        success: function() {
            window.location.assign("category.php?id="+id);
        }
    });
}
David
  • 429
  • 2
  • 5
  • 14
  • First of all thanks for your answer but it doesnt work when i press in the image..the id that i want to be returned is not.Look at my code as i have it now: – Johnny Dec 04 '15 at 07:20
  • PHP: `echo '
    Locked Button
    '; echo '    ';` javascript: `unction myFunction(id) { $.ajax({ type: "POST", data: {id: "1"}, url: "category.php" }); success: function() { window.location.assign("category.php?id="+id); } }`     – Johnny Dec 04 '15 at 07:27
  • What am i doing wrong? i want to pass both variable $_SESSION['id'] and the id that i have as data posted in the javascript..so actually i want 2 variables passed when the page is refreshed and i want to print that 'id' variable i have in javascript later in the php code by using `$id=$_POST['id']; echo $id;` – Johnny Dec 04 '15 at 07:28
1

you do simply pass this on your function

your php code will look like this

 echo '<a href="category.php?id=' . $_SESSION['id'] . '" onclick="myFunction(this);">/*pass this keyword to function */
            <div class="icon-lock">
                <img  src="/test/images/lock.png" alt="Locked Button" width="35" height="35" border="0">
            </div>';
    echo '</a>';

function myFunction(str) {
   $.ajax({
        type: "POST",
        url: str.getAttribute("href")
   }).done(function() {
        // What ever following the link does
            window.location.href=str.getAttribute("href")

   });
}
Muhammad Waqas
  • 1,140
  • 12
  • 20
  • i replaced my js with `function myFunction(str) { $.ajax({ type: "POST", url: str.getAttribute("href") }).done(function() { window.location.replace("index.php?id="+str); }); }` – Johnny Dec 04 '15 at 08:00
  • and my php with `echo '
    Locked Button
    '; echo '    '; $id=$_POST['id']; echo $id;`     – Johnny Dec 04 '15 at 08:01
  • but it always redirects to category.php without passind the var id to index.php(index was just to check where it goes..actually i want it to be refreshed and send category.php?id=$_SESSION['id'] + id='1') – Johnny Dec 04 '15 at 08:03
  • @Johnny i made an edit to my code hope this will help you – Muhammad Waqas Dec 04 '15 at 08:07
  • yes i want to refresh the page after ajax call so i can pass another variable in my page if the link is clicked. I replaced my js with `function myFunction(str) { $.ajax({ type: "POST", url: str.getAttribute("href") }).done(function() { window.location.href=str.getAttribute("href") }); }` but it just reloads the page as href on tag suggests with just passing $_SESSION['id]' and not the id variable that i want to set to 1 if the link is pressed. – Johnny Dec 04 '15 at 08:15
  • @Johnny if you just want to reload i suggest use location.reload() – Muhammad Waqas Dec 04 '15 at 08:22
  • reloading is of course my purpose here but passing $_session['id'] is essential for my page to load and when the specific link is pressed i also want to pass another variable..lets say $check=1 so in my php page i want to check if $check == NULL or not..of course the first time the page loads the $check will be null but if a user clicks on the link the $check will have the value 1 so it will execute the code i 've written in there.I dont know if u cant understand me since i am not good at all at explaining..sorry for any confusion. – Johnny Dec 04 '15 at 08:27
0

Prevent the default action in your myfunction method which takes the event object. And then in the success call back of your ajax request, do what ever you wanna do .

<a href="category.php?id=' . $_SESSION['id'] . '" onclick="myFunction(e);">

function myFunction(e) {
   e.preventDefault();
   $.ajax({
        type: "POST",
        data: {id: "1"},
        url: "category.php"
   }).done(function() {
        // What ever following the link does
   });
}
Sushanth --
  • 55,259
  • 9
  • 66
  • 105