ColdFusion: Modify combobox options in cfgrid - javascript

I have a <cfgrid> with one <cfgridcolumn>. I'm using the values attribute for that column:
<cfform>
<cfgrid name="grdBrokers"
format="html"
bind ="cfc:CFC.Brokers.getGridData ( {cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
onChange="cfc:CFC.Brokers.editGridData( {cfgridaction},{cfgridrow},{cfgridchanged})"
selectMode = "edit">
<cfgridcolumn name="name" header="Name" values="Item1,Item2" >
</cfgrid>
</cfform>
The values attribute causes a combobox to appear when the user edits a cell in the Name column:
I need to dynamically (without reloading the page) change the options list of that combobox. After much research (stackoverflow.com, raymondcamden.com, etc.) I concluded there are no ColdFusion methods for doing this, so I figured I'd use JavaScript. To locate the id for the combobox I viewed the HTML source for my page and found the following:
<form name="CFForm_1" id="CFForm_1" action="/index2.cfm" method="post" onsubmit="return _CF_checkCFForm_1(this)">
<div id="cfgrid1344103796431" style="border: 1px solid #cccccc; overflow: hidden;"></div>
<select id='cf_grid_select0' class='ygrid-editor'>
<option value='Item1'>Item1</option>
<option value='Item2'>Item2</option>
</select>
<div>
<input type="hidden" name="__CFGRID__CFForm_1__grdBrokers" value="" /></div>
</form>
So, the id I want is cf_grid_select0. However, this element isn't found by document.getElementById(). I have also inspected the page using FireBug and can't find the cf_grid_select0 element on the DOM tab. It's contained in document.body.innerHTML as raw HTML text, but not as its own element in the DOM.
Here is my code that attempts to find cf_grid_select0:
<script type="text/javascript">
function find( ) {
var cbxFind = document.getElementById( 'cf_grid_select0' );
if ( cbxFind ) alert( "Found!" );
else alert( "Not found!" );
}
</script>
<form>
<input id="btnFind" type="button" onclick="find();" value="Find">
</form>
When I click the Find button, I get a popup saying "Not found!".
My question is: using JavaScript or jQuery, how can I locate a <select> that my browser obviously knows about, but doesn't seem to be in the DOM? I suspect ColdFusion.getGridObject() might be what I'm looking for, but I can't find a way to select the combobox using that method, either.
Thank you!
UPDATE:
It appears that ColdFusion is using ExtJS to transform the <select> into a ComboBox after the page loads, apparently removing the <select> from the DOM. I am now researching how to locate a ExtJS ComboBox.

I would almost certainly use jQuery! Try this:
<script>
$(document).ready(function() {
var $mySelect = $("#cf_grid_select0");
alert("I found it..." + $mySelect.attr("id"))
});
</script>
Good luck.
NINJA EDIT
If you're viewing the real source then it IS in the DOM. If you're viewing a "generated" JS kind of source, then it is tricky, but I think jQuery can detect new elements added to the DOM anyway.

Related

How do I find the JavaScript referenced by this button?

Here is the "submit" button in the form with no onclick attribute.
<div id="243c0bb6-584e-4d48-a8fa-4308cd632028" class="nike-unite-submit-button joinSubmit nike-unite-component blurred">
<input id="d7e56d05-36e1-42f7-922b-d2979375007a" type="button" value="CREATE ACCOUNT">
</div>
I am more confused about the <form> tags from the Nike website source:
<form id="nike-unite-joinForm" class="nike-unite-form" method="post"
action="javascript:;" onsubmit="return false;">
...
</form>
How do I find out what is happening when I actually click the button on the page?
Using mouse-click breakpoints in chrome dev tools gives me a plethora of JavaScript functions takes too long for me to parse through.
If there are attributes or listeners added to the ID (such as a link to a script), I could not find them after using "Command-F" on the different attributes of the form.
The only other clue which I am not sure how to purse is that method="post".
I understand that all websites are different, but my question is a general one:
How do I figure out what the script that is being run when I click on the form?
Thanks in advance.
Try this:
document.getElementById('nike-unite-joinForm').submit();
This is from w3schools.com:
https://www.w3schools.com/jsref/met_form_submit.asp
EDIT:
Ok, I tried it myself on the registration website and it didn't work. Experimenting a bit with it I noticed an apparently random id is assigned to the DOM-Elements.
But I've found a solution:
document.getElementsByClassName("nike-unite-submit-button joinSubmit nike-unite-component")[0].children[0].click();
This works because the div in which the submit button is has a unique set of classes. So I get the first (and only) Element with this classes, and apply .click() to the first child element
Perhaps you could try to change submit with click:
document.getElementById('nike-unite-joinForm').click()

