What is the best way to generate HTML using PHP & JQuery [closed] - javascript

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I've got a setup of HTML, PHP & jQuery. The steps I want the user to take are as follows:
Click a button
Modal Appears with dynamic data (taken from button markup, parent div etc.)
User Submits Modal & Close
I have two options. To:
Generate the HTML prior the user clicking the button. With PHP & Just hide it & then manipulate it with jquery once clicked.
Request the the HTML on click via Ajax using an API & again manipulate it with jQuery.
My question is. From the two options which would be the best for performance?
Reading through this and documenting my logic. I'd say that point 1. would be best as I'm not requesting a large amount of data through the API every time?
Can anyone see any advantages to number two? Apart from not requesting the data server side on page load?
Thanks.

I think the main question here is "how dynamic is the information used to produce that HTML ?".
If there isn't any high probability that the information used to produce that HTML could change at any time, then you should better off with 1st option, since therefore you will be avoiding an additional request to the server.
If the information used to produce that HTML could change at any time, that would be the reason to use the 2nd approach.

Related

Click an element on one page and change an element on another page JQUERY [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I'm attempting to click a button on a page (index1.html) and I want it to modify the color of some text that is actually on another html page (index2.html). Is this possible to do with jquery?
Everything I've tried doesn't work and I understand why: since to view the second page (index2.html), I need to refresh that page, the action is lost during that refresh. I know this can be done with angular or react but i really want to stick with jquery or javascript only.
Is this possible?
One option I can see is when navigating to index2.html, is to pass some query params. For example: ./index2?something=true&otherthing=false. Then use js to get the query params on page load.
var searchParams = new URLSearchParams(window.location.search);
searchParams.get("something"); // true
For reference
It can't be achieved directly neither with jQuery nor with React/Angular/vanilla JS.
You have 2 options both related with storing data.
Use localStorage or sessionStorage (or well cookie if you prefer and it makes sense).
Just store the information you want to pass in index1.html then check if it exists on index2.html, if so, use it.
Use backend
It's actually quite similar to the firs option but slightly more reliable (even though much more complex).
In this case, once the button on index1.html gets clicked, set a cookie with needed data/send data directly to the server with HTTP request.
This way you will have to play with data mostly on the server side.

Autofilling a different webpage with user input [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am trying to find out how I can make a program in JavaScript/HTML that takes a user's input and automatically enters this information onto a different web page. I am new to JavaScript/HTML so any help would be appreciated!
You specified the website as:
Supreme
Now, when you go to checkout, right click and click Inspect Elements. Then find all of the input fields on the website. For example, I found the Full Name input field. The field has a name: order[billing_name]
What you want to do next is in your URL do something like this:
https://www.supremenewyork.com/checkout?order[billing_name]=yourname
Now if you want multiple values (most likely) you need to find the names of the other fields and add the values to the URL, as so:
https://www.supremenewyork.com/checkout?order[billing_name]=yourname&order[email]=youremail
This way you can pass the values from your application and fill in the form on that website.
Hope this helps.
Use localstorage. see working demo in the link below;
Note: localStorage won't work in snippet; hence I made a fiddle.

A separated link for every article (bootsrap modal, django, jQuery) [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a landing page with a list of articles. Users can open every article in a modal window. The problem is that in this way I don't have a possibility to share a link for a specific article. I am trying to find a solution similar to how facebooks newsfeed is working- when you open a picture in the newsfeed, the link is changing and you can copy this link and share it with anybody else.
My website is made on django (python) and it's using bootstrap for modal. I heard that the solution can be in using a JS framework like Angular or similar. Unfortunately I am not so familiarized with JavaScript. What solutions can I find for this issue?
Why don't you just make a separate page displaying individual articles? I know that you already had the modal but by sharing the url that displays the individual page url people could read what's being shared without other useless contents and also make your life easier. The unique identifier could be the article id or a slug.

Pull data from database on click? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I was wondering whether it is possible in JavaScript (preferably jQuery) to pull data from a database using MySQL after clicking on a button? I currently pull data when the page loads, but I don't want to load 100's of items at the beginning as I want to be able to pull certain rows with different buttons?
<button class="AjaxTrigger" data-example="abc">I do ABC </button>
$('.AjaxTrigger').on('click', function(){
$.get("your-file.php", {example: $(this).data('example')}, function(result){
alert( "This is what php gave me: " + "\n" +result );
}
});
And now you let your-file.php do whatever you want, just like you normaly program you php files. Echo the outcome, and in javascript you will get exactly that in the returnfunction (which now alerts your result).
jQuery's full ajax, or jQuery's get (works easier)
Using jQuery to access data-* attributes
jQuery's eventhandling explained (event are eg: click, hover, keyup)
When to use GET or POST (<- Good to read for everyone)
And if you feel like upping your game:
Use jQuery's getJSON to send back an array to javascript ( echo with php's json_encode())

A separate page for unauthorized users or different configurations of the same page? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am making an events website using technologies like HTML, CSS, Javascript, Jquery, PHP etc. I retrieve data from a RESTful service in PHP.
There is a separate event page which is viewed both by actual intended audience and by the organizers who can edit details of the event on this page. When organizer opens the page he should see the options to edit the details of the event. But these options should not be visible to the other users. Other than these options, the page view is same for both the organizers and other users.
My question is that should i hide these options using Javascript/Jquery? Or should I have separate pages for each of the versions of this event page and direct the users according to whether he is a organizer or not? Which is preferable and why?
In php you will know if the current user is an organizer or not. Simply send back a variable in the response like is_organizer: 1 then you can determine what to show based on the user.
If there is not much difference in the html output to the user then this method is preferable to using a completely different view as you keep your code DRY and do not have duplicates of the same markup.
I assume you already check that the user is an organizer before they can save changes to an event. If not you should definitely do so.
UPDATE
Here is some more info based on your recent comment.
If you're using jQuery to make and ajax call and get the data from the REST api I would do something like this (please bear in mind that this is pseudo code):
$.ajax({
url: "event-data.php"
}).done(function(response) {
html = "";
//loop over events
foreach response.events as event
//add event html
eventHtml = "<div class='event'>" + event.name + "</div>";
//if organizer add edit tools
if response.is_organizer
eventHtml += "<div class='edit-controls'>...</div>";
//concat html string
html += eventHTML;
//insert html to dom
$('#content').html(html);
});
I don't know how you are inserting your html into the dom but this way is just an example of how you might build the html based on the user's role.
On a side note I would recommend using a front end framework for this sort of stuff. Here is a decent list:
https://github.com/showcases/front-end-javascript-frameworks
You should use Php.
If you use Jquery to hide these fields , everyone could "unhide" these fields easily. But you could combine these two techniques. Just Hide the fields and if somone do edits the server has to check again if the user is allowed to do changes.

Categories

Resources