I want to be able to edit the title of an article which is duplicated in a field called "url" which is updated in real time when the user types in the title field...how do I go about this?
Thanks
You could use jQuery. Have a look at the Manual.
$(function()
{
$('#field1').keyPress(function()
{
$('#field2').val($(this).val());
});
});
Working demo: http://jsfiddle.net/Wcp3D/
$("document").ready(function ($) {
$("input").bind('keyup', function() { $("lable").text($(this).val()) } );
});
<input type='text'/>
<label></label>
do you mean something like this?
I don't have my environment configured here at work, but it should be something like that:
$("#url").change(function() {
document.title = $(this).value();
});
Add a function to the change-event of field one, and update field two in that function:
$('#field1').change( function( ) {
$('#field2').value( $(this).value( ) );
}
Related
Hello I have issue with my jquery code, because when I want to press any key to get query from database that is not working (it is not showing any alert). I think my ajax isn't working very well because I tried to copy other code and didn't work. I want to get data from database with my skills to choose in options
jQuery code
$(document).ready(function () {
$("#skills").click(function () {
alert("test")
});
});
<select class="select2bs4" multiple="multiple" name="ums[]" data-placeholder="Skills"
style="width: 100%;" id="skills">
</select>
And I want to do when I press any key then should show any result in multiple select but at beginning didn't show any alert yet.
I tried to do like "Select2 and Laravel: Ajax Autocomplete" from Laraget website and that wasn't working too
EDIT____
If it's only input with type 'text' it's working fine to show alert
Thank you in advance
Try this
$(document).ready(function () {
$("#skills").change(function () {
alert("test")
});
});
Select will not work with click but with change , but if you want change when you write in select like search bar , replace this :
$("#skills").click(function () {
alert("test")
});
to this if you want to get the change option :
$("#skills").on('change',function () {
alert("test")
});
or this if you want to handle user input :
$("#skills").on('keyup',function () {
alert("test")
});
I am using CakePhp 2.2.1 and I am having some problems to implement what I just asked in the title, I found several tutorials but most of them are for cakephp 1.3 and the others are not what I want to do. I have a "events" table which contains a "player_id" thus a Player has many Events and an Event belongs to a Player.
In my Event add form I proceed as the cookbook says and I get a dropdown list of players to choose from, however what I want is to just write the names of the players and select the one I want from the autocomplete results. Also these players must be from the team that I select before that. Any ideas?
Thanks in advance.
Special thanks to Andrew for pointing out this api.jqueryui.com/autocomplete. However there is not a real guide to use this one. So i found this post, which explains what Abhishek's second link says but I could understand it better. So here is my solution if anyone is interested:
1 - Download from the autocomplete page the .js you need. Save it in app/webroot/js
2 - Either in your app/View/Layouts/default.ctp or in the view you want to use the autocomplete add:
echo $this->Html->script('jquery-1.9.1.js');
echo $this->Html->script('jquery-ui-1.10.3.custom.js');
echo $this->fetch('script');
3 - In your view add (mine was add_goal.ctp):
<script>
$(document).ready(function(){
var myselect = document.getElementById("EventTeam"); //I needed to know which team I was looking players from.
var team = myselect.options[myselect.selectedIndex].value; //"EventTeam" was a dropdown list so I had to get the selected value this way.
$("#EventPlayer").autocomplete({
source: "/events/autoComplete/" + team,
minLength: 2, //This is the min ammount of chars before autocomplete kicks in
autoFocus: true
});
$("input:submit").button();
$("#EventPlayerId").autocomplete({
select: function(event, ui) {
selected_id = ui.item.id;
$('#EventAddGoalForm').append('<input id="EventPlayerId" type="hidden" name="data[Event][player_id]" value="' + selected_id + '" />');
}
});
$("#EventPlayerId").autocomplete({
open: function(event, ui) {
$('#EventPlayerId').remove();
}
});
});
</script>
4 - In your Controller (mina was EventController.php):
public function autoComplete($team = null){
Configure::write('debug', 0);
$this->autoRender=false;
$this->layout = 'ajax';
$query = $_GET['term'];
$players = $this->Event->Player->find('all', array(
'conditions' => array('Player.team_id' => $team, 'Player.name LIKE' => '%' . $query . '%'),
'fields' => array('name', 'id')));
$i=0;
foreach($players as $player){
$response[$i]['id']=$player['Player']['id'];
$response[$i]['label']=$player['Player']['name'];
$response[$i]['value']=$player['Player']['name'];
$i++;
}
echo json_encode($response);
}
visit below link ,this might help you as the ajax helper is no more in cake2.X versions core all related functionality moved to JS helper class.(here third one link for AJAX helper for contributed by user may help you)
http://bakery.cakephp.org/articles/matt_1/2011/08/07/yet_another_jquery_autocomplete_helper_2
or
http://nuts-and-bolts-of-cakephp.com/2013/08/27/cakephp-and-jquery-auto-complete-revisited/
or
http://bakery.cakephp.org/articles/jozek000/2011/11/23/ajax_helper_with_jquery_for_cakephp_2_x
You need to use ajax because your autocomplete-results depends on the team you have selected.
Something like this in jquery:
var team = $('#teamdropdown').find(":selected").text();
$.ajax({
type: "POST",
url: 'http://domain.com/playersdata',
data: {'team':team},
success: function(data){
console.log(data);
//put data in for example in li list for autocomplete or in an array for the autocomplete plugin
},
});
And in cake on playersdata page (Controller or model) something like this.
if( $this->request->is('ajax') ) {
$arr_players = $this->Players->find('all', array('conditions'=>array('team'=>$this->request->data('team')))); //pr($this->request->data) to get all the ajax response
echo json_encode($arr_players);
}
Also set headers to a json respons and $this->layout = null; to remove the layout tpl.
Another solution would be to use json_encode in your php and pass it to js-code like
<script>var players = <?php echo json_encode($array_players_with_teams); ?>; </script>
This solution is only interesting for a small amount of data, if you have a big database with teams and players I wouldn't recommend this, because why load all this data if you only need just a bit of it...
I didn't test the code but it should help you to go on...
Good luck!
I am working on a website in the codeigniter framework. I am stuck at a point where I need to implement the auto complete feature. I have tried a lot but I am not able to find proper solution so far. Here is what my actual requirements are.
There is a page on website that has few search filters. When a person lands on this page all the users of the website are shown on that page. Here the real game starts. There is a filter or an input box that filters out the results on the basis of their first or last name.
Say I have a database in which i have 3 users.
Ahmad Nawaz
John Azaar
Monica Finlay
When a person starts typing "Ah" in that search box I want that the sugesstions start to appear showing him "Ahmad"... Please tell me how to do that? I have searched a lot out there but i could not find a proper answer in reference to codeignitor. this is what my code looks like at the moment...
<input type="text" placeholder="Persons Name" name="individual_name" id="individual_name">
<script>
$(function() {
$( "#individual_name" ).autocomplete({
source: ('autocomplete_individual_name'),
select: function () {
testing()
}
});
});
</script>
just under the input I wrote the script....It goes to my mentioned controller. Here is what the controller looks like...
$individual_name = $this->input->post('individual_name');
$where = "first_name LIKE '".$individual_name."%' OR last_name LIKE '".$individual_name."%'";
$users_array = $this->user_profile_model->findByCondition($where);
First Problem
$individual_name is not getting populated.
Second Problem
When I receive the results in users_array, what should I do next? How to pass it back to show suggestions??
Third Problem
I use to call a filter function onkeyup(). Now when a person selects through the suggestion how to call the filter?
P.S->Also kindly let me know how can i reply to the person who replies me on this question...I have used # sign with user but it seems they dont get my reply thats why they never returned....
Any help would be highly highly appreciable...
Thanks and waiting
Ahmad
Try something like this, You may need to change the code slightly to suit you,
In your script part:
$("#individual_name").autocomplete({
source : base_url+"controller_name/suggest_names",
minLength : 1,
select: function( event, ui ) {
alert('id :'+ui.item.value) ;
//document.location.href = base_url+"controller_name/search?keyword="+ui.item.value; do something or redirect
},
success : function(resp){
//alert("auto");
},
error : function(){
alert("Oops, that didn't work. Please try again.");
}
});
In your controller:
function suggest_names(){
print_r ( $this->model_name->suggest_names($_REQUEST['term']) );
}
In your model part:
function suggest_names($term){
$data = array();
$term = strtolower( addslashes( trim( urldecode($term) ) ) );
$temp = $this->db->select('name as label, id as value')->like('name', $term, 'LEFT')->get('table_name')->result_array();
$data = json_encode($temp);
//echo "<pre>";print_r($data);echo "</pre>";die;
return $data;
}
Let me know if you face any problem. Hope it works for you.
Okay so i have a combobox with two options.
Now if one of the options is selected a new input field should appear.
echo $this->Form->input('group_id', array( 'id' => 'groupId'));
echo $this->Form->input('clientid',array( 'type' => 'hidden', 'id' => 'id_client',));
And for that i would use Jquery to check the values
<script>
$(document).ready(function () {
$("#groupId").change(function () {
if($(this).val() == 2){
// do set visible
}
})
});
</script>
My question is: how can i change the type of the field to visible? i have tried: $('#groupId').show(); also $('#clientid').get(0).type = 'text';
But didnt seem to work and i am starting to wonder if this is the best way of doing such a thing?
$(this).attr('type', 'text');
You're doing it wrong.
type="hidden" is not appropriate to hide UI elements (form fields or anything else).
You should instead use the CSS attribute display. Change your clientid input type to "text". When groupId is not 2, set display: none on your clientid input. When it's 2, set display: block.
With jQuery, you can use $('#clientid').show() and .hide().
For instance:
<select id="groupId"><!-- options... --></select>
<input type="text" id="clientId" />
<script>
$(document).ready(function () {
function showHideClient() {
var show_client = $(this).val() == 2;
$("#clientId").toggle(show_client); // hide or show
}
// we bind the "change" event to the hide/show checking
$("#groupId").change(showHideClient);
// and we call it at page load to hide the input right away if needed
showHideClient();
});
</script>
I am working on a site right now and have discovered that the jquery/javascript that I have implemented for the Search applies the same effect to all search boxes on the page when I click in the input field. By default, it removes the "Search" text and clears it out so that you can type your search term. I only want it to perform this function on the search box that is clicked within, not all search boxes on the page. However, if you look at this example, you'll notice that when you click into the search field at the top of the page, it clears the text out of both. I think I could fix it with .parent() or something, but am a jQuery novice. Any help would be appreciated.
Also don't know quite why the border is showing up around my icon, but I'll fix that.
Here's the search function jQuery:
$(document).ready(function(){
$('.search-box').textdefault({'text':'Search'});
});
(function($){
$.fn.textdefault = function(settings){
var Elements = this;
var settings = $.extend({}, $.fn.textdefault.defaults, settings);
return Elements.each(function(){
if($(Elements).is("input")){ TextDefault( $(Elements) ); }
});
function TextDefault(Input){
if (Input.val().length==0) Input.val(settings.text);
Input.focus(function () {
if (Input.val()==settings.text) Input.val('');
});
Input.blur(function () {
if (Input.val().length==0) Input.val(settings.text);
});
}
};
$.fn.textdefault.defaults = {
text: 'Search'
};
})(jQuery);
Thanks!
Taylor
plugin example
here is the correction.
Elements contains all the elements that are 'passed' to this plugin.
var Elements = this;
By using $(Elements) instead of $(this) in the each function, you
used all inputs as one
return Elements.each(function() {
if ($(this).is("input")) {
TextDefault($(this));
}
});
This line of code should be called to initialize the plugin. So it should be put somewhere outside of the plugin, in a $(document).ready() {} code block for example, since you need the plugin initialized for the inputs on the load of the page.
$('.search-box').textdefault({
'text': 'Search'
});
Use a different selector. Instead of all inputs with a class of "search-box" try giving it a unique ID or class.
$("#search_default").textdefault({'text':'Search'});
or
$(".search-box.defaulttext").textdefault({'text':'Search'});
The HTML would then be
<input type="text" class="search-box defaulttext" ...
or
<input type="text" id="search_default" ...
This is the method that I use, which could also be helpful for you. It won't fire for both objects since it uses $(this) to control just the object being focused/blurred.
$(".search-box").live("focus", function(){
if ( $(this).val() == $(this).attr("rel") ){
$(this).val('');
}
}).live("blur", function(){
if ( $(this).val() == '' ) {
$(this).val( $(this).attr("rel") );
}
}).each( function(){
$(this).attr("rel", $(this).val() );
});
I would try to use a more "jQuery" way to do this. jsFiddle
$('input').focus(function(){
$(this).data('text', $(this).val()).val('');
});
$('input').blur(function(){
if( $(this).val() === "" ) $(this).val( $(this).data('text') );
});