I have written some code that generates a set of buttons when the page loads using a loop, each iteration of the loop increments an ID value to assign to the new button.
I originally wrote it using standard JQuery but because of the way JQuery Mobile works, I am having to rewrite it.
<a id = "<?php echo $button_id_add_to_cookbook ?>"onclick="update_button('<?php echo $button_id_add_to_cookbook ?>')" data-role="button">Send</a>
the function update button is below, at least the test trial version.
function update_button(id)
{
$(id).click(function(){
$(id).toggle();
});
}
I'm having a hard time finding 2 accounts that say how to do this the same way so don't think this is correct.
The goal it to dynamically generate a set of buttons and when a button is clicked, it will call some code to alter a mysql database and on success hide the button that called the function. For this example I just want to hide the button when t was clicked.
Can anyone help me with the correct way to do this, the page should not refresh, just update the button element.
I think it was a spacing issue causing problems, for dynamic id content this seemed to work as a replacement function.
function update_button(id)
{
$('#' + id).closest('.ui-btn').hide();
}
if this will lead to any issues in the long term please let me know!
Related
Here is what I am trying to do.
If the user makes a selection from the suggested options then I display a div tag using jquery. I use onCompleteTopics to fire this event.
Now when the user makes any changes to the text box I want to hide the div tag again unless the user makes a selection from the suggested options.
How to fire the text changed event on jquery struts2 autocompleter.
I make a div tag visible when the user selects something from the suggestions using onCompleteTopics.
However if the user changes the text in the field I want to hide the div tag again.
But I am not able to find the right event for the same.
After trying a lot of permutation and combination I managed to figure out the solution. Its not straightforward maybe not the ideal solution but it works.
Struts Code
<sj:autocompleter
theme="simple" name="userName" id="idautocomplete"
href="%{fetchList}" onSelectTopics="complete" onSearchTopics="textchange"
loadOnTextChange="true" loadMinimumCount="3" />
Note I have used onSelectTopics and onSearchTopics but this itself do not solve the problem. I have to use some jquery along with this.
jquery
var gvar;
$.subscribe("complete", function(event, data) {
gvar = data;
setTimeout(delayfunc, 0);
});
$.subscribe("textchange", function(event, data) {
$('#idBizAccess').css("display","none");
});
function delayfunc() {
$('#idBizAccess').css("display","table-row");
}
The unusual part here is setTimeout with delay 0. I tried calling the function directly but it doesn't fetch the selected value instead it just fetches the value that is typed in the autocompleter field.
Now it works as per the requirement.
Working on an iPhone app using the ionic framework(which is great). Currently im am using the $state variable to redirect usings, say 'on a successful login'.
I am writing this like so...
$state.go("app.search");
I have also tried
$state.go("app.search", {}, {reload: true});
Both of which correctly load the /search page but provide me with the back button at the top left with the menu.
Now i want the back button on the other functionality. I'm wondering if I need to call a different method to changes pages or if i can temporarily disable it on some views?
Any pointers would be great!
This might be a little late but in case someone else gets here looking for an answer, you can use the $ionicViewService as described below
function controller($scope, $state, $ionicViewService) {
$ionicViewService.nextViewOptions({disableBack: true});
$state.go("app.search");
}
Is it possible to fire action,actionListener of a <p:commandButton> with attribute type="button". I have a requirement where in a form there are text boxes and command buttons. If I press enter in any text box then commandButton is invoked. So I change all command buttons type to "button". Now problem I am facing that command button's action, actionListener not firing.I want to solve it with out using java script. Also I read this This Link. Can any one tell me where I should edit or change to get expected output. Thanks.
Using type="button" is the wrong solution to prevent enter key from submitting the form. It basically changes the submit button to a dead button which does not submit the form and is only useful for attaching JavaScript onclick and likes. You're simply facing the consequences of this wrong solution. You should not try to fix it, but take a step back and solve the initial problem the right way.
One of the ways is:
<h:form onkeydown="return event.keyCode != 13">
Or, more generically, with jQuery, which skips textareas from the restriction:
$(document).on("keydown", ":input:not[textarea]", function(event) {
return event.keyCode != 13;
});
Note: jQuery is already bundled in PrimeFaces, you do not need to install any scripts separately. Also note that you really can't go around JavaScript here. Even more, PrimeFaces/ajax components rely on JavaScript and wouldn't work anyway without JavaScript.
I have a page where I put my tab content into a div.
This work fine and I can see the tabs.
Later, an event occurs (like selecting a combo box value) and I want to change to another set of tab.
I basically did:
('#divId').empty();
someData.appendTo("#divId");
$("#divId").tabs();
Here is the problem, this 2nd call show me a list:
. tabName1
. tabName2
..... etc
Any idea what's going on, seems like the call to .tabs() work only once when I first load the page.
Thanks.
Check the value of someData, it might contain invalid html that cannot handled when you call the jquery tabs() method again.
One way to do it is:
console.log(someData);
Then if you're using chrome, hit F12 then click on "Console".
$("#detailUL").append("<li><a href='#tabs3-"+id+"'>Desc No "+m+"</a></li>"); // desc
$("#details").append("<div id='tabs3-"+id+"' class='it_detail'>"+copy+"</div>"); // detail
$("#detailPanel").tabs("refresh");
I am doing a PhoneGap app with JQuery Mobile and I have two pages, one that has a dynamic list of pages and one that has a form to either edit or create a page. These are in a single html file.
Tapping on a list item passes ?action=edit and tapping the "Add" button I have, passes ?action=add querystrings.
Here is a jsfiddle to visualize the pages
NOTE: The example doesn't act quite the same as the live code.
I am running my app on an Android phone and if I do these actions, the correct querysting is observed in the alert box: -
Click the add button on list page
Click back on the form page
Click the an edit list item link on list page
However, if I do it the other why around (click edit first, then the add button) clicking the add button never shows the add querystring in the alert box
(the jsfiddle example always locks the first clicked link's querystring, which is even worse than the live code!)
The problem here is that you're using a multiple template to do this. If you were using this as separate pages, this would work as normal. As a multiple app, the best way to handle this would be to make a link trigger the setting of some global variable that keeps track of the current state of the app.
Make the edit links like this
Page 15
Then make the script something like this:
var editingId = 0
function editPage(id){
editingId = id;
$.mobile.changePage("#editingPage");
});
$("div#editingPage").live("pageshow", function(){
loadDataForPage(editingId);
});