Use a PHP variable in JQuery

Question 1

Is there anyway I can use a php variable in the JQuery script?

Example:

PHP variable: $sr2
Excerpt of JQuery script (with variable): $('#a2_bottom_$sr2')

How can I make it so the variable is valid in that JQuery part?

Thanks

Question 2

What you could simply do is use your PHP to echo out the code to initiate a JavaScript variable.

<script type="text/javascript">
<?php

  $phpVar = "foo";
  echo "var phpVariable = '{$phpVar}';";

?>
</script>

Once the PHP code is parsed, and the HTML is sent to the user - all they will see is the result of the PHP echo -

<script type="text/javascript">
  var phpVariable = 'foo';
</script>

Now your phpVariable is available to your JavaScript! So you use it like you would in any other case -

$("div."+phpVariable);

That will retrieve us any <div> element with a foo class -

<div class="foo"></div>

Question 3

*Updated to include all of the fields you are editing

It sounds like you have the right idea. You would probably want to create a new div on your page for the edit modal dialog.

<div id="dialog-edit" style="background-color:#CCC;display:none;">
    <input type="hidden" id="editLinkId" value="" />
    Link Name: <input type="text" id="txtLinkTitle" class="text" />
    Link Description <input type="text" id="txtLinkDescription" class="text" />
    Link URL <input type="text" id="txtLinkURL" class="text" />
</div>

When the user clicks your edit button you'll want to populate the hidden field and the text box with the values of the link they clicked on and then turn the dialog on.

$('.edit').click(function () {
            //populate the fields in the edit dialog. 
            var parent = $(this).closest('div');
            var id = parent.attr('id');

            $("#editLinkId").val(id);

            //get the title field
            var title = $(parent).find('.linkHeader').html();
            var description = $(parent).find('.linkDescription p').html();
            var url = $(parent).find('.linkDescription span a').attr("href");
            $("#txtLinkTitle").val(title);
            $("#txtLinkDescription").val(description);
            $("#txtLinkURL").val(url);

            $("#dialog-edit").dialog({
                bgiframe: true,
                autoOpen: false,
                width: 400,
                height: 400,
                modal: true,
                title: 'Update Link',
                buttons: {
                    'Update link': function () {
                        //code to update link goes here...most likely an ajax call.

                        var linkID = $("#linkID").val();
                        var linkTitle = $("#txtLinkTitle").val()
                        var linkDescription = $("#txtLinkDescription").val()
                        var linkURL = $("#txtLinkURL").val()
                        $.ajax({
                            type: "GET",
                            url: "ajax_calls.php?function=updateLink&linkID=" + linkID + "&linkTitle=" + linkTitle + "&linkDescription=" + linkDescription + "&linkURL=" + linkURL,
                            dataType: "text",
                            error: function (request, status, error) {
                                alert("An error occured while trying to complete your request: " + error);
                            },
                            success: function (msg) {
                                //success, do something 
                            },
                            complete: function () {
                                //do whatever you want 
                            }
                        }); //end ajax
                        //close dialog
                        $(this).dialog('close');
                    },
                    Cancel: function () {
                        $(this).dialog('close');
                    }
                },
                close: function () {
                    $(this).dialog("destroy");
                }
            }); //end .dialog()

            $("#dialog-edit").show();
            $("#dialog-edit").dialog("open");

        }) //end edit click

Question 4

just check if the URL has a "http://" then proceed
else add a "http://" by your script

<!DOCTYPE html>
<html>
<body>
<?php
$url = $_GET['url'];
print $url;
if (strpos($url,'http') === 0) { //found at position 0
    //ok
} else {

    if ((strpos($url,'google') === 0) or
       (strppos($url,'some.other.site1') === 0) or 
       (strppos($url,'some.other.site2') === 0))  // here all the knowns SSL - Sites (this can not be the ultimate solution)
    {
        $url = 'https://'.$url;
    } else {
        $url = 'http://'.$url;
    }

}
print '<br/>'.$url; 
?>

<form name="input" method="get">
Url: <input type="text" name="url" action="<?php echo $url; ?>">
<input type="submit" value="Go">
</form>

<iframe src="<?php echo $url; ?>">
  <p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>

Question 5

Thanks everyone!

Your comments and answers helped me find the solution I needed.

$root = dirname(__FILE__);
include "$root/assets/includes/commentTest.php";

Apparently my root is here /var/www/html instead of right after the TLD in the URL.

Question 6

i think your problem may be in ajax code since you are using formData object . try append the message variable with it

$('#submit').on('click', function(){

  var fd = new FormData(this);
  fd.append('file',$('#file')[0].files[0]);
  fd.append('message ',$('#message').val());

  $.ajax({
    method:"POST",
    url:"<?php echo site_url('home/send_chat');?>",    
    data: fd,  
    cache: false,
    contentType: false,
    processData: false,   
    success: function(data){                 
      alert(data);
    },
    error: function(xhr, status, error) {
      alert(xhr.responseText);
    }  
  });
});

Use a PHP variable in JQuery

Answers

php,jquery