Problems with getElementById with jquery load

I have a page, showlist.php, which loads a set of results from a recordset. There is a search field which returns results using jquery load. This works fine for one word, but not if there is more than one word in the search query. Can anybody show how to get this to work for any search query? Must be some basic error but googling around has not helped.
Key elements of showlist.php:-
<div id="contentarea">
<script type="text/javascript">
function contentloader(url){
$("#contentarea").load(url);
}
</script>
<input name="search" type="text" id="inputsearch"/>
<a onclick="contentloader('showlist.php?search='+document.getElementById('inputsearch').value+'')">Search</a>
</div>
You need to HTML encode the result of document.getElementById('inputsearch').value so that all the works are passes to the server.
See:
HTML-encoding lost when attribute read from input field
Encode URL in JavaScript?
and links therein.
You need to call encodeURIComponent with the value to correctly format the query/search term:
<a onclick="contentloader('showlist.php?search='+encodeURIComponent(document.getElementById('inputsearch').value)+'')">Search</a>
See Stack Overflow question Best practice: escape, or encodeURI / encodeURIComponent for further discussion.
type abc%20xyz in the box. if that works, maybe you need to urlencode the value.
You can use onClick listener, since you are already using jQuery. I think it is a better than using onClick attribute.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<div id="contentarea">
<input name="search" type="text" id="inputsearch"/>
<a id="search">Search</a>
<script type="text/javascript">
$( document ).ready(function (){ // when document ready
$("#search").click(function(){ // add a click listner
$("#contentarea").load(
encodeURI($('#inputsearch').val()) // encode input string
);
}
);
})
</script>
</div>

Condtionally showing/hiding textarea with select.onchange in Javascript

I'm running up against a wall with something rather simple. I have an "Other:" option on a 'select' element that I am using as a condition for showing/hiding a 'textarea' element. I've got it mostly working despite one strange behavior: no matter what I do the 'textarea' is determined to display when the page loads, despite having 'display="none"' set. If I change to a non-'Other:' option it behaves normally and hides the textarea, and shows it when I select other. The only issue is on loading it defaults to displaying it. I'm sure this is something simple but it is utterly eluding me.
Here's code:
HTML
<div id="otherbox" style="text-align:left; padding:5px; margin:0px 6px;">
<textarea display="none" name="other" id="aboutOther" rows="10" cols="30" wrap="hard">
</textarea>
</div>
Javascript:
<script type="text/javascript">
var slct=document.getElementById("selectMenu");
slct.onchange=function()
{
this.value == "Other:" ? document.getElementById("aboutOther").style.display='block' : document.getElementById("aboutOther").style.display='none';
};
</script>
I included the 'div' on the textarea in case that's relevant (although I suspect it isn't). For full disclosure, that div is nested in another div. Hope that's not important.
Fullest disclosure: I don't know what I'm doing.
You need to use CSS to control the display property. Try to change display="none" to style="display:none;" in your textarea element as "display" is not a default attribute for textarea.

Jquery ID selector when attribute name has a hash

