Search jQuery

jQuery Forum

How to solve this tricky issue?

in Using jQuery Plugins • 4 years ago

I'm trying to develop a program to automatically open the "east" region of EasyUI framework by clicking a button. My solution is to change the value of the "collapsed" attribute in the data-options attribute. Take below script for reference:

</div>

I've used various JQuery ways to do this, but all failed. Below are some of my testing results (with comments)

alert($("#east").attr("data-options")); //the value of data-options can be shown correctly, so it works.

$("#east").attr("data-options","region:'east',split:true,collapsed:true,title:'East1'");//this line does not work, it is unable to change any attribute values in the data-options attribute.

$("#east").panel({
title: "title123", //this can change the value of the title, so this line works.
collapsed: false, //the status of "collapsed" remains unchanged, so it does not work.
});

var panel = $("#mydiv").layout("panel","east");
panel.panel({title:"tital"}); //the status of title can be changed, so this line works.
panel.panel({collapsed:true}); //this line does not work.

Could anyone help to change the status of the "collapsed" status, so that i can open the east region automatically? Thanks a lot.

Replies(11)

jakecigar

Re: How to solve this tricky issue?

4 years ago

EasyUI has their own support. Purchase and Contact - jQuery EasyUI

At the high price of USD 449.00 few, if anyone here has ever used it.

Good luck!

JΛ̊KE

watusiware

Re: How to solve this tricky issue?

4 years ago

I am unfamiliar with EasyUI, and doubt if anybody else here is. You should seek support from EasyUI. All we can do is make some guesses.

When you say your code doesn't "work", what exactly do you mean? Did you examine the DOM using the built-in debug tools in your desktop browser, and see that the data- attributes did not change? Or did you simply observe that your change had no visual effect?

There is nothing wrong with the code you show. It should change the data-attributes. We can guess that perhaps there is some error in code prior to this, causing your code not to run at all. Did you check for errors on the javascript console?

But we can't guess if EasyUI pays attention to changes made after widgets are initialized! You need to ask the authors of EasyUI.

(Edit: won't work...)

However, changing data-attributes they way you show is not the usual way. Most plugins would use the jQuery .data() function to access jQuery's internal cache of the values. Assuming this is so, there is a much easier way:

$('#east').data('options').collapsed = true;

This way, you don't need to concern yourself with setting all of the other attributes. You can easily change just one.

Note that since this doesn't change the actual attribute, you cannot use the browser's inspection/debugging tool to verify, as you can when you change the attribute.

Again, we cannot guess if EasyUI will pay attention to changes made after widget initialization. Perhaps there is some "refresh" function that needs to be called, perhaps they provide a function to collapse/expand, perhaps it is just not supported. We can't guess.

That product comes with support for a year. If your support expired, I'd suggest you renew it!

watusiware

Re: How to solve this tricky issue?

4 years ago

Note I edited the line of code I showed above.

And I caution that MOST plugins that have data-options only pay attention to them once, at initialization of widgets. Then they provide some other way of changing them later.

But we can only speculate about a library that we know nothing about, and that is not open-source.

jakecigar

Re: Re: How to solve this tricky issue?

4 years ago

Strangely, the plugin does not use JSON format for data-options. So normal ways of dealing with it go out the window.

JΛ̊KE

watusiware

Re: How to solve this tricky issue?

4 years ago

Ah, you are right, Jake. To paraphrase, "sometimes a string is just a string".

As the JSON curly brackets are missing from the data-attributes, jQuery won't interpret them as JSON and make an object.

watusiware

Re: How to solve this tricky issue?

4 years ago

I see there is a freeware edition with some limitations on allowed usage. And there is a forum for support. You should seek support from the EasyUI forum, where there will be people who know something about it!

You could perhaps:

$('#east').data("region:'east',split:true,collapsed:true,title:'East1'");

But if your code doesn't work, this won't either.

jakecigar

Re: How to solve this tricky issue?

4 years ago

jQuery EasyUI Forum Is where you need to go for assistance.

JΛ̊KE

watusiware

Re: How to solve this tricky issue?

4 years ago

You're just going about it the wrong way.

EasyUI provides .collapse() and .expand() functions.

It's likely that changes to the data-options are just ignored, at least for collapse.

Having "easy" in the name, and using "drag and drop" for construction does not excuse the need to read the documentation. Those widgets are complex, with many, many options, events, and functions. Fortunately, it appears well-documented. You will need to dig-in and understand how they go about things.

johnson y..

Re: How to solve this tricky issue?

4 years ago

Thanks all for the responses.

Regarding seeking support from EasyUI, I'm really disapointed

because I'm unable to get my email address validated (actually I was trying to register an account in EasyUI forum using my email account before I get to this forum, but I have not received any email confirmation from them at all. I'm not sure whether EasyUI forum has restrictions on users from mainland China or not.)

Regarding using collapse() and expand() functions to solve the issue, I've also tried, but with failure.

And I've debugged my scripts to make sure that no other section of scripts would affect the normal execution, and I have not found any problems yet.

So, it still remains a mystery to me.

Hope someone can dig in a little bit to see what is the real reason behind it.

Thanks again.

johnson y..

Re: How to solve this tricky issue?

4 years ago

I appreciate it greatly that if someone could help send this post to EasyUI forum and tell me the link, or simply make a workable demo(to automatically open the "east" region).

johnson y..

Re: How to solve this tricky issue?

4 years ago

It turns out to be quite easy. Below is an example how we can open/close the "east" region automatically through scripts:

$("#mydiv").layout("expand","east");

$("#mydiv").layout("collapse","east");

Top Reply

Response title

Attachments

jQuery Forum

How to solve this tricky issue?

Replies(11)

Re: How to solve this tricky issue?

Re: How to solve this tricky issue?

Re: How to solve this tricky issue?

Re: Re: How to solve this tricky issue?

Re: How to solve this tricky issue?

Re: How to solve this tricky issue?

Re: How to solve this tricky issue?

Re: How to solve this tricky issue?

Re: How to solve this tricky issue?

Re: How to solve this tricky issue?

Re: How to solve this tricky issue?

Statistics

Tags

Actions