How to 'open' and 'close' a jQueryMobile "Collapsible" at run time?


#1

How to ‘open’ and ‘close’ a jQueryMobile “Collapsible” at run time?


#2

This is what I use (javascript):

$("#ElementName").trigger(“expand”);
$("#ElementName").trigger(“collapse”);


#3

Hi Buck… I’ve never coded javascript directly into an app… So I tried this

Function CbF1h_onclick()
  '$("#CbF1a").trigger(“expand”);
  $("#CbF1a").trigger(“collapse”);
End Function

…and the form effectively did not even show up on the screen (only the header)… can you help me by showing me how to utilize your code…
Thanks… Tom


#4

I commented out the “expand” line


#5

I tried this and did not work…

    Function CbF1h_onclick()
      JavaScript
      $("CbF1a").trigger(“collapse”);
      End JavaScript  
    End Function

And this also did not work…

    Function CbF1h_onclick()
      JavaScript
      $("#CbF1a").trigger(“collapse”);
      End JavaScript  
    End Function

Note, CbF1h and CbF1a are ID’s of two Collapsibles, JQuiryMobile, Basic

The error on Console log was…
“Uncaught SyntaxError: Invalid or unexpected token
ajax-loader.gif Failed to load resource: the server responded with a status of 404 (File not found)”


#6

These work, and have been added to the wiki:

$("#Collapsible1").collapsible("expand")
$("#Collapsible1").collapsible("collapse")

You can ignore the ajax-loader.gif Failed to load resource error. It’s a minor bug in the Collapsible control that George has said will be fixed.

Kind regards,
Doug


#7

Yes, this is fixed in the next version. The message can be ignored for now.


#8

Hi Doug…

What I’m trying to do is on a Form with 8 Collapsible, id’ed as CbF1a… thru CbF1h at the bottom… whenever a collapsible is opened, I want the ‘last’ opened Cb to be closed.
But first I need to get a Cb to close at run time.
So far, I’ve not been able to do that, in spite of your and Buck’s help.

Here’s the code I’ve created:
Function CbF1h_onclick()
$(“CbF1a”).collapsible(“collapse”)
End Function
Did not work

I also tried:
Function CbF1h_onclick()
$("#CbF1a").collapsible(“collapse”)
End Function
Did not work

I don’t know if the # sign is a JaveScript requirement, or just the coder’s naming convention.

I also tried:
Function CbF1h_onclick()
JavaScript
$("#CbF1a").collapsible(“collapse”)
End JavaScript
End Function
Did not work both with and without the # prefix.

I also tried:
Function CbF1h_onclick()
MsgBox (“Inside the CbF1h_onclick function”)
JavaScript
$("#CbF1a").collapsible(“collapse”)
End JavaScript
End Function
MsgBox (“Outside the CbF1h_onclick function”)

The result was that the “…Outside…” displayed as soon as the Form was opened, but the “…Inside…” never displayed, nor did the “…Outside…” display when the CbF1h (or and other Cb) was clicked. This, I think, says that the “onclick” function is not working.


#9

Some notes:

  • Enclose code here with triple back ticks and it will be nicely formatted.
 CbF1h_onclick() 

48 AM

  • The # is part of jQuery. The jQuery library makes a lot of things easier. All its features are wrapped in function called $ (which is a valid variable name in JavaScript). So $() is simply a function to call jQuery. It takes an argument which identifies which controls should be affected: the hash mark (#) means the argument is the ID of the control. Make sense now?

  • The syntax of BASIC and JavaScript is identical in this case, so there is no need to wrap using JavaScript/End JavaScript.

  • MsgBox functions are asynchronous. Code will keep running while it displays. This is noted here: http://wiki.nsbasic.com/NSB.MsgBox. It’s better to use the console.log statement for tracing: http://wiki.nsbasic.com/Console.log.


#10

Here’s the console log when running the following code:

Function CbF1h_onclick()
MsgBox (“Inside the CbF1h_onclick function”)
JavaScript
$("#CbF1a").collapsible(“collapse”)
End JavaScript
End Function
MsgBox (“Outside the CbF1h_onclick function”)

But this time, ONLY the header line appeared… none of the other controls on the form displayed… When I took the above code back out, the app worked as it should.

