I'm looking to create a search function in CodeIgniter.
My view file has been splitted in two parts:
Header part, that contains the search bar
<?php echo form_open('controller/live_search');?>
<div class="toolbar-icon-bg hidden-xs" id="toolbar-search">
<div class="input-group">
<span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-search"></i></button></span>
<input type="text" name="search" id="search" class="form-control" placeholder="Search...">
<span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-close"></i></button></span>
</div>
</div>
<?php echo form_close();?>
Body part, that contains the result of the search.
<div class="static-content-wrapper">
<div class="static-content">
<div class="page-content">
<ol class="breadcrumb">
<li class="">Home</li>
<li class="active">Search</li>
</ol>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-white">
<div class="panel-heading">
<h2><!-- Panel --></h2>
</div>
<div class="panel-body">
<div style="clear:both;"></div>
<div id="update"><!-- search results will be added here --></div>
</div>
<div class="panel-footer">
<span class="text-gray"><em>Footer</em></span>
</div>
</div>
</div>
</div>
</div> <!-- .container-fluid -->
</div> <!-- #page-content -->
</div>
In my controller I've written the following code:
public function live_search()
{
//load page template
$this->load->view('templates/header');
$this->load->view('templates/sidebar');
$this->load->view('templates/live_search');
$this->load->view('templates/footer');
}
I would like to "activate" the "live_search" public function simply selecting the search field. Just to give you an example, you can think to the search function of Netflix. When you select the search bar, a black page is loaded automatically and start typing you see the results of your search.
So, when I select the search text field my script should load the "templates/live_search" page.
How could I do this?
Thanks for your kind support.
DOM manipulation like this isn't done in CodeIgniter on the server, its done client site in JS. You need JS to listen for the search input focus, and then either AJAX in your "live search page" (not exactly clear on what you want there), or load everything on initial page load, and then just show the "live search page" on focus of the search bar.
If you're using jQuery it might look something like this:
$('body').on("focus","#search",function(){
$('.live-search-container').show()
//or do an ajax call
});
Related
so I have a page. there's a search bar. if the search bar has no text inputted, the page displays two partials, one for featured apps and one for most popular. but if someone inputs any text at all into the search bar then the featured apps and most popular apps partials disappear and the search results partial shows up. instead what happens is neither partials load. there's just a big blank space where they should be.
I tried doing this with jQuery but was having no luck. so now I'm back to trying to use dynamic partials but am also having no luck with that. if this can only be done with something like jQuery please let me know.
I was briefly trying to use a handlebar helper but I could not link it to the input id="searchApps" element without throwing an error because it keeps saying searchApps is undefined.
index.hbs (if this is missing any divs it's cause it's just part of the code)
<div class="col-2 offset-1">
<div class="column-side">
<div class="sidebar">
<input id="searchApps" type="text" placeholder="Search apps...">
{{!-- so once someone types the first character here the searchResults partial should render. and it should be dynamic so results should further refine with each additional character typed--}}
{{>sidebar}}
</div>
</div>
</div>
{{#if 'searchApps.length === 0'}}
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
{{else}}
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
{{/if}}
here is the jQuery I tried in the index.hbs file just before the </body> tag
<script type="text/javascript">
$('#searchApps').on('change', function(){
if ($(this).val() == ""){
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
} else {
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
}
});
</script>
so anyone know how I can do this?
thanks
I want to pass from a tab to another tab through a input (type submit), that input has some JS code behind, but the console shows this
Uncaught TypeError: Cannot read property 'addEventListener' of null
HTML Code:
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Registrarse</h3>
</div>
<div class="panel-body">
<ul class="nav nav-tabs" id="myTabs">
<li role="presentation" class="active" id="pone">
<a data-toggle="tab" href="#datospersonales">Datos personales</a>
</li>
<li role="presentation" id="ptwo" class="disabled">
<a data-toggle="tab" href="#registrousuario">Registro de usuario</a>
</li>
<li role="presentation">
</li>
</ul>
<div class="tab-content mt-25">
<div role="tabpanel" id="datospersonales" class="tab-pane active fade in">
<form class="form-horizontal" id="form1" name="form1">
<label class="col-md-1 control-label">Nombres</label>
<div class="col-md-4">
<input type="text" class="form-control s" placeholder="Nombres" id="name">
</div>
<label class="col-md-offset-1 col-md-1 control-label">Correo</label>
<div class="col-md-4">
<input type="text" class="form-control s" placeholder="Correo" id="email">
</div>
</form>
<div class="col-md-offset-11 col-md-1 mt-25">
<input type="submit" class="btn btn-success" class="guardar" value="Siguiente" onclick="handleClick()">
</div>
</div>
JavaScript Code:
var boton = document.querySelector(".guardar")
boton.addEventListener('click',handleClick);
function handleClick(){
$('#myTabs a[href="#ptwo"]').tab('show');
}
I don't know if it's that i'm not using JQuery properly in this case, im new at this.
I found few things on your code, please consider this just observations.
In the future please specify that you are using boostrap and jQuery (not all pages uses these frameworks), it will help to understand the issue that you are having , also please specify the version of the libraries that you are using!.
in the Submit button you are repeating the attribute "class", so the second one will be ignored when you are trying to get by className; Other important point it since you are adding event handler through JS is not necessary to use "onclick".
<input type="submit" class="btn btn-success" class="guardar" value="Siguiente" onclick="handleClick()">
change by
<input type="submit" class="btn btn-success guardar" value="Siguiente">
The HTML submit button will handle a submit , it means that always will send the information in the page to other (could be the same), but that perform of sumit means another requests is done, so, it is necessary to be a submit button ?. Assuming the submit is needed you will need to prevent the event of sending the information (until you want that perform of information necessary), for preventing events you can use "event.preventDefault()", you also will need to add a logic to stop preventing when you consider the information is ready to be sent.
the selector for the tab is not necessary to be to much specific, since is supossed that the id af an HTML element should not be the same in the entire page.
var boton = document.querySelector(".guardar")
boton.addEventListener('click',handleClick);
function handleClick(e){
e.preventDefault();
$('#ptwo').tab('show');
}
this is the sample workiing:
Your sample working
I am trying to learn from Stack Overflow's "add a comment" link with code of three sections:
footnote-list
footnote-form
add-form-link
<div class="col-md-12 footnotes">
<div class="footnote-list">
<ul class="footnote-list">
....
</ul>
</div>
<div class="footnote-form"> make it invisible
<form>
...
</form>
</div>
<div class="add-form-link">
add a footnote
</div>
</div><!-- footnotes -->
I intend to make "footnote-form" invisible at first glance, later to emerge when "add-form-link" is clicked.
The nodes could be shown and hidden using $().hide() $().show()after the page successfully loads.
How can I hide a node at the very beginning?
To hide elements on load... CSS is prefered.
Then to show it, you need a click handler. The e.preventDefault() prevents the normal behavior of a link.
$(".add-form-link a").on("click",function(e){
e.preventDefault();
$(".footnote-form").show();
});
.footnote-form{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 footnotes">
<div class="footnote-list">
<ul class="footnote-list">
....
</ul>
</div>
<div class="footnote-form"> make it invisible
<form>
...
</form>
</div>
<div class="add-form-link">
add a footnote
</div>
</div><!-- footnotes -->
On my page are repeating triggers, which should open (change the visibility) a specific form on click. On some pages, there are multiple triggers and forms.
The HTML markup is like this:
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form
</div>
</div>
I'm trying to work on a script, where on click on #form-trigger-x the resonating form (#form-x) get's displayed. That's not the problem, but I want to automate this, so if a page has one form it works and also if it has 10 forms it works, without the need to hardcode every number in the script.
I tried an approach with .each and $(this) but it opened all forms at once instead of the form that should be triggered.
First you need to add click event on all the a tag where id starts with form-trigger with
$("a[id^='form-trigger']").click(function(){
And then you just need to get the next of clicked a tag and play with its display property or whatever you want like
$(this).next()
$("a[id^='form-trigger']").click(function(){
$(this).next().slideToggle();
})
$(".btn").click(function(){
$(this).closest("div").slideToggle();
})
#form-2{
display:none;
}
#form-1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form 1
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 1</button>
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form 2
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 2</button>
</div>
</div>
Here is how I approached this. You don't need to target them with specific ID value, Instead, use classes because the basic structure of each container is same it would work no matter how many different forms you got.
When you click on the anchor tag, my script would look for closest form-container class and find the showform class in that dom element and show it.
I have added the code snippet below as an example.
Hope this helps!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="form-container-1" class="form-container">
<a onclick="showform(this);" id="form-trigger-1">Open Form</a>
<div id="form-1" class="showform hide">
content of form
</div>
</div>
<div id="form-container-2" class="form-container">
<a onclick="showform(this);" id="form-trigger-3">Open Form</a>
<div id="form-2" class="showform hide">
content of form
</div>
</div>
<script>
function showform(caller){
$(caller).closest(".form-container").find(".showform").removeClass('hide');
}
</script>
I'm making a project in asp.net MVC. I want to print a div with all css styles applied. This div may contain one or more divs inside it. I tried a lot of javascript print codes but each of them failed. The page I want to print looks like this: Click here to view page. I just want to print the area below the input region which contains the details. But the problem is that when I use the javascript print method, my table view suddenly vanishes. This is the print preview that I get: Click here to view the print preview page. I've tried multiple methods but all have failed. Please Help. Thanks in advance. Below are my code files of front end
saleInvoice.cshtml
<script>
function refresher() {
$('#si, .si').load('/TallySet/cart');
};
function printDiv(divID) {
debugger;
var printContents = document.getElementById(divID).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
};
</script>
<div class="col-lg-12 popblk">
<p>New Sales Invoice</p>
</div>
<div class="col-lg-12" style="background-color:white">
<div class="row">
<div class="col-lg-2">
<p>Customer : </p>
</div>
<div class="col-lg-4">
#Html.DropDownList("customers")
</div>
</div>
<div class="row">
<div class="col-lg-4">
#Html.DropDownList("items")
</div>
<div class="col-lg-4">
#Html.TextBoxFor(x => x.quantity)
</div>
<div class="col-lg-2">
<button value="Add to cart" onclick="addToCart()">Add to cart</button>
</div>
<div class="col-lg-2">
<button value="Refresh" onclick="printDiv('si')">Refresh Cart</button>
</div>
</div>
<div class="row" id="si" style="margin-left:50px;">
#{Html.RenderAction("cart", "TallySet");}
</div>
<div class="row" style="background-image:url('../../viewData/sale_footer.png')">
</div>
<button class="rButtonCancel" value="X" data-dismiss="modal" onclick="listVoider()">X</button>
</div>
cart.cshtml
#model IEnumerable<Fast_Tally_Accounter.Models.salesCart>
<img src="~/viewData/sale_head.png" />
#if(Model!=null)
{
foreach(var v in Model)
{
<div class="row" style="background-image:url('../../viewData/sale_row.png'); background-repeat:no-repeat;margin-left:0px;margin-bottom:0px">
<div class="col-lg-2">
<p>#v.quantity KG</p>
</div>
<div class="col-lg-4">
<p>#v.itemName</p>
</div>
<div class="col-lg-1">
<p>#v.itemPrice</p>
</div>
<div class="col-lg-1">
<p>#v.itemTotal</p>
</div>
</div>
}
}
<div class="row" style="background-image:url('../../viewData/sale_footer.png'); background-repeat:no-repeat; margin-left:0px; height:120px">
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:2px; margin-right:0px" id="myRow">
<p>#ViewBag.dt</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:2px; margin-right:0px" id="myRow">
<p>Daniyal humayun</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:10px; margin-right:0px" id="myRow">
<p>#ViewBag.qt</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:0px; margin-right:0px" id="myRow">
<p>#ViewBag.pr</p>
</div>
</div>
There's a number of issues here. First and foremost. You're not actually using a table. Instead, you're using Bootstrap's grid styles to make an approximation of a table. Using an actual HTML table is a better idea, not just for the consistency it provides but also for the sake of accessibility.
Second, the "borders" to your "table" are being applied via background images. While I think Chrome actually gives the user the option to print background images, now, it's not the default, and other browsers will simply ignore background images entirely when printing. Long and short, that approach is doomed to failure.
Third, when printing, you're actually taking the contents of this div and replacing the entire HTML document with that. Importantly, that means any stylesheets and such that were part of the document are thrown away. In particular to your issue here, that would include the Bootstrap stylesheet. This was the way people used to handle printing way back in the day before CSS was even really a thing. Now, there's a much preferable way to handle removing extraneously content from the print. You simply add print-specific styles and hide elements you don't want to print (such as a page header) via that. For example:
#media print {
#Header { display:none; }
}
You can also use this same approach to change styles to improve the print layout. Maybe you want the text to be larger or smaller when printed. You simply add something like body { font-size:12pt; } inside this block.
The only JavaScript you actually need is just window.print(). Your print button calls that, and your print-specific CSS should take over to modify what needs to be modified in the print version.