I'm running into a problem, our internal framework has a system where if you have a form & the containing element his name starts with a hash-tag it will do something when processing these elements later on.
So I have for instance :
<label width='auto' for='x_test' >Test:</label>
<input type="checkbox" name="#x_test#" id="x_test" value="1" />
now using Jquery if I want to select this input, for instance to hide it:
$( "#x_test" ).hide();
This does not work unless I remove the hashtags from the name of the element.
But I'm doing a select by ID I'm not sure why this is such an issue.
Is this a known issue & is there something I can do?
We are on jquery-1.3.2
Thanks
UPDATE
Thanks for all the hints, it helped me a bit and I did learn some things from them but in the end the problem was bad existing code from someone else interfering with what I was trying to do.
We have a wizard en in each step it copies the inputs from that page to a hidden dynamic form for this wizard.
But they were also copying the id-attribute etc so this didn't respect the rule of unique id's anymore. Because of this JQuery / JQuery UI and all my JavaScript were behaving realy weird ofcourse. I ended up rewriting this wizard-thing so my JQuery etc do work.
To select by attribute:
$('[name="#x_test#"]').hide();
To select by id:
$('#x_test').hide();
or
$('[id="x_test"]').hide();
Check the below code (with jQuery 1.3.2).
The id selection applies a green colour, instead the name attribute selection applies a red colur:
$('#test').css({'color':'green'});
$('[name="#test"]').css({'color':'red'});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="test">test id</div>
<div name="#test">name test</div>
Use attribute equals selector:
$("[name='#x_test#']").hide();
if usage of # will not be working for your framework, try attaching the id name to class and use class selector in jQuery
i.e Have
<label width='auto' for='x_test' >Test:</label>
<input type="checkbox" name="#x_test#" id="x_test" class="x_test" value="1" />
and then use
$( ".x_test" ).hide();
this will works fine for me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<label width='auto' for='x_test' >Test:</label>
<input type="checkbox" name="#x_test#" id="x_test" value="1" />
<script>
$(document).ready(function () {
$( "#x_test" ).hide();
});
</script>
Try following
$("input[name='#x_test#']").hide();

search html div and display results on different page

I want to search multiple HTML files from a separate page, where I search for text from all the divs which has a specific id for each, whole id containing matched search term will be displayed on the search page in list.
The div list looks like this :
<body>
<div class='vs'>
<div id='header 1'>content 1 here </div>
<div id='header 2'>another text </div>
<div id='header 3'>whatever </div>
</div>
</body>
Please note that I want to perform search from different page and want to display results there with links to the searchable page.
For now I was searching like this :
HTML
<body>
<input type="text" id='search' />
<div class='vs'>
<div id='header 1'>content 1 here </div>
<div id='header 2'>another text </div>
<div id='header 3'>whatever </div>
</div>
</body>
JavaScript
$('#search').on('input', function () {
var text = $(this).val();
$('.vs div').show();
$('.vs div:not(:contains(' + text + '))').hide();
});
It is working on the fiddle here, but I don't want it to work like this, I want to do the search from a separate page remotely and display results there with link to this page.
Solution with jQuery and AJAX:
<form id="searchForm">
<input type="text" id="search"/>
<input type="submit" name="Search!" />
</form>
<div id="resultContainer">
</div>
<script type="text/javascript">
$("#searchForm").submit(function(e) {
e.preventDefault();
var results = $("#resultContainer");
var text = $("#search").val();
results.empty();
$.get("http://example.com/", function(data) {
results.append($(data).find("div:contains(" + text + ")"));
});
});
</script>
Fiddle (This fiddle enables you to search for content on the jsfiddle page, try for example JSFiddle as search term.)
Note however that this does not work cross-domain, because browsers will prevent cross-site scripting. You didn't describe your use-case clear enough for me to know whether you're okay with that.
You'll want to look at using PHP file_get_contents to retrieve the HTML contents of the external page, and from there analyze the data in the <div>s that you are interested in. Ultimately, you'll want to store each individual search term in a JavaScript array (you can create JavaScript arrays dynamically using PHP), and then create search functionality similar to example you posted to search all the elements in your array.
So on page load, you'll want to have a <div> in which you are going to list all the elements from the array. You can list these by looping through the array and displaying each individual element. From there, you will want to call a function every time the user enters or deletes a character in the <input> box. This function will update the <div> with an updated list of elements that match the string in the <input> box.
This is the theory behind what you are trying to accomplish. Hopefully it will give you some direction as to how to write your code.
Update:
If you're looking for a JavaScript only solution, check out a JavaScript equivalent of PHP's file_get_contents: http://phpjs.org/functions/file_get_contents/
From here, you can maybe look at using .split to break up the list. Ultimately, you're still trying to store each individual search term as an element in an array, it's just the method that you retrieve these terms is different (JavaScript as opposed to PHP).
Perhaps I was emphasizing too much on PHP, perhaps it's because it's the web development language I'm most familiar with. Hope this JavaScript-only solution is helpful.

Categories