Forums

block jquery dialog href url

Permalink 1 user found helpful
view.php

<script type="text/javascript">
loadaPopUp<?php echo $bID;?> = function() {
jQuery.fn.dialog.open({
title: '<?php echo $popuptitle;?>',
href: '<?php echo $popupurl;?>',
width: <?php echo $popupwidth; ?>,
modal: false,
height: <?php echo $popupheight;?>,
onClose: function() {
$.fn.dialog.closeTop();
}
});

}

It is working pop up but not working with url. Can please anyone help?

Thanks

John
 
rockface replied on at Permalink Reply
rockface
I've been having the same problem in both blocks and single pages.

Then came across this solution in another forum posting...


1. Create $popupurl like this
$uh = Loader::helper('concrete/urls');
$popupurl = $uh->getToolsURL('filename','package_name');

NOTE: The above 'filename' does NOT use the file extension!


2. You can also append parameters to it...
$popupurl = $uh->getToolsURL('filename','package_name')."?bID=".$bID;

3. Place your filename.php in this folder:
/packages/package_name/tools

It should now find your external file.
JSA1972 replied on at Permalink Reply
Good afternoon Rockface. Thanks for your answer. I am not sure. I need the popupurl links from database. I want the url links to google document.
rockface replied on at Permalink Reply
rockface
Ahhh, I see... You may still consider using a tools\mygoogledoc.php file as your popup and load it as shown above, then have that php dedicated to going out, reading and displaying your google doc content.

NOTE: the filename.php (given in the example) is a literal file located in the tools folder. there is no db call in the code.
JSA1972 replied on at Permalink Reply
still not working :-(

I have put iframe.php onto the tools

iframe.php

<iframe style="width:100%, "src="<?php $popupurl?>" width="100%" height="100%" SCROLLING=no>
<p>Your browser does not support iframes.</p>
</iframe>

$popupurl is database

it's not working but

<iframe style="width:100%, "src="https://docs.google.com/Doc?docid=######" width="100%" height="100%" SCROLLING=no>
<p>Your browser does not support iframes.</p>
</iframe>

yes working

I think the iframe.php needs database
JSA1972 replied on at Permalink Reply
Thanks Rockface. Why no db call in the code?
rockface replied on at Permalink Reply
rockface
I'm not understanding your comment/question. $popupurl is a variable not a database. It was only used in my example because you used in your original question. It could have been $SomeStupidPopupWindow and still worked.

You do not need to connect to a database or even have a database on your site for jquery to open a popup window... they are separate topics.
JSA1972 replied on at Permalink Reply
Yes the pop up working. But i had removed to the code :- href: '<?php echo $popupurl;?>'. Changed to element: '#iframe'.

See my code below:-

<iframe style="width:100%" height="<?php echo $popupheight;?>" src="<?php echo $popupurl?>" SCROLLING=no style="display: none" id="iframe">
<p>Your browser does not support iframes.</p>
</iframe>

<script type="text/javascript">
loadaPopUp<?php echo $bID;?> = function() {
jQuery.fn.dialog.open({
title: '<?php echo $popuptitle;?>',
element: '#iframe',
width: <?php echo $popupwidth; ?>,
modal: false,
height: <?php echo $popupheight;?>,
onClose: function() {
$.fn.dialog.closeTop();
}
});

}

loadaPopUp<?php echo $bID;?>();

</script>

The pop up's iframe is working links google document.

Thanks for the comments. :-)
JohntheFish replied on at Permalink Reply
JohntheFish
For easy examples to follow on ajax, popup dialogs and javascript, have a look at http://www.concrete5.org/documentation/how-tos/developers/ajax-less... and http://www.concrete5.org/documentation/how-tos/developers/ajax-less...
rockface replied on at Permalink Reply
rockface
Thanks JohntheFish,
While these sample were easier to follow, they really don't show how to pass data to or from a UI.

After a few more hours of digging, the code is starting to come together.

I'll post my (simplified) code here for your guys to critique... just in case I'm doing something really waked out! ;-)

The idea is to have a single page (on the dash board) which lists some table data. Each row (record) is clickable and opens a popup editing window. The dialog's save button then passes each field to a php file for processing via ajax.

Here is my code (simplified) for this example.

FILE: /packages/my_package/single_pages/dashboard/my_package/view.php
CODE DESC: Required stuff to be in top of file…
// Used for adding buttons
$ih = Loader::helper('concrete/interface');
//Used to find URLs of other files
$uh = Loader::helper('concrete/urls');
//Used to connect to db
$db = Loader::db();


FILE: /packages/my_package/single_pages/dashboard/my_package/view.php
CODE DESC: The list of table data (each row is a record) and is clickable
<table width='100%' class="ccm-results-list">
  <tr><th>ID</th><th>Name</th><th>Other Data</th></tr>
  <?php
    $db = Loader::db();
    $ResultSet = $db->query("select * from MyCustomTable");
    while ($RowOfData = $ResultSet ->fetchRow()) {
      $id = $RowOfData [‘id’];
      echo "<tr onclick='EditRecord({$id});'>";
      echo "<td>{$ID}</td>";
      echo "<td><input type='text' id='Name_{$ID}' value='{$ResultSet['Name']}'></td>";
      echo "<td><input type='text' id='Data_{$ID}' value='{$ResultSet['Data']}'></td>";
      echo "</tr>";
    }
  ?>
</table>


FILE: /packages/my_package/single_pages/dashboard/my_package/view.php
CODE DESC: The javascript function which opens the edit dialog
function EditRecord(id) {
    $("input#id").val(id).val());
    $("input#Name").val($("input#Name_"+id).val());
    $("input#Data").val($("input#Data_"+id).val());
    jQuery.fn.dialog.open({
      element: 'div#editwindow',
      title: '<?php echo t('Edit Data’)?>',
      width: 500,
      height: 285,
      modal: false,
      autoOpen: false,
      onClose: function() {location.reload(true)}
    });
  }