Creating Application Cache with manifest http://127.0.0.1:59197/SMNChangeTransferToNewOrganization/OfflineApp.appcache
(index):1 Application Cache Checking event
(index):1 Application Cache Downloading event
code.js:6 Uncaught SyntaxError: Invalid or unexpected token
(index):1 Application Cache Progress event (0 of 11) http://127.0.0.1:59197/SMNChangeTransferToNewOrganization/nsb/jquery.mobile.css
(index):1 Application Cache Progress event (1 of 11) http://127.0.0.1:59197/SMNChangeTransferToNewOrganization/nsb/fastclick.js
(index):1 Application Cache Progress event (2 of 11) http://127.0.0.1:59197/SMNChangeTransferToNewOrganization/nsb/jquery.mobile.js
(index):1 Application Cache Progress event (3 of 11) http://127.0.0.1:59197/SMNChangeTransferToNewOrganization/nsb/jquery.modal.min.css
(index):1 Application Cache Progress event (4 of 11) http://127.0.0.1:59197/SMNChangeTransferToNewOrganization/code.js
(index):1 Application Cache Progress event (5 of 11) http://127.0.0.1:59197/SMNChangeTransferToNewOrganization/iChange.png
(index):1 Application Cache Progress event (6 of 11) http://127.0.0.1:59197/SMNChangeTransferToNewOrganization/nsb/jquery.js
ajax-loader.gif Failed to load resource: the server responded with a status of 404 (File not found)
(index):1 Application Cache Progress event (7 of 11) http://127.0.0.1:59197/SMNChangeTransferToNewOrganization/nsb/nsbstyle.css
(index):1 Application Cache Progress event (8 of 11) http://127.0.0.1:59197/SMNChangeTransferToNewOrganization/nsb/close.png
(index):1 Application Cache Progress event (9 of 11) http://127.0.0.1:59197/SMNChangeTransferToNewOrganization/nsb/jquery.modal.min.js
(index):1 Application Cache Progress event (10 of 11) http://127.0.0.1:59197/SMNChangeTransferToNewOrganization/nsb/hfunc.js
(index):1 Application Cache Progress event (11 of 11)
(index):1 Application Cache Cached event


#11

What is a “triple back tick”? There used to be an option in one of the icons above to format code, but I’m not finding it…

Now I understand the $ and #

Ran this code:
Function CbF1h_onclick()
console.log(“Inside the CbF1h_onclick Function”)
$("#CbF1a").collapsible(“collapse”)
End Function
console.log(“Outside the CbF1h_onclick Function”)

And got this error (same as on console log)
“Uncaught SyntaxError: Invalid or unexpected token line 6 column 13”

And only header appears… none of the other controls. I don’t know what I’m doing wrong.


#12

Triple back tick is this key 3 times:

IMG_2244


#13

Looking in the Sources tab of the Chrome Debugger, what is line 6?


#14

Thanks, George… got it.

Line 6 is blank… nothing on it in the code…

Here’s the console log…

