I have a button on a page but there is no hyperlink in the button. So I need to submit the form to go to the next page.
HtmlUnit is not waiting till the next page loads. So the nextPage variable is having the current page instead of the next page (intermittently it works if page loads quick enough though). How to resolve this?
Html Page:
<form action="/webapp/NewPage.jsp" id="idForm01" accept-charset="UNKNOWN" onsubmit="return false;"
name="frmNewPageForm" method="post" enctype="application/x-www-form-urlencoded">
<input name="attribute1" type="HIDDEN" value="1">
<input id="attribute2" value="EDIT_ATTRIBUTE2" name="functionalAttribute" type="hidden">
</form>
<table id="idTablePageDetails" class="formTable">
<tbody>
<tr class="formHeaderRow">
<td colspan="4" nowrap="">
Page Details
<a onclick="onClick_newPageButton();return false;" id="newPageButton" title="New Page" href="#" class="smallButton">
<img id="image" border="0" class="smallButtonImg" src="/webapp/image/imageButton.png"></a>
<script type="text/javascript" language="Javascript">
<!--
function onClick_newPageButton() {
buttonAction_newPageButton();
}
function buttonAction_newPageButton() {
if ( allowClick() == true ) { addFormField( "frmNewPageForm", "action", "ACTION_NEW_PAGE" );
if ( document.frmNewPageForm.onsubmit != null ) { document.frmNewPageForm.onsubmit(); }document.frmNewPageForm.submit(); }}
// -->
</script>
</table>
Code I am using to get the next page:
HtmlPage nextPage = (HtmlPage) page.executeJavaScript("document.frmNewPageForm.onsubmit()").getNewPage(); // from onsubmit
Your observation is the result of the today common ajax/async/javascript based one page approach for web applications.
You can use a code pattern like this
... find the clickable element...
myBtn.click();
webClient.waitForBackgroundJavaScript(10000);
HtmlPage resultPage = (HtmlPage) webClient.getCurrentWindow().getEnclosedPage();
After the click you have to wait until the async started javascript is processed. Then you have to get access to the current page (the content of the current window) because the page is usually replaced during the javascript processing.
There is also a method waitForJobsStartingBefore() if you like to have more control over the wait time. Both methods are returning before the given timeframe in case there is no more javascript job pending. For more details have a look at the javadoc and the code.
If you like to have a look at a more sophisticated usage of the api you can have a look at the Wetator (https://www.wetator.org/) source code. A good starting point is the class HtmlUnitBrowser (https://wetator.repositoryhosting.com/trac/wetator_wetator/browser/trunk/wetator/src/org/wetator/backend/htmlunit/HtmlUnitBrowser.java)
Hope that helps.
Why do you do clicks on buttons or execute javascript instead do requests? I think this is more trustworthy
Append any attributes to the form if you need using NameValuePair.
Then Call onSubmit() and then Submit()
HtmlPage nextPage1 = (HtmlPage) page.executeJavaScript("document.frmNewPageForm.onsubmit()").getNewPage(); // from onsubmit
HtmlPage nextPage2 = (HtmlPage) nextPage1.executeJavaScript("document.frmNewPageForm.submit()").getNewPage(); // from submit
Related
I have called scripts on _Layout.cshtml page and my Index.cshtml page has partial view into it. So on page load, SignalR scripts working perfect on partial view, on page end I make another ajax request and load the partial view with another data filled in that and embed under already displayed data, and then the SignalR does not work on the newly embedded record.
This is my index page code:
<div class="col-md-6">
<div class="profile-body">
<div class="row infinite-scroll">
#Html.Partial("_AlbumRow", Model)
</div>
</div>
</div>
This is my partial View Code:
#model IEnumerable<SmartKids.Lib.Core.ViewModels.FileMediaAlbumsVM>
#foreach (var item in Model)
{
<div class="widget">
<div class="block rounded">
<img src="#Url.Content(item.ImageUrl)" alt="#item.Title">
<input type="button" data-image-id="#item.imageId" class="btn btn-sm btn-default">Like</input>
</div>
</div>
}
Kindly help me how to resolve this issue that after making an ajax request I am not able to get those SignalR working. Here is more to say when I put the SignalR scripts on PartialView that works but it also sucks that on each ajax request there is again SignalR loaded on the page and when I click on LIke button it makes many calls to the function behind it.
Kindly help me to resolve this issue, I am stuck at this point since 1 week.
Here is signalR Code:
$(".btn.btn-sm.btn-default").on("click", function () {
var imageId = $(this).attr("data-image-id");
albumClient.server.like(imageId);
});
Problem: You are binding event to elements directly, So when you remove this element and replace it with a different one the events are also removed along with that element, This is something like strongly coupled.
Solution: Use Jquery event delegation. This will make sure the events will be triggered on the current elements and also all the elements that can come in future.
syntax is as below.
$(document).on("click", ".btn.btn-sm.btn-default",function () {
var imageId = $(this).attr("data-image-id");
albumClient.server.like(iamgeId);
});
NOTE: This was never a singlaR issue, it was Jquery issue.
Efficient Way: The problem in using $(document).on("click"... is that when ever there is a click happening on the entire page the Jquery framework will bubble the events from the clicked element upwards(its parent, and its parent and so on..) unless the element specified in the selector arrives, So its kind of performance hit as we don't want this check's to run if we are clicking outside the required area ( button .btn.btn-sm.btn-default in this example).
So best practice is to bind this event delegation to the closest parent possible which will not be removed, <div class="row infinite-scroll"> in this question. So that only when the click happens within this element the event bubbling will happen and also will be stopped once it reaches the parent element,it acts kind of a boundary for event bubbling.
$('.row.infinite-scroll').on("click", ".btn.btn-sm.btn-default",function () {
var imageId = $(this).attr("data-image-id");
albumClient.server.like(iamgeId);
});
I'm using Laravel 5 to generate a form for a warehouse. In Main form you can select which items to get and it should generate a PDF with the items (all info), people to get the items, date and invoice number.
All the information is on a DIV called 'invoice'. How can I send this object to a new view to generates the PDF. I read about 'invoking dompdf via web' to make it more interactive but the documentation is not clear enough or doesn't fit with I'm needing.
This is my current code:
From:
Recibo.js
$('#createPDF').click(function()
{
$htmlData = "data";
$_token = $('[name="_token"]').val();
$.get('recibos/pdf',{ html:$htmlData, _token: $_token })
.done(function(data)
{
console.log('Done PDF!');
});
});
ReciboController.php
public function reciboPDF(Request $request)
{
$data = $request->get('html');
$pdf = \PDF::loadView('create.template.formReciboPDF',compact('data'))->setPaper('letter')->setOrientation('landscape');
return $pdf->stream();
//return view('create.template.formReciboPDF');
}
formReciboPDF.blade.php
<tr>
<td>{{$data}}</td>
<td>Papeleria</td>
<td>Unidad</td>
<td>Grande</td>
<td>La Palma</td>
<td>2342423424234</td>
<td>Bueno</td>
<td>9</td>
</tr>
Instead of trying to capture the HTML can you send the selection parameters to the server and rebuid the page? Then you would just need to feed the generated HTML into dompdf and render. If visual appearance is important you could use hidden checkboxes as the selection mechanism.
If you want to use a shortcut you can capture the HTML using jQuery.contents().
In your second part it looks like you're trying to send your request via AJAX and get back the PDF. While this is technically possible it's more trouble than it's worth. An easier alternative would be to submit a hidden form to a blank window. It would require some minor changes to your HTML/JS but little else, e.g.
$('#createPDF').click(
function() {
$('#html').val($('#invoice').content());
$(this).closest('form').submit();
});
<form method="POST" action="recibos/pdf" target="_blank">
<input type="hidden" name="html" id="html" value="" />
<input type="hidden" name="_token" value="{value from server}" />
<button type="button" id="createPDF">Create PDF</button>
</form>
jQuery Mobile 1.3.2: I have a listview with the filter enabled. The page that this is on is loaded via jQuery mobile ajax.
My problem is that if I allow it to load via ajax, it detects my keyup event but it does not pull the value of input[data-type="search"]. If I refresh the page using the browser, the script executes perfectly.
How can I get this to work while loading the page with AJAX?
HTML MARKUP:
<ul id="addCompany" style="padding-bottom:10px;" data-role="listview" >
<li>Touch To Add</li>
</ul>
<div id="listwrap">
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li>Adam Kinkaid</li>
</ul>
</div>
jQuery
<script>
$(document).ready(function(){
var inputVal;
$('body').on("keyup",'input[data-type="search"]', function(){
inputVal = $('input[data-type="search"]').val();
if(inputVal===""){
$('#dynamic').html('<li>Touch To Add</li>');
$('#dynamic').listview("refresh");
}else{
$('#dynamic').html('<li>Touch Again To Add: '+$('input[data-type="search"]').val()+'</li>');
$('#dynamic').listview("refresh");
}
});
});
</script>
EDIT: Note that I can set the value and set the focus on input[data-type="search"] without any hiccups. It is retrieving the value that seems so tricky.
I tried adding a class to so that I wouldn't have to call it by data attribute but still couldn't pull the value unless I refreshed the page. Maybe if I inject a function into the input element I can use that to return the value?
EDIT italics = more detailed explanation added to the question. Thanks.
I'm building a jQuery Mobile site which has a Gallery section.
The gallery has a series of thumbnails on the top of the screen.
Users click on the thumbnail to load in new content, that being a larger image, text, and potentially audio on some of them.
It's at this point that I'm not sure what to do: the way jQuery Mobile works, it's geared towards loading new pages, or views. But I just want to inject new content in a container on the current page.
To be clear, when the user clicks on another thumbnail, a new image replaces the content of the container with new content.
I have two questions:
I'm not sure how to structure the dynamic content. I was thinking i'd create an html file for each item, which as a rule always contains a title, information and sometimes, audio.
I'm not sure how to script this functionality in jQuery Mobile. It's obviously Ajax, but I'm not familiar with it yet, especially since jQuery Mobile has it's own methods in place already which seems to redefine behaviors in a way that's contradictory to this approach described here.
Here is a code explanation of what i'm trying to do:
<!-- Galleries -->
<div data-role="page" id="galleries">
<div data-role="content" role="main">
This is the Selection UI, if i click on thumb2.jpg, it'd
fill #content-holder with the whatever html is in content2.php
<div id="thumb-carousel">
<img src="thumb1.jpg">
<img src="thumb2.jpg">
<img src="thumb3.jpg">
<img src="thumb4.jpg">
<img src="thumb5.jpg">
<img src="thumb6.jpg">
<img src="thumb7.jpg">
<img src="thumb8.jpg">
<img src="thumb9.jpg">
</div>
<!-- This is the container, currently it's filled
with the kinda stuff i need to put in it. -->
<div id="content-holder">
<img src="myimage1.jpg"/>
<p>Artwork Title</p>
<p>Caption</p>
<audio>//mp3</audio>
</div>
</div>
</div>
//remember to use event delegation because you never know when the page will be in the DOM
$(document).delegate('#galleries', 'pageinit', function () {
//bind a `click` event handler to each thumbnail link
$('#thumb-carousel').children().bind('click', function () {
$.ajax({
url : $(this).attr('href'),
success : function (serverResponse) {
//select the container,
//then fade it out,
//change it's HTML to the response from the AJAX request,
//and fade it back in
$('#content-holder').fadeOut(500, function () {
$(this).html(serverResponse).fadeIn(500);
});
},
error : function (jqXHR, textStatus, errorThrown) {
//remember to handle errors so your page doesn't seem broken to the user
}
});
//prevent the default behavior of the link, which is to navigate to the `href` attribute
return false;
});
});
This expects your server-response to be valid HTML markup that is ready to inject into the DOM, meaning no <html> or <body> tags, just what you want to add to the DOM:
<img src="..." />
<span>TITLE</span>
<audio src="..."></audio>
Here are some docs for ya:
$.ajax(): http://api.jquery.com/jquery.ajax
.closest(): http://api.jquery.com/closest
.fadeIn(): http://api.jquery.com/fadein
Is there a JQuery plugin that allows me to 'unhide' a form by after clicking a link? Like I have an invite link that can take me to a one text field form for an email address but I want this form to just drop down (pushing the rest of the content down also) and shows the form to submit the email. If you guys can think of a JQuery plugin that lets me do this, please let me know
Edit:
So I did this
<div class='add-link'>
<div id='invite_link'><a href=''>Invite User</a></div>
<div id='invitation_form'>
<form>
<input type='text'/>
</form>
</div>
</div>
and my jquery looks like
<script type="text/javascript">
$(function()
{
$("table").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
$('#invitation_form').hide();
}
);
$('#invite_link').click(function() {
$('#invitation_form').slideDown();
});
Do you guys see any error that causes the form not to slide down. It hides the form when the page loads but when I click the link it is not sliding down.
$('a.mylink').click(function() {
$('#MyForm').slideDown();
});
I don't think you need a jQuery plugin for this. The base jQuery library should be sufficient.
$('#showFormLink').click(function () {
$('#form').slideDown();
});
If you're looking for animation, that's possible as well by passing in a duration argument to slideDown.
Take a look at the jQuery show documentation.