I want to select only the id of textbox after that to insert into database..For example I have echo $t['id'] echo $t['name'] but I want select only the id. Is there any solution?I want to get from li elements only the $t['id'] after that to insert into database...If I write only $t['id'] I can insert into database but If I write $t['id']-$t['name'] I get an error...So I need to get only the $t['id'] from text box
HTML:
<input type="text" name="dropdiv" id="dropdiv" style="width:605" />
<div id="dragdiv">
<ul id="allItems">
<?php if($tags): ?>
<?php foreach($tags as $t): ?>
<li id="node" runat="server" value="$t['id']">
<?php echo $t['id']?><?php echo $t['name'] ?>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</div>
<br />
JQuery:
<script type="text/javascript">
$(function() {
$("#dragdiv li").draggable({
helper: "clone",
cursor: "move",
revert: "invalid"
});
initDroppable($("#dropdiv"));
function initDroppable($elements) {
$elements.droppable({
activeClass: "ui-state-default",
hoverClass: "ui-drop-hover",
accept: ":not(.ui-sortable-helper)",
over: function (event, ui) {
var $this = $(this);
},
drop: function (event, ui) {
var $this = $(this);
if ($this.val() == '') {
$this.val(ui.draggable.text().trim());
ui.draggable.remove();
} else {
$this.val($this.val() + " " + ui.draggable.text().trim());
ui.draggable.remove();
}
}
});
}
});
</script>
CodeIgniter
$tags = $this->input->post('dropdiv');
$theid = $this->db->insert_id();
$tags_arr = array();
$theid = $this->db->insert_id();
$tags_arr = explode(' ',$tags);
foreach ($tags_arr as $t)
{
$tag_SQL = $t;
$this->db->query("insert into tags_in_news (news_id, tag_id) values ('{$theid}','{$tag_SQL}')");
}
Help me please guys...
I see only one textbox in your code. So, just do:
$("#dropdiv").method();
Read more about jQuery selectors here: http://api.jquery.com/category/selectors/
I think I'm slowly starting to understand. Replace ui.draggable.text() with ui.draggable.attr('value'), because you're trying to get that. But even better, replace the value attribute with a data-id attribute in your html (this way it's correct html).
html:
<li id="node" runat="server" data-id="$t['id']">
js:
if ($this.val() == '') {
$this.val(ui.draggable.attr('data-id').trim());
ui.draggable.remove();
} else {
$this.val($this.val() + " " + ui.draggable.attr('data-id').trim());
ui.draggable.remove();
}
Related
I have drag and drop jquery. Accordion that allows user to drag and drop names into a droppable area. So what i want to do is to display dropped names on a new page after user click submit. But I cant get how to do it. I thought maybe its can be done using ajax but not sure how. Thanks in advance. Here is my code:
<link href="jquery-ui/jquery-ui.css" rel="stylesheet" />
<script src="jquery-ui/jquery.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#myAccordion"). accordion({heightStyle:"content", active: false, collapsible:true});
$(".source li").draggable({helper:"clone"});
$("#project ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui)
{
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text())
.addClass("project-item")
.addClass('dropClass')
.appendTo(this);
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
$("#myAccordion ul").droppable({
drop: function(event, ui) {
$(ui.draggable).remove();
},
hoverClass: "ui-state-hover",
accept: '.project-item'
});
$('#box').keyup(function(){
var valThis = $(this).val().toLowerCase();
if(valThis == ""){
$('.source > li').show();
} else {
$('.source > li').each(function(){
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
});
};
});
});
</script>
<div id="myAccordion" style="width:20%; float:left; margin-right:30px;">
<?php for($i=321; $i<347; $i++)
{
echo "<h3>".chr($i)."</h3>";
echo '<ul class="source">';
$sql = "SELECT username FROM user WHERE username LIKE '".chr($i+32)."%' ";
$result = $conn->query($sql);
if ($result->num_rows > 0)
{
// output data of each row
while($row = $result->fetch_assoc())
{
$name= $row["username"];
echo"<li class='ui-state-highlight'>". $name ."</li>";
}
} else
{
echo "0 results";
}
echo '</ul>';
}
?>
</div>
<form class="formcss" method="POST" action="create3.php">
<fieldset style="background-color:white;">
<div id="project" style="margin-left:10%;">
<label>Leader:</label>
<ol>
<li class="placeholder" name="leader[]" <?php if (isset($leader[$i])) echo 'value="'.$leader[$i].'"' ?>>Add leaders and checkers here</li>
</ol>
<br><br>
<div class="row">
<input type = "submit" name ="submit" class="button" value = "Create Project" onclick="userSubmitted = true;"/>
</div>
</div>
</fieldset>
</form>
I want my second selects options to vary depending on the choice in the first select.
If you pick "Skalman" you can't pick "Whole day with lunch" and if you choose "Lilleskutt" you can't choose "Half day".
I haven't worked with AJAX before but thinking that it might be the right way to go, if anyone could help me out I would be more than grateful!
I get the options from the database, using two functions in Booking.php:
private function get_room_options() {
$this->load->model('Booking_Model');
$rooms = $this->Booking_Model->get();
$rooms_form_options = array();
// get room title and store in array
foreach ($rooms as $id => $room) {
$rooms_form_options[$id] = $room->title;
}
return array(
'rooms_form_options' => $rooms_form_options,
);
}
public function get_package_options() {
$room = $this->input->post('searchData');
$this->load->model('Package_Model');
$packages = $this->Package_Model->get();
$packages_form_options = array();
foreach ($packages as $id => $package) {
$packages_form_options[$id] = $package->package_name;
}
return array(
'packages_form_options' => $packages_form_options,
);
}
And in my booking.php you find the form:
<?php
echo form_open('booking/preview') ?>
<div>
<?php echo form_label('Conference Room: ', 'id') ; ?>
<?php echo form_dropdown('id', $rooms_form_options, set_value('id')); ?>
</div>
<div>
<?php echo form_label('Package type: ', 'package_id') ; ?>
<?php echo form_dropdown('package_id', $packages_form_options, set_value('package_id')); ?>
</div>
<div>
<?php echo form_label('Number of Participants: ', 'number_people') ; ?>
<?php echo form_input('number_people', set_value('number_people')) ; ?>
</div>
<div>
<?php echo form_submit('preview', 'Book'); ?>
</div>
<?php echo form_close(); ?>
And my script so far:
<script type="text/javascript">
$(function() {
$(document).on('change', '[name=id]', function(e){
var searchData = $(this).val();
$.ajax({
url: "<?php echo base_url('index.php/booking/get_package_options'); ?>",
type: 'POST',
data: searchData,
success: function() {
// how should I get the options in here?
}
});
});
});
</script>
CodeIgniter doesn't support ajax.For more clarification http://phpframeworks.com/
So lets start from view
<?php echo form_open('booking/preview') ?>
<div>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<?php echo form_label('Conference Room: ', 'id'), form_dropdown('id', $rooms_form_options, set_value('id')) ?>
</div>
<div>
<?php echo form_label('Package type: ', 'package_id'), form_dropdown('package_id', $packages_form_options, set_value('package_id')) ?>
</div>
<div>
<?php echo form_label('Number of Participants: ', 'number_people'), form_input('number_people', set_value('number_people')) ?>
</div>
<div>
<?php echo form_submit('preview', 'Book') ?>
</div>
<?php echo form_close() ?>
Here optimize your code by removing trailing semicolon & multiple echo
into single statement.
Now in your js part
$(function() {
$(document).on('change', '[name=id]', function(e){
var searchData = $(this).val();
$.post('YOUR_SEARCH_URL', { data : searchData }).done(function(data, textStatus, jqXHR) {
var h = '';
$(data.YOUR_SERVER_RESPONSE_KEY).each(function(i, v){
h += '<option value="' + i + '">' + v + '</option>'
});
$('[name=package_id]' ).html(h);
}).error(function(jqXHR, textStatus, errorThrown) {
//Handle your ajax error
});
});
});
Now at your controller
public function YOUR_CONTROLLER_ACTION() {
$data = $this->input->post('data');
//Do your work & get data from model for the id
//now send json response
return $this->output
->set_content_type('application/json')
->set_output(json_encode(YOUR_JSON_RESPONSE_ARRAY));
}
Check this two links http://code.runnable.com/UXczcazDrMMiAAGl/how-to-do-ajax-in-codeigniter-for-php & http://code.tutsplus.com/tutorials/codeigniter-from-scratch-day-8-ajax--net-9243 for more details
I am trying to hide or show the div based on the div id from the php function. I am not able to make it work, please help me.
Javascript:
<script>
showOrHide(id) {
var elem=getElementById(id);
if(elem.style.visibility="hidden")
elem.style.visibility="visible";
else
elem.style.visibility="hidden";
}
</script>
PHP Script:
<?php
function display_link($link_id,$upvote_array,$downvote_array,$divid) {
?>
More links
<div id="<?php echo $divid ?>" style="visibility:hidden;">
</div>
<?php } ?>
Here's a cleaned-up version of your function.
function showOrHide(id) {
var elem = document.getElementById(id);
elem.style.visibility = (elem.style.visibility === 'hidden')? 'visible' : 'hidden';
}
<script>
function showOrHide(id){
var elem = getElementById(id);
if(elem.style.visibility=="hidden"){
elem.style.visibility="visible";
} else {
elem.style.visibility="hidden";
}
}
</script>
<?php
function display_link($link_id,$upvote_array,$downvote_array,$divid)
{
?>
More links
<div id="<?php echo $divid ?>" style="visibility:hidden;">
</div>
1 - visibility == 'hidden'
2 - missing ; after visibility="visible" and ="hidden"
3 - href="javascript:showOrHide('')" - missing '' inside your javascript function
Try this
<script>
function showOrHide(id){
var elem = document.getElementById(id);
elem.style.visibility = (elem.style.visibility === 'hidden')? 'visible' : 'hidden';
}
</script>
<?php
function display_link($link_id,$upvote_array,$downvote_array,$divid)
{
?>
More links
<div id="<?php echo $divid ?>" style="display:hidden;">
</div>
<?php
}
?>
Hey i have a problem on my website i want to display a image with a rating under and then when i rate the image it should change to the next picture. And there is my problem because it displays the next picture correctly but it doesn't change the id in the rating system so i am rating the same picture again and again
Source code:
$place="upload/";
$first = mysql_query("SELECT * FROM images ORDER BY RAND()");
while($wor = mysql_fetch_array($first))
{
$id=$wor['id'];
$name = $wor['name'];
$image = $place . $wor['name'];
}
$number="1";
$wrongnumber="2";
$random = mysql_query("SELECT * FROM images ORDER BY RAND()");
$place="upload/";
echo '<script> ';
while($wor = mysql_fetch_array($random))
{
$ids=$wor['id'];
$name = $wor['name'];
$images = $place . $wor['name'];
$number=$number + 1;
$wrongnumber=$wrongnumber + 1;
echo 'function ' . 'changeSrc' . $number . '() '; ?>
{
document.getElementById("rand").src="<? echo $images;?>";
document.getElementById("button").onclick=changeSrc<? echo $wrongnumber;?>;
document.getElementById("102").id=<? echo $ids;?>;
}
<?
}
?>
</script>
<img id="rand" src="<? echo $image;?>"><br>
<div id="button" onclick="changeSrc2()">
<div class="rate_widget" id="102">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>
The output code:
// This is the first thing we add ------------------------------------------
$(document).ready(function() {
$('.rate_widget').each(function(i) {
var widget = this;
var out_data = {
widget_id : $(widget).attr('id'),
fetch: 1
};
$.post(
'ratings.php',
out_data,
function(INFO) {
$(widget).data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
// can't use 'this' because it wont contain the updated data
set_votes($(this).parent());
}
);
// This actually records the vote
$('.ratings_stars').bind('click', function() {
var star = this;
var widget = $(this).parent();
var clicked_data = {
clicked_on : $(star).attr('class'),
widget_id : $(star).parent().attr('id')
};
$.post(
'ratings.php',
clicked_data,
function(INFO) {
widget.data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
$.post(
'setcookie.php',
clicked_data,
function(INFO) {
widget.data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});
});
function set_votes(widget) {
var avg = $(widget).data('fsr').whole_avg;
var votes = $(widget).data('fsr').number_votes;
var exact = $(widget).data('fsr').dec_avg;
window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes);
$(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');
$(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote');
$(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );
}
// END FIRST THING
</script><script> function changeSrc2() {
document.getElementById("rand").src="upload/1329614519daily_erotic_picdump_48-2-500x334.jpg";
document.getElementById("button").onclick=changeSrc3;
document.getElementsByClassName('rate_widget').id="125";
}
function changeSrc3() {
document.getElementById("rand").src="upload/1329614453tumblr_leb4pwc0Xc1qzy9ouo1_1280-1024x640.jpg";
document.getElementById("button").onclick=changeSrc4;
document.getElementsByClassName('rate_widget').id="65";
}
function changeSrc4() {
document.getElementById("rand").src="upload/1329614295daily_erotic_picdump_20-copy-500x333.jpg";
document.getElementById("button").onclick=changeSrc5;
document.getElementsByClassName('rate_widget').id="44";
}
function changeSrc5() {
document.getElementById("rand").src="upload/1329614301daily_erotic_picdump_80-2-500x375.jpg";
document.getElementById("button").onclick=changeSrc6;
document.getElementsByClassName('rate_widget').id="51";
}
function changeSrc6() {
document.getElementById("rand").src="upload/13296142941-3-450x600.jpg";
document.getElementById("button").onclick=changeSrc7;
document.getElementsByClassName('rate_widget').id="225";
}
function changeSrc7() {
document.getElementById("rand").src="upload/1329614284tumblr_l53l0qM6HB1qc4zlyo1_500-450x568.jpg";
document.getElementById("button").onclick=changeSrc8;
document.getElementsByClassName('rate_widget').id="19";
}
function changeSrc8() {
document.getElementById("rand").src="upload/1329614454tumblr_lro15r2fkh1qzlro6o1_500-450x301.jpg";
document.getElementById("button").onclick=changeSrc9;
document.getElementsByClassName('rate_widget').id="73";
}
function changeSrc9() {
document.getElementById("rand").src="upload/tumblr_mccaolmQPE1regfy1o1_500.jpg";
document.getElementById("button").onclick=changeSrc10;
document.getElementsByClassName('rate_widget').id="272";
}
function changeSrc10() {
document.getElementById("rand").src="upload/1329614297Pix-Mix-304-img012-500x312.jpg";
document.getElementById("button").onclick=changeSrc11;
document.getElementsByClassName('rate_widget').id="47";
}
</script>
<img id="rand" src="upload/1329614465tumblr_lscy8aqOFE1qg7sdjo1_500-450x322.jpg"><br>
<div id="button" onclick="changeSrc2()">
<div class="rate_widget" id="99">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>
document.getElementById("button").onclick=changeSrc<? echo $wrongnumber;?>;
Aren't you missing brackets?
document.getElementById("button").onclick=changeSrc<? echo $wrongnumber;?>();
By the way, to reduce data laod add LIMIT 1 to your SQL query when retrieving only one row.
I'm using this:
http://jqueryui.com/demos/selectable/#method-option
This is my code:
<ol id="selectable">
<?php foreach ($collection as $key=> $word): ?>
<li class="ui-widget-content"> <?php echo $word ?> </li>
<?php endforeach ?>
</ol>
How do I get a hyperlink created based on what the user selects? All the words are different each time.
Use the selected event:
$(function() {
$("#selectable").selectable({
selected: function(event, ui) {
alert(ui.selected.innerHTML);
}
});
});
ui.selected is the DOM element of the selected item
Working example
if you add a data attribute to the li with more details for the href it would be easier:
<ol id="selectable">
<?php foreach ($collection as $key=> $word): ?>
<li class="ui-widget-content" data-href="<?php echo $href ?>"> <?php echo $word ?> </li>
<?php endforeach ?>
</ol>
then
$(function() {
$("#selectable").selectable({
selected: function(event, ui) {
alert($(ui.selected).data('href'));
}
});
});
Working example here
To create links (anchors) using the selected item you could do something like this :
$(function() {
$("#selectable").selectable({
selected: function(event, ui) {
$item = $(ui.selected);
$href = $item.data('href');
$text = $item.text();
$('<a />').attr({
href: $href
}).text($text).append('<br />').appendTo('#links');
}
});
});
Example here
Update
You could do something like this to store the selected item until its needed - ie a button is pressed :
// create temp variable to store the selected element
var selected;
$(function() {
$("#selectable").selectable({
selected: function(event, ui) {
selected = ui.selected;
}
});
$('#getSel').click(function() {
// do what you want with the Element here
alert(selected.innerHTML);
});
});
Working example here