PHP Ajax live search box - javascript

I am trying to make a PHP Ajax live search Box, so far is working good but it seems that I am facing two problems:
The first one is that when data is showing on the screen, I want it to disappear if I move the mouse outside the search box.
The second one is related to CSS, I want the position of data results to be just under my search box, now is floating right.
Here the code:
<div class="widget-container widget_search">
<span class="adds"></span>
<form action="" id="searchform" method="POST">
<p>
<input type="text" id="search" placeholder="Chercher" size="30" name="search">
<button type="submit" id="searchsubmit"></button>
</p>
</form><!--/ #searchform-->
<div id="livesearch" style=" width:auto; height:auto; margin:auto; position: absolute;"></div>
</div><!--/ .widget-container-->
JS:
$(document).ready(function(){
$("#search").keyup(function(){
var valor = $("#search").val();
$.ajax({
type: "POST",
url: "/auto/search/",
data: {word:valor},
success: function(res) {
$('#livesearch').html(res);
}
});
});
});

Let'suppose the data container has an id, like "myid". Then, you can hide it like this:
document.getElementById('myid').style.display = "none";
You can make it visible like this:
document.getElementById('myid').style.display = "block";
To make this general, you can do something like this:
function changeDisplay(element, display) {
element.style.display = display;
}
You can store the data container like this:
var dataContainer = document.getElementById("myid");
Now, you want to hide it when the mouse leaves. So, you need to set the onmouseout of your search box to a function like this:
function left() {
changeDisplay(dataContainer, "none");
}
But you probably want to make it reappear when you hover to the element. So you need to set the onmouseover event to a function like this:
function entered() {
changeDisplay(dataContainer, "block");
}
As about positioning the results, you might consider adding a <br> after the search tag and then position it to the left.

using jquery:
livesearch-id of div (search box)
one-id of div where search elements are being showed
$("#livesearch").mouseout(function(){$('#one').hide(); //hides the div
});
$("#livesearch").mouseover(function(){$('#one').show(); //shows the div when mouse is pointed again
});
CSS:
set style="margin-left:(number) px;"

Related

Hide/show child element onClick

