Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
javascript help needed - take 2
I am experimenting with some javascript to unite the NeMe areas – although I think that it is good enough for unification of the txp ones too.
You can find it on www.neme.org/search.html
Thanks to ruud the validation of the script is now OK but I still have problems with the key events. That is if somebody types in the search query and clicks on “enter” or “return” the script does not work.
Any help would be appreciated.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: javascript help needed - take 2
the more I am reading on javascript and key events the more confused I get as there seems to be a problem with cross browser compatibility which is probably the problem with the script I am trying to compose.
I actually thought that this would be a very straight forward exercise but judging also from the luck of responses it obviously either is not or nobody thinks that what i am trying to do will be of any use.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: javascript help needed - take 2
You should use some of the JavaScript libraries: Mootools, Prototype.js or jQuery. Then it would work with any known popular browser – as libraries include that magic with their functions. Then you also wouldn’t have to stick with that old-fashioned and not-so-working JavaScript. Inline javascripting is in general bad idea…
You could use some Ajax and make it easy. Mootools and Ajax.Form and more advanced ajax – And also PHP wouldn’t do bad, and with Ajax you can also have non-ajax version that is for those who have no-javascript enabled.
Cheers!
Last edited by Gocom (2008-01-08 15:18:18)
Offline
#4 2008-01-08 15:17:40
- guiguibonbon
- Member
- Registered: 2006-02-20
- Posts: 296
Re: javascript help needed - take 2
You shouldn’t use a keypress event, but add an event listener to the form object (form.onsubmit = function() {});
Offline
Re: javascript help needed - take 2
Or with mootool something that is cross-browser compliant:
$('myForm').addEvent('submit', function(e) {
/* Lets make some love */And then with Ajax we can update the page:
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
}
});
}Will work least with IE6 and above, Safari, Fx, Camino and Opera.
Cheers!
Last edited by Gocom (2008-01-08 15:25:38)
Offline
Re: javascript help needed - take 2
@gocom
Thanks!!! i experimented with your suggestion and i almost got some results.
two problems
- My javascript knowledge is very little so I keep on messing it up.
- I would rather not use any other libraries except jquery which i am yet to understand.
And also PHP wouldn’t do bad
OK. here i am totally lost:). If my javascript knowledge is marked with a low E my php one is a total and unconditional F:)
The truth is that I would rather have the function happening in php but I just wouldn’t know how to start… Or finish…
@ guiguibonbon
You shouldn’t use a keypress event, but add an event listener to the form
object (form.onsubmit = function() {});
experimented with that and the whole script breaks apart.
Maybe all this sweat suits me right for treading into areas I know very little about.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: javascript help needed - take 2
When I was ready to give up, I think I’ve done it using a more economical javascript.
At the moment the form works using the default site when js is disabled which was the intention anyway.
Suggestions needed for
- how the pull down menu can be made invisible or locked when javascript is disabled in the browser.
- How I can search specific txp sections
Last edited by colak (2008-01-14 08:57:17)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#8 2008-01-14 09:04:52
- Mary
- Sock Enthusiast
- Registered: 2004-06-27
- Posts: 6,236
Re: javascript help needed - take 2
- Add it to the form using JavaScript.
- Send a query variable,
s. You can either make it a dropdown or a hidden field or…
Offline
Re: javascript help needed - take 2
Mary wrote:
- Add it to the form using JavaScript.
- Send a query variable,
s. You can either make it a dropdown or a hidden field or…
Hi Mary, I was afraid that you were going to say this…
I googled and found this which I am trying to trim down so as to just include the pull down menu without the select tags as I would leave the default action in the first option…
If anyone out there can figure it out before me, that would be great!
It is all a trial and error with me:)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: javascript help needed - take 2
This is as far as I’ve gotten – it’s undoubtedly overly long, and in its current state, it’s psychotic. I’ll work on it when it’s not 3AM 4AM :).
<?php
if ($_POST['submit']) {
header('Location: '.$_POST['site'].$_POST['terms']);
} else {
header('content-type: text/html; charset=utf-8');
}
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Search</title>
<script type="text/javascript">
var search = {
init : function(id) {
if (!document.getElementById(id)) return;
var searchForm = document.getElementById(id);
searchForm.onkeyup = function() {
for (var i=0; i<this.elements.length; i++) {
el = this[i];
if (el.nodeName == 'SELECT') {
var siteUrl = el.value;
switch(siteUrl) {
case 'http://txp.dev/?q=':
search.createSection(id);
break;
case 'http://textpattern.com/search/?q=':
search.createSection(id);
break;
default:
}
}
};
};
},
createSection : function(parent, labelText) {
if (document.getElementById('section')) return false;
var sectionId = 'section';
var sectionLabel = document.createElement('label');
sectionLabel.setAttribute('for', sectionId);
if (!labelText) labelText = 'Section';
var sectionLabelText = document.createTextNode(labelText);
sectionLabel.appendChild(sectionLabelText);
var sectionInput = document.createElement('input');
sectionInput.setAttribute('id', sectionId);
sectionInput.setAttribute('name', 'section');
sectionInput.setAttribute('type', 'text');
sectionLabel.appendChild(sectionInput);
search.insertAfter(sectionLabel, document.getElementById(parent).getElementsByTagName('select')[0]);
},
insertAfter : function(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
},
load : function(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
}
};
search.load(function(){
search.init('search');
});
</script>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" id="search" method="post">
<fieldset>
<legend>Search</legend>
<label for="site">Site
<select id="site" name="site">
<option class="section" value="http://txp.dev/?q=">txp.dev</option>
<option class="section" value="http://textpattern.com/search/?q=">textpattern.com</option>
<option class="section" value="http://textpattern.org/?q=">textpattern.org</option>
<option value="http://textbook.textpattern.net/wiki/index.php?search=search&fulltext=">textbook</option>
<option value="http://forum.textpattern.com/search.php?action=search&keywords=">forum</option>
</select>
</label>
<label for="terms">Terms
<input id="terms" name="terms" type="text" />
</label>
<input name="submit" type="submit" />
</fieldset>
</form>
</body>
</html>Random notes
- I’m using PHP to redirect the user to the proper URL if JS is disabled.
- I need to use onfocus for the select/option element instead of the form one
- Related – the form should remove the generated section input if the user switches to a non-section search
Offline
Re: javascript help needed - take 2
jm… This is just wonderful… and at 4am, from a “damaged house” too. Is there a way to have a pull down menu for the sections too?
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: javascript help needed - take 2
Well, I live in the basement :). There’s definitely a way to create a pull down for sections – what sections did you want to search (per site or for all)?
Offline