Solved

php breakes javascript

Posted on 2013-02-03
11
234 Views
Last Modified: 2013-02-09
Hi,

I'm using this script combined with Highslide to delete a picture:

$(document).ready(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Delete picture?": function() {
          var data = $("form").serialize();
          $.ajax({
           url: window.location.href,
           data: data,
          success: function(data) {
          setTimeout(function(){
           //console.log(data); // debugging: see if the timeout is triggered in console
	var ImageName= "<?php echo $imageName;?>";
               parent.refreshWindow(ImageName);  // this function must be declared two levels above this window
           }, 110);
           }
           });
        
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window


Now i want to have this variable working var ImageName= "<?php echo $imageName;?>";
Problem here is that if I set up php before this script like this:

<?php

require_once("/home/tobiasfr/include/db_connect.php");
$user1 = $_SESSION['users_id'];
$image_id1 = $_GET['id'];
$userpictureSql1 = "select * FROM userphotos WHERE user_='$user1' and id = '$image_id1' order by id";
$resultsqlquery1 = mysql_query($userpictureSql1)or die(mysql_error());
$imageName = mysql_result($resultsqlquery1, 0, filename);

?>

Open in new window


The javascript or page goes empty and nothing is displayed.
Any idea why the php before brakes the javascript?

Regards,

Toby
0
Comment
Question by:Toube
  • 8
  • 3
11 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38848698
I think it is largely a matter of the sequence of functionality.

1. The PHP runs on the server, generating the HTML document that contains the JavaScript.  Or the server sends the JavaScript, whether or not PHP has run to generate the document for the browser.  As the server is sending the JavaScript, it runs the embedded PHP which creates the value of the $imageName variable.  This is completed and the document is sent to the browser.

2. The server disconnects and waits for a request.

3. The client does something to cause a jQuery request.  But at this point, the embedded PHP has already been run, and whatever is present in the original $imageName has been embedded in the original JavaScript document.

A couple of suggestions on how to debug this... First, add error_reporting(E_ALL) to the top of all of your PHP scripts so you can be sure your script is not accidentally relying on an undefined variable.  Next use your browser's view source capability to see the generated HTML and JavaScript.  And use the JavaScript alert() function to display any variables that your script changes during execution.

You may find that you want to use an AJAX request to send some information from the jQuery to a PHP script in the background on the server.  This article teaches the "hello world" exercise about that process.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
 

Author Comment

by:Toube
ID: 38848745
Hi,

thanks will look into this..
Btw I'm using your image upload / thumbnail generator php script and it's is magnificent :)

Regards,

Toby
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38848777
Thanks for your kind words -- glad it's helpful!
0
 

Author Comment

by:Toube
ID: 38852081
Hi Ray,

been coding php for a several years and never actually stop to think about that php being a server side language.. read your article and now I'm up to speed, thanks for that.

Ok tried it out and here's how I'm trying it:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#delete-button").click(function(){
	indata = $("#xinput").val(); // <input type="hidden" id="xinput" name="filename" value="'.$filename_.'" />
	        $.post("editphotos.php", {myArg:indata}, function(response){ // this is the file editphotos.php itself using $POST['PHP_SELF']
            var ImageName = $.html(response); // how do I save the response into a variable named ImageName and send it below using a function?
        });
    });
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Poista kuva?": function() {
          var data = $("form").serialize();
          $.ajax({
           url: window.location.href,
           data: data,
          success: function(data) {
          setTimeout(function(){
               parent.refreshWindow(ImageName);  // use the ImageName variable
           }, 110);
           }
           });
        
        },
        Peruuta: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window


How do I save the php response in to javascript variable called ImageName? And send further in same script using a function.

Regards,

Toby
0
 

Author Comment

by:Toube
ID: 38852200
Ok I think this could work.. might need some adjusting thouhg am I way off or?

<script language="javascript" type="text/javascript">
var filename = null;
$(document).ready(function() {
    $('#delete-button').click(function() {
        $.ajax({
            type : 'POST',
            url : 'editphotos.php',           
            data: {
                filename : $('#fname').val() //<input type="hidden" id="fname" name="filename" value="'.$filename_.'" />
            },
            success:function (data) {
                filename = data; // Send this down below to parent.refreshWindow(filename);?
            }          
        });     
    });
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Poista kuva?": function() {
          var data = $("form").serialize();
          $.ajax({
           url: window.location.href,
           data: data,
          success: function(data) {
          setTimeout(function(){    
               parent.refreshWindow(filename); // sen the filename variable to function
           }, 110);
           }
           });
        
        },
        Peruuta: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window

0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:Toube
ID: 38852230
Ok well the above var filename outputs the whole page code.. I guess I'm way off as usually :)
0
 

Author Comment

by:Toube
ID: 38852612
Well trying it this way but still no go any one?

var filename;
$(document).ready(function() {
$("#delForm").submit(function(event) {
	/* stop form from submitting normally */
	event.preventDefault();
	/* get some values from elements on the page: */
	var $form = $( this ),
	filename_ = $form.find( 'input[name="filename"]' ).val(),
	url = $form.attr( 'action' );
	/* Send the data using post */
	var posting = $.post( url, { s: filename_} );
/* Put the results in variable filename*/
	posting.done(function( data ) {
	filename = $( data );
});
});
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Poista kuva?": function() {
          var data = $("form").serialize();
          $.ajax({
           url: window.location.href,
           data: data,
          success: function(data) {
          setTimeout(function(){
           //console.log(data); // debugging: see if the timeout is triggered in console
               $("form").submit();
               parent.refreshWindow(filename);  // this function must be declared two levels above this window
               parent.window.hs.close(); // this closes the modal window   
           }, 110);
           }
           });
        
        },
        Peruuta: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    

Open in new window

0
 

Accepted Solution

by:
Toube earned 0 total points
ID: 38852658
It was as simple as this to get the imagevalue:
$("#delForm").submit(function(event) {
	filename = $("#fname").val(); 
});

Open in new window

0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38854576
Sorry this answer wasn't helpful.  I am in the classroom teaching full time for a few weeks and do not have as much time to look at EE, so my ability to answer may be a day or two behind any posts.
0
 

Author Comment

by:Toube
ID: 38854607
No problem got it working :)
0
 

Author Closing Comment

by:Toube
ID: 38870835
I might have asked the question the wrong way. I was using a form with post.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now