I want to create something similar to collapsible divs to show or hide content to the user.
I don't want the content to be load in one ajax call because the data is huge.
Each time a user click on an option, an ajax call will load the data.
I started using append to create the divs. Since I don't know how much option there is on each one, I couldn't build the divs in advance.
The problem I'm having with appends is when a user click on option B, options b1,b2,b3 are loading and the divs are created. But when the user decide to go back to option A and then back to option B, the divs are created again and now they are multiple.
Does anyone have an idea how to do this?
As I sayed in my comment you can do something like this:
EXAMPLE
<div id="option-a">option A</div>
<div id="option-b">option B</div>
<div id="option-c">option C</div>
<div id="option-d">option D</div>
$("#option-b").on("click", function(){
//if element doesn't exist
if( $('#submenu-b').length <= 0 ){
//add elemnent
$("#option-b").append("<span id='submenu-b'><div>B1</div><div>B2</div><div>B3</div></div>");
}
})
Related
I have a wordpress page where I want to create custom events.
I would like to measure how many people click on different links/entries on my page.
I have been reading and I should create in HTML an on click DOM event for those entries/links, but I am not sure how to set this up.
Then I also require the DOM selector.
Would somebody give me an example of how to do this?
Below is an example of how it looks an entry on HTML:
-Shoes: Click acá!
Thanks very much.
Sabrina C.
I think this is what you're asking for:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick
A better solution might be:
<a onclick="log(this)" href="https://www.paruolo.com.ar/" rel="nofollow noreferrer">Click acá!</a>
<script>
function log(e){
alert(e.href);
alert(e.innerHTML);
}
</script>
This would allow you to pass the item to a fetch call that you replace the alert with to log on your server or on the page. Just replace the alert with another function that handles your data and handle by link or the text in the link.
I am in a bit of a pickle with this form and i would really appreciate some help.
After installing the customSelect() jquery plugin, i was no longer able to select the cloned select box elements on my form.
For an example, go to...
http:// gator1016.hostgator.com /~tamarind/index.php/en/book-now.html
Click on the second slide >> click on the "add a package" button >> try and change one of the cloned select box values.
Does anyone have any suggestions as to why this is? I'm under a bit of pressure to get this fixed.
Thanks in advance.
You are running .customSelect() in a seperate script tags previous to the rest of your form script. So here is the current order of events:
customSelect takes all given selects and appends a customizable <span> next to each (this is what you styled to achieve the desired look). It also attaches event listeners to those very spans so they can properly interact with their corresponding select element.
A user clicks "add another package", you clone the entire block of form elements including the custom spans that the plugin appended.
It is important to note that in doing this, you are not copying the event listeners, just the elements. Right now, even if you ran customSelect again upon cloning, you would likely have some kind of issue because the original span would still be there.
The solution to your problem would be to keep a reference to a clone of your form block that has not already had customSelect applied. Then each time you insert a new form block, you need to apply customSelect to the "vanilla" form block.
Here is a reduced example for you
HTML
<form action="" id="myForm">
<div id="formBlock">
<select><option>one</option><option>two</option></select>
</div>
</form>
<button id="addNew">add new</button>
jQuery
//do this first:
var formBlock = $('#formBlock').clone();
//now .customSelect();
$('#formBlock select').customSelect();
$('#addNew').click(function(e){
e.preventDefault();
var newFormBlock = formBlock.clone().appendTo('#myForm'); //clone the reference to un-modified form block!!!
newFormBlock.attr({
id:'' //dont want duplicate id's
});
newFormBlock.find('select').customSelect();
});
Demo: http://jsfiddle.net/adamco/ZZGJZ/1/
You also can cleanup the elements added by the plugin, and launch again customSelect:
$('form').find('span.customselect').remove(); //remove the span
$('form').find('select.hasCustomSelect').removeAttr("style"); //clean inline style
$('form select').customSelect( { customClass: "customselect" } ); // fire again customSelect
I am trying to create a grid app with various sections and each section is being fetched to a specific listview however I have encountered a problem where you can only have one listview covering the entire page in order to properly horizontally scroll the objects inside the list which means there's no room for another one. This is the code I am using right now:
WinJS.xhr({ url: "http://search.twitter.com/search.json?q=%23windows8&rpp=100}).then(
function (response) {
var json = JSON.parse(response.responseText.toString());
var list = new WinJS.Binding.List(json.result);
gridView1.winControl.itemDataSource = list.dataSource;
//gridView1 is ID of listview
}
With the above code I can easily show grids of objects containing result array and then bind em to the list. However now I want multiple similar listviews for different URLs that are displayed like the one shown as default interface in WinJS grid app.
To be more clear, this is what I want - Twitter usernames in first section of grid by using Twitter API URL1 and then I want twitter search results in adjacent grid so I have to use another listview b using URL2.
How do I find a fix for this. Appreciate your help.
Yeah, coming up with what all of the disparate items from the different lists have in common and projecting your data up to a single grouped list is one option. You might not want to give up on what you were trying to do though. If you put multiple ListViews on a page wrapped in a flexbox, you shouldn't have any trouble with scrolling. If you look at my codeSHOW app at the ListView demo, you'll see that I have the rough equivalent. Windows is actually really smart about the way it handles the panning.
** EDIT **
Here's a rough example of what I'm talking about. Again, you can find a working example of this in the ListView demo of codeSHOW.
<!-- HTML snippet -->
<div class="hub">
<div>
<div id="list1" data-win-control="WinJS.UI.ListView"></div>
</div>
<div>
<div id="list2" data-win-control="WinJS.UI.ListView"></div>
</div>
<div>
<div id="list3" data-win-control="WinJS.UI.ListView"></div>
</div>
</div>
/* CSS snippet */
.hub {
display:-ms-flexbox; /* this will lay the lists out horizontally */
overflow-x:auto; /* set the flexbox to scroll its overflow */
}
/* select each of the sections */
.hub > div {
padding-right:80px; /* 80px of space between "sections" */
}
/* choose whatever sizes you want for your list views. You may want to make them wide
enough that they don't scroll because it can get a little awkward to have scrolling
within scrolling */
[data-win-control=WinJS.UI.ListView] {
width: 640px;
height: 480px;
}
You can solve this by aggregating the result set into a single data source.
You can either do this through splurging your data into a WinJS.Binding.List that's been set up with a grouping function, and attribute your data in such a way that you know how to group them. An example of the grouping of a WinJS.Binding.List can be found in the "Grid" Template that you find in Visual Studio when doing File/New/Project.
Or, you can build your own data VirtualizedDataSource - there is a great tutorial for this on MSDN here.
In Google Sites, I am trying to add a short form consisting of a text box and a submit button as a cell in a row inside an html table. One copy of the form for each row in the table. I am trying to collect input data for each table row.
HTML File:
<html>
...
function showForm(){ // https://developers.google.com/apps-script/gui_builder#including
var app=UiApp.createApplication();
app.add(app.loadComponent("myGui"));
return app;
}
...
<table><tr><td><?=showForm()?></td></tr></table>
...
</html>
I then call the .html file from my doGet() function in my .gs file using HtmlService.createTemplateFromFile() method.
The table renders properly, except where I expect the form to appear, I instead get the text/string "UiApplication" instead of the text box + submit button combo.
Am I on the right track? Please help.
It's the wrong track.
You can't mix & match components from HtmlService and UiApp. GUI Builder is a packaged UiApp component.
Just stick with a FlexTable and fill the table cells with your builder component. But don't forget to set a prefix:
var flextab = app.createFlexTable();
for (row=0; ...)
for (col=0; ...)
flextab.setWidget(row, col, app.loadComponent("myGui", {"prefix": "row"+row+"col"+col});
BTW - you can only have one UiInstance in your web app. Call UiApp.createApplication() only once. If you need the UiInstance later on, you can always find it with UiApp.getActiveApplication().
I want to show my users data from my mysql database without reloading the page.
I am using Codeigniter. I have a dropdown menu like the following, - when the page loads I want it to show all data by default. But when any user selects any name it will query to database and show results immediately without having the page reloaded.
I already have a controller, model and view to display all data from database but I don't know how to get the dropdown menu work after a person has selected a value, to fetch data from database and show immediately without reloading the page.
I have some basic knowledge of PHP but I have no idea about AJAX. Would you please kindly give me an example or idea on how to do this?
I am not expecting you to write the code for me, I am just asking for an example or a guideline. :)
Thanks in Advance.
<form>
<select name="info">
<option value="">Select a person:</option>
<option value="11080101">John</option>
<option value="11080102">Bon Jovi</option>
</select>
</form>
It sounds like with what you are aiming to achieve this isn't really a codeigniter related question but more a HTML, JQUERY question.
Using jQuery To Manipulate and Filter Data over at Net-tuts shows a jquery solution to sorting and filtering data. Their solution is based on a table but the principals are there so a modification can get it to do what you want it to do.
well i can give you the flow of how can you try it
trigger a jquery event on selecting an dropdown menu item. if you don't have any idea how to do it try reading the documentation of jquery for using selectors .
once you have the selected element , extract its value and send an ajax call to your path
like this (for jquery ajax visit jqapi it has all the documentation for jquery ajax functions and its derivatives)
$.post('/user/data/' + id , function(response) {
console.log(response)
})
or
$.post('/user/data/', 'id=' + id , function(response) {
console.log(response)
})
and now you have your data in reponse so you can do whatever you wish to do with it