(index):1 Application Cache Checking event
(index):1 Application Cache Downloading event
(index):1 Application Cache Progress event (0 of 11) http://127.0.0.1:51385/SMNChangeNewPosition/nsb/close.png
code.js:6 Uncaught SyntaxError: Invalid or unexpected token
(index):1 Application Cache Progress event (1 of 11) http://127.0.0.1:51385/SMNChangeNewPosition/nsb/fastclick.js
(index):1 Application Cache Progress event (2 of 11) http://127.0.0.1:51385/SMNChangeNewPosition/code.js
(index):1 Application Cache Progress event (3 of 11) http://127.0.0.1:51385/SMNChangeNewPosition/nsb/jquery.modal.min.css
(index):1 Application Cache Progress event (4 of 11) http://127.0.0.1:51385/SMNChangeNewPosition/nsb/jquery.modal.min.js
(index):1 Application Cache Progress event (5 of 11) http://127.0.0.1:51385/SMNChangeNewPosition/iChange.png
(index):1 Application Cache Progress event (6 of 11) http://127.0.0.1:51385/SMNChangeNewPosition/nsb/nsbstyle.css
(index):1 Application Cache Progress event (7 of 11) http://127.0.0.1:51385/SMNChangeNewPosition/nsb/jquery.mobile.css
(index):1 Application Cache Progress event (8 of 11) http://127.0.0.1:51385/SMNChangeNewPosition/nsb/jquery.js
(index):1 Application Cache Progress event (9 of 11) http://127.0.0.1:51385/SMNChangeNewPosition/nsb/hfunc.js
(index):1 Application Cache Progress event (10 of 11) http://127.0.0.1:51385/SMNChangeNewPosition/nsb/jquery.mobile.js
(index):1 Application Cache Progress event (11 of 11) 
(index):1 Application Cache Cached event
ajax-loader.gif Failed to load resource: the server responded with a status of 404 (File not found)```

and here's the code...

```F1h_onclick()
console.log(“Inside the CbF1h_onclick Function”)
$("#CbF1a").collapsible(“collapse”)
End Function
console.log(“Outside the CbF1h_onclick Function”)```

#15

The first line of my code should read:

Function CbF1h_onclick()


#16
  1. Put the triple tick on its own line, not the same line as code.
  2. Go into the Chrome Developer Tools. Click on the error message. It should open a code window highlighting line 6. What is that line?

#17

I ran the code further down this text and clicked on the red highlighted line in the console log… nothing happened… on the right end of that line is “Code.JS:6”, I clicked on that and what popped up was the following code:

'use strict';
Header.onshow = function() {
Form1.show();
};
CbF1h.onclick = function() {
  console.log(“Inside the CbF1h_onclick Function”);
$("#CbF1a").collapsible(“collapse”);
};

Here’s the code from the app:

Function CbF1h_onclick()
  console.log(“Inside the CbF1h_onclick Function”)
$("#CbF1a").collapsible(“collapse”)
End Function

Note that when I opened this app, the only thing that appears on the Form is the header.

I ran the app again WITHOUT these 5 lines and the full form appeared.

I’ve attached the program… it is the prototype that I use for all 55 of the apps I’ve writtenSMNTestPrototype.nsx (44.4 KB)

Note: What I’m trying to do is have the previous open Collapsible(Cb) close when a new Cb is opened… My intent is to store the ID of the opened Cb in a variable, then when ANOTHER Cb is opened, the function we’re trying to make work (collapse a Cb at run time) will close the Cb whose ID is stored in the variable. But first I have to be able to collapse a Cb at run time, then add the code to collapse the Cb whose ID is in the variable.


#18

I notice that the quote signs in your console.log and collapse statements are “smart” quotes: notice how they are at a slight angle?

These won’t work.

  console.log(“Inside the CbF1h_onclick Function”)  'bad
  console.log("Inside the CbF1h_onclick Function")  'good

See the difference in the quote character?


#19

Got it…

So I ran the app that I downloaded 2 steps above in this thread, with the following code…

Function CbF1h_onclick()
  console.log("Inside the CbF1h_onclick Function")
$("#CbF1a").collapsible("collapse")
End Function

Result was that all of the form was displayed as it should, but the console log did NOT contain the note, nor did CbF1a collapse.

Are we sure that the ‘onclick()’ function in jQueryMobile Collapsible is working? Unless I’ve coded it incorrectly, this should have worked…

Here’s the console log…

Creating Application Cache with manifest http://127.0.0.1:57419/SMNTestPrototype/OfflineApp.appcache
(index):1 Application Cache Checking event
(index):1 Application Cache Downloading event
(index):1 Application Cache Progress event (0 of 12) http://127.0.0.1:57419/SMNTestPrototype/nsb/fastclick.js
(index):1 Application Cache Progress event (1 of 12) http://127.0.0.1:57419/SMNTestPrototype/nsb/jquery.mobile.css
(index):1 Application Cache Progress event (2 of 12) http://127.0.0.1:57419/SMNTestPrototype/nsb/jquery.modal.min.css
(index):1 Application Cache Progress event (3 of 12) http://127.0.0.1:57419/SMNTestPrototype/code.js
(index):1 Application Cache Progress event (4 of 12) http://127.0.0.1:57419/SMNTestPrototype/nsb/images/192.png
(index):1 Application Cache Progress event (5 of 12) http://127.0.0.1:57419/SMNTestPrototype/nsb/images/LauncherIcon57.png
(index):1 Application Cache Progress event (6 of 12) http://127.0.0.1:57419/SMNTestPrototype/nsb/jquery.js
(index):1 Application Cache Progress event (7 of 12) http://127.0.0.1:57419/SMNTestPrototype/nsb/nsbstyle.css
(index):1 Application Cache Progress event (8 of 12) http://127.0.0.1:57419/SMNTestPrototype/nsb/jquery.modal.min.js
(index):1 Application Cache Progress event (9 of 12) http://127.0.0.1:57419/SMNTestPrototype/nsb/close.png
(index):1 Application Cache Progress event (10 of 12) http://127.0.0.1:57419/SMNTestPrototype/nsb/jquery.mobile.js
(index):1 Application Cache Progress event (11 of 12) http://127.0.0.1:57419/SMNTestPrototype/nsb/hfunc.js
(index):1 Application Cache Progress event (12 of 12) 
(index):1 Application Cache Cached event
ajax-loader.gif Failed to load resource: the server responded with a status of 404 (File not found)

#20

Is the control called CbF1h or CbF1ha? You seem to use both names.