Want a dialog box to be collapsible .

  • 0
  • 2
  • Question
  • Updated 1 year ago
  • In Progress
"<div id='CS'></div><a $('#CS').dialog({title:'CS',modal:false,position:[1000, 100],create: function (event) { $(event.target).parent().css('position', 'fixed');$(event.target).parent().css('top', '1000');},width:850,height:600,padding:0,\nbuttons: {Cancel: function() {$(this).dialog('close');}},\nopen: function(event, ui) {$(this).html(markup);},\nclose: function(event, ui) {}});\">Add</a>"

I want this dialog to be collapsible.  
Photo of Sania

Sania

  • 476 Points 250 badge 2x thumb

Posted 1 year ago

  • 0
  • 2
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
That is not valid anything (Formula, JavaScript, HTML or CSS).

What is this fragment supposed to be?
<a $('#CS').dialog
You seem to have this fragment of JavaScript (which I extracted) that generates a jQueryUI dialog but I have no idea what you want to accomplish or what you mean by "collapsible":

$('#CS').dialog({
  title: 'CS',
  modal: false,
  position: [1000, 100],
  create: function(event) {
    $(event.target).parent().css('position', 'fixed');
    $(event.target).parent().css('top', '1000');
  },
  width: 850,
  height: 600,
  padding: 0,
  buttons: {
    Cancel: function() {
      $(this).dialog('close');
    }
  },
  open: function(event, ui) {
    $(this).html(markup);
  },
  close: function(event, ui) {}
});


It is best not to not co-mingle JavaScript in formulas. Please clarify your question.
(Edited)
Photo of Sania

Sania

  • 476 Points 250 badge 2x thumb
"<div id='CS'></div>
<a class=Vibrant href='javascript:void(0);'onclick=\"var divURL='&lt;
iframe src="& [TEST] & "TEST
frameborder=0
width=100%
height=100%&gt;&lt;/iframe&gt;'; 
$('#CS').html(_.unescape(divURL)); 
$('#CS').dialog({
  title: 'CS',
  modal: false,
  position: [1000, 100],
  create: function(event) {
    $(event.target).parent().css('position', 'fixed');
    $(event.target).parent().css('top', '1000');
  },
  width: 850,
  height: 600,
  padding: 0,
  buttons: {
    Cancel: function() {
      $(this).dialog('close');
    }
  },
  open: function(event, ui) {
    $(this).html(markup);
  },
  close: function(event, ui) {}
});

Sorry for some reason half of the text was removed.
When I click on the button, where this formula is, it displays a dialog box. I want the dialog box to be collapse-able.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
You have many problems present. Some questions and feedback:

(1) if your overall goal is to present a jQusryUI dialog box to the user it isn't clear what you mean by "collapseable". Dialog boxes are most often modal meaning you must click one of the buttons "OK" or "CANCEL" and cannot interact with the rest of the page until the until you do so. Howver you have selected modal false meaning you can interact with the rest of the page. I have never heard of a "collapseable" modal dialog which I would presume means it can be collapsable to an icon and expanded again. Do you in fact mean "dismissable" in the sense you can CANCEL the dialog instead of just clicking OK?

(2) NEVER use onclick attributes (even if QuickBase does) to introduce JavaScript.

(3) Take all your JavaScript and put it in a code page. You still have problems with the JavaScript but at least remove it from the formula you are trying to build.
$('#CS').html(_.unescape(divURL)); 
$('#CS').dialog({
  title: 'CS',
  modal: false,
  position: [1000, 100],
  create: function(event) {
    $(event.target).parent().css('position', 'fixed');
    $(event.target).parent().css('top', '1000');
  },
  width: 850,
  height: 600,
  padding: 0,
  buttons: {
    Cancel: function() {
      $(this).dialog('close');
    }
  },
  open: function(event, ui) {
    $(this).html(markup);
  },
  close: function(event, ui) {}
});
(4) The above code appears to attempt to place markup into div#CS to form the body of the dialog box but nowhere do you define the variable markup.

(5) Also, you are likewise attempting to place html into div#CS through the first statement:
$('#CS').html(_.unescape(divURL)); 
But you are attempting to supply this html through a URL (ie divURL).

(6) With the JavaScript remove and other cleanup I see two fragments of HTML you are trying to synthesize (there are various errors here as well):
<div id='CS'></div>
<a class=Vibrant>
<iframe src=[TEST] frameborder=0 width=100% height=100%></iframe>
All I can really tell from this is that [TEST] is probably a URL field and you somehow want to embed the contents of this URL through an <iframe>.

(7) I am really trying to help you here but it is very confusing what you are trying to accomplish. In the end you are probably going to need to use the IOL technique. So I would set that up after you refine what you are trying to accomplish.

Placing JavaScript code in formulas is a bad idea - it will mess you up. You need to use the IOL Technique so that your code can be placed in a user defined page.