Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Making a option selected in a select element in my joomla component backend form

Posted on 2014-11-15
4
Medium Priority
?
504 Views
Last Modified: 2014-11-21
Hi, im trying to extend a joomla 3 component's backend form, by adding a datatable which populates data from a table in the database, where the user can add, edit or delete a row. I have the data being displayed and can delete data, but when i come to edit the data im having some issues.

When the user pressed the edit button the data is to be pulled from the database and populated in a form so the user can make changes to it. im getting the data and im populating the form correctly, but i have a select element where i need to make one of the options selected, and i'm having trouble with this, as joomla for some reason alters the select element. below is my code which will make more sense.

// My JQuery code for populating the form

	function populateForm(data) {

	    var dId = jsl('#ajax-discount #d_id');
	    var dState = jsl('#ajax-discount #d_state');
	    var dCode = jsl('#ajax-discount #d_code');
	    var dType = jsl('#ajax-discount #d_type');
	    var dValue = jsl('#ajax-discount #d_value');
	    var formStatus = jsl('#ajax-discount-msg');

	    dId.val(data.message.id);
	    dState.val(data.message.state);
	    dCode.val(data.message.discount_code);

	    //jsl('select[name="d_type"]').val(data.message.discount_type);

	    dType.val(data.message.discount_type).trigger( "listz:updated" );

	    //jsl("#ajax-discount #d_type_chzn > ul.chzn-results > li [value='2']").attr("selected", "selected");

	    //dType.val(data.message.discount_type);
	    //dType.change();

	    dValue.val(data.message.discount_value);

	}

Open in new window


// my form which is located in my components tmpl/edit.php file
      
	<div class="control-group">
        <div class="control-label">Discount Type</div>
        <div class="controls">
            <select id="d_type" name="d_type">
                <option value="0"></option>
                <option value="1">$ AUD</option>
                <option value="2">% Discount</option>
                <option value="3">Free Shipping</option>
            </select>
        </div>
    </div>	

Open in new window




// the select element when its rendered in the browser

	<div class="control-group">
	    <div class="control-label">Discount Type</div>
	    <div class="controls">
	        <select id="d_type" name="d_type" class="chzn-done" style="display: none;">
	            <option value="0"></option>
	            <option value="1">$ AUD</option>
	            <option value="2">% Discount</option>
	            <option value="3">Free Shipping</option>
	        </select><div class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 220px;" title="" id="d_type_chzn"><a class="chzn-single chzn-default" tabindex="-1"><span>Select an option</span><div><b></b></div></a><div class="chzn-drop"><div class="chzn-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chzn-results"><li class="active-result" style="" data-option-array-index="1">$ AUD</li><li class="active-result" style="" data-option-array-index="2">% Discount</li><li class="active-result" style="" data-option-array-index="3">Free Shipping</li></ul></div></div>
	    </div>
	</div>

Open in new window



I have tried many different ways, but im stuck at the moment can any please give me some advice or know what i should be doing.
0
Comment
Question by:thinklings
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40445568
So :

1) you know what it the problem.
as joomla for some reason alters the select element.

2) you know how to make an option selected (line 14)
 //jsl('select[name="d_type"]').val(data.message.discount_type);

Open in new window


Right?
0
 

Author Comment

by:thinklings
ID: 40445670
Hi leakim971,

Thanks for the reply, i do know but i cant seem to figure it out correctly, my javascript is a little weak and every time i try to figure it out i confuse my self.

i know i need to get my selector code correct. but other then that i'm hoping a expert can help me.
0
 

Accepted Solution

by:
thinklings earned 0 total points
ID: 40445709
I have solved my question, took me hours to see what i was doing wrong, sometimes stepping away from a problem helps you think about it differently. OK so we know that Joomla uses different plugins and libraries to get its backend to work. One of these Joomla plugins is something called chosen http://harvesthq.github.io/chosen/.

this plugin changes or manipulates a select element. this is why it was rendering differently in browser. so what i was missing really from my code is a way to refresh my change on the ui and below is how you do it.

 dType.val(data.message.discount_type).trigger('liszt:updated');
0
 

Author Closing Comment

by:thinklings
ID: 40456950
Fixed the issue.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

718 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question