FILE: /packages/my_package/single_pages/dashboard/my_package/view.php
CODE DESC: The hidden DIV tag which holds the edit dialog 
<div id="editwindow" name="editwindow" style=”display:none;”>
  <input type='hidden' id="id" />
  <table >
    <tr><th>Name</th><td><input type='text' id="Name" /></td></tr>
    <tr><th>Data</th><td><input type='text' id="Data" /></td></tr>
  </table>
  <?php print $ih->button_js("Save", "SaveRecord();");?>
</div>


FILE: /packages/my_package/single_pages/dashboard/my_package/view.php
CODE DESC: The javascript function which reads the dialog data and passes it to the PHP file via ajax
function SaveRecord() {
  var dataString += "&id="+$("input#id").val();
  dataString += "&name="+ $("input#Name").val();;
  dataString += "&Data="+$("input#Data").val();
  $.ajax({
    type: "POST",
    data: dataString,  
    dataType: 'html',
    url: "<?php  echo $uh->getToolsURL('savedata',my_package'); ?>",
    success: function(returned_data){
      $.fn.dialog.closeTop();
      //alert(returned_data);
    }
  }); 
}


FILE: /packages/my_package/tools/savedata.php
CODE DESC: writes the data to the database
<?php
    $id = $_REQUEST['id'];
    $Name = $_REQUEST['Name'];
    $Data = $_REQUEST['Data'];
    $db = Loader::db();
    $db->Execute(“UPDATE  `myCustomTable` SET  `Name` =  '{$Name}’, `Data`=’{$Data}’ WHERE  `id` = $id;
”);    
    echo t(‘Your data has been saved’);
JohntheFish replied on at Permalink Reply
JohntheFish
(Cant sleep tonight, so 3am in the UK. All the below is just my immediate ideas and untested)

Your experience of getting a complete page is a clue that the ajax tool url you are using is wrong.

You don't mention if your single page is in a package or directly in controllers & views. Also, I think you may be overcomplicating matters with the dialog - you already have html input elements in your first table, so I can't see why you need to copy them to a popup dialog to edit. Could you edit in place, and just have a link or icon at the end of the row to call SaveRecord()?
(It goes back to the old joke about the man asking for directions, answer "well, I wouldn't start from here")

If it is in a package, the code you need is very close to that in ajax_data_lessons example 3. In the controller: 
$tool_name = 'savedata';
$tool_helper = Loader::helper('concrete/urls');
$this->set ( $tool_name, $tool_helper->getToolsURL($tool_name, 'package_name'));

In the lesson example block controller this is enclosed in a function 
private function set_package_tool($tool_name){......

if it is in a direct single page controller, I believe you leave the package name out of the call to getToolsURL.

Now in your view, you will have the variable $savedata already prepared with your URL. I would build this in as a parameter to SaveRecord()

<?php print $ih->button_js("Save", "SaveRecord('".$savedata."');");?>


You are coding your url with data for a get, but using post. So use a js object to attach the data for post.

function SaveRecord(tool_url) {
  var data_id = $("input#id").val();
  var data_name = $("input#Name").val();
  var data_val = $("input#Data").val();
  $.ajax({
    type: "POST",
    data: {id:data_id,name:data_name,Data:data_val},  
    dataType: 'html', // not sure about this, maybe easier as JSON or plain text
    url: tool_url,
    success: function(returned_data){
      /*
      alert(returned_data);
      and whatever you want to do with it?
      - write it back to the row, in which case json may be better, 
      - just confirm it has been saved, in which case text may be better
Viewing 15 lines of 20 lines. View entire code block.



In savedata.php (I have stuck with your capitalisation). 
$data_id = $_POST['id'];
$data_name = $_POST['name'];
$data_val = $_POST['Data'];
// Some code that works on the data, saves it to wherever and returns whatever
// prepare returned data, perhaps in JSON format
echo $returned_data;
exit;



Overall, if you are updating your original table with the returned data, I would modify the html so as to be a convenient target for a complete new row of html returned from savedata.php. Then you could use the jquery 'load' ajax function which takes care of the return for you (as I have in the lesson example). savedata.php would simply echo a complete new row for the table.

If you do this, you will need to bind the event handler with 'live' so as to preserve future event handling through the html update.
rockface replied on at Permalink Reply
rockface
I think i was editing my post at the same time you made your comments... Thanks! and sorry we did not sync a little better! ;-)

Anyway, I did get it working tonight and wanted to share it with the world. I'll still look over your post, as I'm a bit new at C5 and could use All the help people are willing to pass out.

Thanks again,
rockface
JohntheFish replied on at Permalink Reply
JohntheFish
Yes, I can see where you have made a few changes to the original.

I didn't mention it initially, just to avoid confusion, but you also need to defend against security attacks calling the tool directly.

In the controller:
$vt = Loader::helper('validation/token');
$this->set('own_token_name', $vt->generate('own_token_name'));

(or in the view/saveRecord, as you have done for getToolsURL)

In SaveRecord
token = '<?php echo $own_token_name; ?>';
// then add token into the post data.


Then at the start of savedata.php
$vf = Loader::helper('validation/form');
$vf->setData($_POST);
$vf->addRequiredToken('own_token_name');
if (!$vf->test()) {
    echo 'Forbidden to update description text';
    exit;
}
// the rest of your code


Looking at your code, you still have a bit of inconsistency between get and put parameter passing.