I am building a "edit profile" page.
Here is what I want to do:
In each section, the employer will be shown and the edit form will be hidden.
When I click the "edit employer" button, the edit form will be shown and the employer will be hidden.
Here is what I did using jQuery. It does not work when I click on the "edit employer" button. I do not know why this does not work.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="edit">
<form class="editForm">
employer: <input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
$(this).children('.editButton').click(function() {
$(this).children('.editForm').show();
$(this).children('.contents').hide();
});
})
</script>
</body>
</html>
The $(this) inside the click function contains the local instance of the $(this).children('.editButton'). For that reason your code is not finding any .editForm elements.
For this to work you could do something like this:
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
var $this = $(this);
$(this).children('.editButton').click(function() {
$this.children('.editForm').show();
$this.children('.contents').hide();
});
})
</script>
If I may I would improve the code with some more changes:
<script>
$('.edit .editForm').hide(); // this will hide all instances of .editForm
$('.edit .editButton').click(function() { //assign 1 handler for all cases
$(this).siblings('.editForm').show(); // show the sibling edit form
$(this).siblings('.contents').hide(); // hide the sibling contents element
});
</script>
Reference:
Sibling Selector: https://api.jquery.com/siblings/#siblings-selector
The problem is the this inside the click handler referring to the button, not the div.edit. Here's one way to fix this:
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
});
$('div.edit').each(function() {
var $self = $(this);
$(this).children('.editButton').click(function() {
$self.children('.editForm').show();
$self.children('.contents').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit">
<form class="editForm">
employer:
<input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
You don't need to use .each() at all. Just do an .click() event on the class of .editButton and use this to find its parent. If you want to make a toggle, you're going to have to make use of a new class or something of that nature to make a conditional statement off of.
//This will hide *ANY* .editForm elements
$('.editForm').hide();
//This will fire off of *ANY* editButton clicks.
$('.editButton').click(function() {
var form = $(this).closest('.edit'); //Get the wrapper
if(form.hasClass('open')) { //Check to see if it is open or not
form.removeClass('open').addClass('close'); //Toggle Classes
form.find('.editForm').show();
form.find('.contents').hide();
} else {
form.removeClass('close').addClass('open');
form.find('.editForm').hide();
form.find('.contents').show();
}
});
I like to use closest and find more than parent and children (respectively). They can go 1-many layers up or down and search the hierarchy for whatever you're looking for, rather than parent and children going up or down a single layer.
If you are inserting your .edit form after the DOM loads, you're going to need to bind your click event to the document
$(document).on('click', '.editButton', function() {
var form = $(this).closest('.edit');
form.find('.editForm').hide();
form.find('.contents').show();
});

jquery jqwidgets listbox disappearing when submit button clicked

I am trying to learn a little about jquery and working with some UI widgets (JQWidgets). I am trying to get call a php script and call back some data in json format. I know that the json format is correct because I can get a listbox to show and run correctly if I just run it straight through. I am trying to type a value into a textbox and when I click on a submit button it will return a list of data into the listbox. When I click the button, the outline of box shows then disappears. I am not sure what I am doing.
Javascript Code:
<script type="text/javascript">
$(document).ready(function() {
//create jqxButton widget
$("#btnSubmit").jqxButton({ width: '150'});
//create jqxListBox widget
$("#btnSubmit").bind('click', function() {
//Do som
var textValue = $("#txtSearch").val();
var url = "include/showsearch.php?show_name='" + textValue + "'"; //returns json data
var source =
{
datatype: "json",
datafields: [
{ name: 'name' },
{ name: 'id' }
],
url:url
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
//crate jqxList widget
$("#search_grid").jqxListBox({source: dataAdapter,selectedIndex: 0,theme:'classic',displayMember: "name", valueMember:"id",itemHeight:70,height:'75%',width:'100%'});
});
});
Partial HTML:
<div id="content1">
<form id="search">
<label for="search">Search For:</label>
<input type="text" id="txtSearch" name="q">
<input style='margin-top: 20px;' type="submit" value="Search" id="btnSubmit"/>
</form>
<div id="search_grid">
</div>
<div style="font-size: 13px; font-family: Verdana;" id="selectionlog">
</div>
</div>
<div id="content2">
<div id="dl_grid">
</div></div>
Thanks in advance.
EDIT: I also want to mention that I am using 000webhost and I turned off the tracking script they use.
The problem is most probably your ListBox's height setting. If you want to define height in percentages, your container element should be with "height" defined, too, because 75% of something which is with auto-height by default would be equal to 0. Take a look at: jQWidgets ListBox with Size in Percentages

Load a new div into exiting div with load more button

I wanna like that some plugin just one thing must be different there is have 2 links for 2 div i wanna show there example 10 div but with only one button like "Load More" how i can do this ?
html
Click1
Click2
<div id="outer">
<div id="inner">Initial content</div>
</div>
<div style="display:none" id="hidden1">After click event showing hidden 1</div>
<div style="display:none" id="hidden2">After click event showing hidden 2</div>
Js
$(document).ready(function() {
$('.link').click(function()
{
var id = $(this).attr('href');
$('#inner').fadeOut('slow', function() {
$('#inner').html($(id).html());
$('#inner').fadeIn('slow');
})
})
})
CSS
#hideMsg{
text-align:center;
padding-top:10px;
}
http://jsfiddle.net/G5qGs/2/
You can do it something like this.
Create a load more button
Load More
Use javascript like below
var count = 1;
$('#loadmore').click(function() {
$('#inner').fadeOut('slow', function() {
$('#inner').html($("#hidden" + count).html());
$('#inner').fadeIn('slow');
count++;
})
});
Working example
http://jsfiddle.net/G5qGs/25/
P.S : You might want to display "No more content" at the end. that can be achieved using a simple if else condition

jquery resizable not working after ajax update

I have a resizable div that has some text in it and a edit button.
On the edit button click it opens a layer with a textbox and save button so the user can edit the text.
Then the user clicks save, the layer is closed and the db updated with some ajax. The div on the parent page is also updated with some ajax.
The problem I have is that the div is no longer resizable.
I know the line of code that is doing this and why it is doing it but cant find any other solution to updating the original div without stripping out the resizable code as well.
On the 'save' button click on the layer this function is called
$(document).ready(function() {
$('.button').click(function() {
var edit_content = $('#myFrm').find('.nicEdit-main').html();
var box_id = $('#myFrm').find("#box_id").val();
var page_ref = $('#myFrm').find("#page_ref").val();
var template_ref = $('#myFrm').find("#template_ref").val();
$.post("update_textarea.php",
{
box_id:box_id, page_ref:page_ref, template_ref:template_ref, edit_content:edit_content
},
function(data,status){
UpdateElementOfParent(box_id, page_ref, template_ref)
edit_box('hide')
});
});
});
This updates the db and the function UpdateElementOfParent() is called on the parent page
function UpdateElementOfParent(box_id, page_ref, template_ref) {
var myBox = box_id;
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })
.done(function(data) {
$('#'+myBox).html(data);
});
}
this updates the original div with the updated content from the db.
I know the $('#'+myBox).html(data); strips out the inner html of the div and replaces it with the text and so removes the jquery resizable text but I cant find another way to update the text.
I have tried
$('#'+myBox).value(data);
$('#'+myBox).text(data);
$('#'+myBox).innerHTML(data);
document.getElementById('myBox').val(data);
document.getElementById('myBox').value(data);
document.getElementById('myBox').text(data);
document.getElementById('myBox').val=data;
document.getElementById('myBox').value=data;
document.getElementById('myBox').text=data;
None of these work.
My javascript is not too strong(as you can probably tell).
Can anyone help with a solution?
any help greatly appreciated
QUICK UPDATE
I noticed that if I use firebug inspector the div before it has any text updates is like so
<div id="3" class="textarea1 ui-resizable ui-resizable-autohide" style="width:300px; height:300px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;" name="textarea[3]">
newtextarea
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
but once I update it (I use nicedit to format the text) the div now has a hidden ipnout within it called 'content[]'
<div id="3" class="textarea1 ui-resizable ui-resizable-autohide" style="width:300px; height:300px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;" name="textarea[3]"></div>
<br></br>
<input type="hidden" value="
<div align="justify">
<font face="trebuchet ms" size="2"><strong>Lorem Ipsum</strong> es simplemente el texto de relleno de las imprentas y archivos de texto.</font>
</div>" name="contents[1]">
</input>
so it would seem that the structure of the div has change and the inner input would need updating. As the input does not have an id how can I update just using its name
MORE
ok I have edited the update function to this
function UpdateElementOfParent(box_id, page_ref, template_ref) {
var myBox = box_id;
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })
.done(function(data) {
var updatedata=data+"<div class='ui-resizable-handle ui-resizable-e' style='z-index: 90; display: none;'></div><div class='ui-resizable-handle ui-resizable-s' style='z-index: 90; display: none;'></div><div class='ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se' style='z-index: 90; display: none;'></div></div>";
('#'+myBox).html(updatedata);
});
}
now when I check the original dv in firebug with the newly updated one the structure and contents are exactly the same.
I need to reinitialise the resizable. any clues?
Not really sure what you want really to do but.
var oldContent = $('#'+myBox).html();
$('#'+myBox).html(data+oldContent);
Will keep the old content and add the new one.
Or you can use .append() http://api.jquery.com/append/ depending on what you get back when updating the database
$('#'+myBox).append(data);
UPDATE:
From what I can see data retrieves a hidden input with the value of the new text. I suggest that you either change data to give back something else or add the input value to the div manually.
The input is also wrong. In the input The value="" should be value='' because you already have " inside of it. After that this function should place the value inside the right div.
function UpdateElementOfParent(box_id, page_ref, template_ref) {
var myBox = box_id;
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })
.done(function(data) {
$('#'+myBox).html(data);
var inval = $("input[name='contents["+myBox+"]']").val();
$("#"+myBox).html(inval).resizable();
});
}
The basic problem you had at start was that you forgot to reinitialize .resizable() on the new div.
I used dt192's suggestion and added a span inside the div and updated the span and it works great

Having a list (where items do not have ids) how to make div popups appear on mouseover?

so I have a list like
<ul id="usersList">
<li><form>
<input class="eButton" type="button" value="robot669394444"
onClick="openWin('robot669394444',1280,720)">
</form></li>
<li><form>
<input class="eButton" type="button" value="robot6693925"
onClick="openWin('robot6693925',1280,720)">
</form></li>
</ul>
and empty div with id like PoPa. I want to have jQuery function that would make that div appear like a tool-tip on top of the button user mouse is over and show in that div that item value?
$("#usersList .eButton").hover(function(){
//show & position tooltip here
}, function(){
//hide tooltop here
});
You're looking for something like this:
$('#usersList input[type=button]').hover(
function() { /* Position and show #PoPa */ },
function() { /* Hide #PoPa */ }
);
The text you want will be in this.value (or $(this).val() if you have $(this) build for other uses) when the first callback is called.

Categories